Forum - 5 verschiedene Hintergrundwechsler für Forum und Homepage - Teil 1-5

<style>
body {
  background-size:100% !important;
  -moz-background-size:100% !important;
  background-position: top center !important; 
  background-attachment:fixed !important;
 
  /* Hintergrundfarbe */
  /* background-color:#223376; */
}
</style>
 
<script>
function zufall(){
var backImage = [
"https://files.homepagemodules.de/b104774/f46t1197p2704n55_crUpGYli.jpg",
"https://files.homepagemodules.de/b104774/f46t1197p2704n56_IJocTREC.jpg",
"https://files.homepagemodules.de/b104774/f46t1197p2704n57_queRaPpN.jpg",
];
 
var zeilenanzahl = backImage.length - 1;
var zeile = Math.round(Math.random()/(1/zeilenanzahl));
  document.getElementsByTagName('body')[0].style.backgroundImage = 'url('+backImage[zeile]+')';
 
};
window.onload = zufall();
</script>
 

<style>
body {
  background-size:100% !important;
  -moz-background-size:100% !important;
  background-position: top center !important; 
  background-attachment:fixed !important;
 
  /* Hintergrundfarbe */
  /* background-color:#223376; */
}
</style>
 
<script>
var timeChange = 5000;
var bildChange = [
  'https://files.homepagemodules.de/b104774/f46t1197p2704n55_crUpGYli.jpg',
  'https://files.homepagemodules.de/b104774/f46t1197p2704n56_IJocTREC.jpg',
  'https://files.homepagemodules.de/b104774/f46t1197p2704n52_tKbFyagH.jpg',
  'https://files.homepagemodules.de/b104774/pictures_u554_tFrmxKbz.jpg'
];
 
var zeileChange = "0";
function bildwechseln() {
  document.getElementsByTagName('body')[0].style.backgroundImage = 'url('+bildChange[zeileChange]+')';
  zeileChange++;
 
  if (zeileChange == bildChange.length) {
    zeileChange = 0;
  }
 
  setTimeout("bildwechseln()",timeChange);
};
window.onload = bildwechseln;
</script>
 

<style>
body {
  /* background-size:100% !important; 
  -moz-background-size:100% !important; */
  background-position: top center !important; 
  background-attachment:fixed !important;
 
  /* Hintergrundfarbe */
  /* background-color:#223376; */
}
</style>
 
<script>
function switchTimeBackground() {
 
// Hintergrundbilder für Uhrzeiten definieren:
var time_bg = new Array(
  { time: 0, url: '//files.homepagemodules.de/b135428/f199t65501p509119n6_BuMfiqFR.gif' },
  { time: 5, url: '//files.homepagemodules.de/b135428/a_134_23553ebc.jpg' },
  { time: 11, url: 'https://files.homepagemodules.de/b135428/f180t21135p513995n4_eQISdlJc.jpg' },
  { time: 14, url: '//files.homepagemodules.de/b135428/f199t65501p472938n3_bYXNKlBr.jpg' },
  { time: 17, url: '//files.homepagemodules.de/b135428/f199t65501p504081n6_IeyKBUDS.jpg' },
  { time: 20, url: '//files.homepagemodules.de/b135428/f180t21135p485575n8_DXKTeOZC.jpg' }
);
 
// Testzeit - überschreibt tatsächliche Uhrzeit
// Für Wert "null" volle Stunde eintragen (z.B.: 12) - Wert "null" = Grundstellung!
var test_time = null;	
 
var body_bg = '';
var time = new Date();
var hour = time.getHours();
if (test_time != null){
  hour = test_time;
}; 
for (var i=(time_bg.length-1); i>=0; i--) {
if (hour >= time_bg[i].time) {
  body_bg = time_bg[i].url;
  break;
}};
 
if (body_bg != ''){
  document.getElementsByTagName('body')[0].style.backgroundImage = 'url('+body_bg+')';
};
 
};
window.onload = switchTimeBackground;
</script>
 

<!-- Hintergrundwechsler mit Auswahlmenü -->
<style>
body {
  /* Hintergrundfarbe beim Seiten-Reload */
  background: none;
  background-color: #223376;
}
.container, .footer, .page2, #page-body, #page-footer, #wrap .panel, #wrap form[name="inbox"], #wrap form[name="outbox"], #wrap h3, #wrap .topic-actions, #forum #pagewidth tr:nth-child(2), #forum #pagewidth tr:nth-child(3), #footernav { 
  /* Fenster und Boxen verzögert einblenden */
  transition: all 0.3s 0.3s linear;
}
.bgimagesswitch1 { 	
  background:url("//files.homepagemodules.de/b104774/a_400_25abbb81.jpg") !important; 
}
.bgimagesswitch2 {
  background:url("//files.homepagemodules.de/b104774/pictures_u638_OfyzEPri.png") !important;
}
.bgimagesswitch3 {
  background:url("//files.homepagemodules.de/b104774/pictures_u637_odgqnTOY.jpg") !important;
}
.bgimagesswitch4 {
  background:url("//files.homepagemodules.de/b104774/pictures_u635_hFenTYZH.jpg") !important;
}
.bgimagesswitch5 {
  background:url("//files.homepagemodules.de/b104774/f46t1197p3890n6_qoFmDWpA.jpg") !important;
}
.bgimagesswitch6 {
  background:url("//files.homepagemodules.de/b104774/f46t1197p3890n13_nkhuoaVs.jpg") !important;
}
 
.bgformat {
  /* Hintergrundformat */
  background-color: #223376 !important;
  background-size: cover !important;
  background-attachment:fixed !important; 
  background-position: top center !important;
}
.bgtopnavi { 
  display: inline-block;
  border-radius:10px; 
  border: 1px solid transparent;
  margin: 10px auto !important;
  padding: 3px 15px 0 15px;
  /* Animation - Auswahlmenü */
  box-shadow: 2px 2px 4px 0px #333333;
  transition: all 0.3s 0.3s linear;
  transform: scale(1.0); 
}
.bgtopnavi:hover {
  background-color:rgba(240, 240, 240, 0.7);
  border-radius:10px; 
  border: 1px solid #888888;
  /* Animation - Auswahlmenü */
  box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4) !important;
  transform: scale(1.05); 
}
.bgtopnavi .bgformat {
  display:inline-block;
  margin: 5px !important;
  height: 15px !important;
  width: 20px !important;
  border: 1px solid #888888 !important;
  cursor:pointer !important;
}
</style>
 
 
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Elemente beim Mouseover ausblenden (v1-4 und v6)
  elementeMouseover = $('.container, .footer, .page2, #page-body, #page-footer, #wrap .panel, #wrap form[name="inbox"], #wrap form[name="outbox"], #wrap h3, #wrap .topic-actions, #forum #pagewidth tr:nth-child(2), #forum #pagewidth tr:nth-child(3), #footernav');
 
  // Start-Hintergrund bestimmen
  var bgswitch = "bgimagesswitch4";
 
  // Position Auslösebutton (v1-4 und v6)
  $('.header, #nav_n:first, nav#navigation').closest('.content table, #obere_leiste .header, .navbar, #forum table, nav#navigation').after(`
    <center>
      <div class="bgtopnavi" title="Hintergrundbild durch einen Mausklick ändern!">
        <div class="bgimagesswitch1 bgformat"></div>
        <div class="bgimagesswitch2 bgformat"></div>
        <div class="bgimagesswitch3 bgformat"></div>
        <div class="bgimagesswitch4 bgformat"></div>
        <div class="bgimagesswitch5 bgformat"></div>
        <div class="bgimagesswitch6 bgformat"></div>
      </div>
    </center>
  `);
 
  // Lokalen Speicher auslesen
  var bgStorage = localStorage.getItem("background");
  if (!bgStorage) { 
    localStorage.setItem("background", bgswitch);
  }
  $("body").addClass(localStorage.background).addClass('bgformat');
 
  var removeCL = "bgimagesswitch1 bgimagesswitch2 bgimagesswitch3 bgimagesswitch4 bgimagesswitch5 bgimagesswitch6";
 
  $('.bgtopnavi .bgformat').hover(function() { 
    $("body").removeClass(removeCL);
 
    var getColour = $(this).attr("class"); 
    $("body").addClass(getColour);
 
    // Elemente beim Mouseover ausblenden
    elementeMouseover.attr('style','visibility:hidden !important;');
  }, function() {
    $("body").removeClass(removeCL);
 
    var getColour = localStorage.background;
    $("body").addClass(getColour); 
 
    // Elemente beim Mouseout wieder einblenden
    elementeMouseover.attr('style','visibility:visible !important;');
  });
 
  //Hintergrundbild festlegen                               
  $('.bgtopnavi .bgformat').on('click',function () {
    var getColour = $(this).attr("class");
    localStorage.setItem("background", getColour);
 
    // Elemente beim Mouseout wieder einblenden
    elementeMouseover.attr('style','visibility:visible !important;'); 
  });
});
</script>
 

/* Hintergrund ausblenden */
.content {background: none;}
 
/*Hintergrund - durchscheinend - Korrektur*/
.boxcontent  {margin-top: 3px; }
.box {box-shadow: -2px 4px 6px #ffffff; background:#ffffff !important;}
 
#messagetext_error, #messagetitle_error {margin-left:20px !important;padding: 3px !important;line-height:30px; background:#fcebeb;border:1px solid #a51111;border-radius:3px;}
#messagetext_error:before, #messagetitle_error:before {content:url(https://files.homepagemodules.de/b2001010/a_888_11b86ef2.png);position:relative;top:4px;}
#message_sent_box, #testCont table{background:#000046 !important;color:#ffffff !important;border-radius:9px;padding:10px;border:1px solid #011978;}
 
#searchpage {width:96% !important;}
#searchopts .boxcontent, #searchbox {background-color: #eeeeee !important;}
#searchopts div h3 {background: #cccccc !important;}
.search_opt_set h3 {padding:5px 10px;}
.search_opt_set li {margin-left:27px;}
.search_opt_set span a {padding-left:15px !important;}
 
#treetalk_new_topic_link {bbackground:#000046;display: inline-block;border-radius:6px;border:1px solid #011978;padding: 5px 20px;font-weight:bold;margin:30px 0 10px 20px;}
#treetalk_new_topic_link:hover {color:#555555;}
.tree_answer {border-bottom:5px double #011978;}
.tree_loadmore:hover {bbackground:#000046;}
 
.resulttd > div {background:#cccccc;border-radius:5px;padding:7px;}
.resulttd .img_cont{background:#eeeeee;}
 
#xob_search a:hover {font-weight:bold;}
#xob_search li {line-height:20px;}
 
li.icontd:hover table, li.usergbook_message:hover table, li.forum_message:hover table, li.forum_topic:hover table, li.blog_entry:hover table, li.forum_message_revision:hover table {background:#dddddd !important;}
li.forum_user div {background:#dddddd;padding:7px;margin-bottom:5px;}
li.forum_user {background:#eeeeee !important;padding:7px;margin-bottom:5px;}
li.forum_user:hover {background:#cccccc !important;}
 
.threadnp {background:#000046;margin:20px 0px 10px 0px;border-radius:5px;border:1px solid #011978;padding:0px;}
.threadnp a, .threadnp span{color:#ffffff !important;}
 
.next a:hover,.prev a:hover {background:#001154;padding:10px;color:#ffffff !important;}
.next,.prev,.next a,.prev a {padding:10px;ccolor:#ddddff !important;}
 
.page_foruminfo {background:#ffffff;width:97.7%;border:1px solid #011978;margin-bottom:35px; box-shadow: -2px 4px 6px #ffffff;}
.page_new .error:before,.page_private_new .error:before {content:url(https://files.homepagemodules.de/b2001010/a_888_11b86ef2.png); position:relative; top:4px;}
 
.ntop,.ntit {background:#001154;color:#ffffff;padding:5px;}
.nnor td {padding:5px;}
 
.default-css {background-color:#eeeeee;padding:9px;border-radius:9px;}
.default-css {background:none;}
.default-css a {background-color: #eeeeee; padding:2px; border-radius:2px;}
 
.box .boxcontent ul,.box .boxcontent ol  {padding:0 8px 0 8px !important;}
 
.addboxdiv {background-color:#eeeeee;padding:5px;border-radius:4px;}
 
#testCont table {background:#ffffff; border-radius:3px; padding:5px; box-shadow: -2px 4px 6px #ffffff; border:1px solid #000000;}
 
.userdiv {background:#ffffff !important;margin-left:10px !important;}
 
#breadcrumbs, .page_calendar .boxcontent span  a {background:#ffffff; border-radius:3px; padding:5px; position: relative; top: 8px; box-shadow: -2px 4px 6px #ffffff; border:1px solid #aaaaaa;}
 
.error {background:#ffffff; border-radius:3px; border:1px solid #000000;width:auto;}
 
.wikiratings, .calendar_info {background:#ffffff !important;}
 
#picture_comments, #legend_link {background:#ffffff; border:1px solid #aaaaaa; border-radius:3px;color:#a2f34 !important;padding:15px !important; margin:50px 0 !important;}
 
#guestinfo,.integration_cont {padding:5px;border-radius:3px;border:1px solid #011978;}
 
#cid_1 {background:#ffffff;}
 
#pm_filter {border-radius:9px; padding:10px;}
 

<style>
.usercontent, header {
  /* Höheneinstellung in Templates gegebenfalls anpassen - hier passend für (v4+v6) */
  height: 10vw !important;
 
  background-size: cover !important;
  min-height: auto !important;
}
</style>
 
<script>
document.addEventListener('DOMContentLoaded', function() {
 
var hours = new Date().getHours();
var  headerBG = $('.usercontent, header'); 
 
if (hours >= 6 && hours < 12) {                  // von 6:00 bis 12:00
  headerBG.css('background','url("//files.homepagemodules.de/b104774/f46t1197p2706n165_ZMtEFvYj.jpg")');
} 
else if (hours >= 12 && hours < 14) {           // von 11:00 bis 14:00
  headerBG.css('background','url("//files.homepagemodules.de/b104774/f46t1197p2706n164_brcpNkHw.jpg")');
} 
else if (hours >= 14 && hours < 23) {           // von 14:00 bis 23:00
  headerBG.css('background','url("//files.homepagemodules.de/b104774/f46t1197p2706n165_ZMtEFvYj.jpg")');  
} 
if (hours >= 23 && hours < 24) {            // von 23:00 bis 24:00
  headerBG.css('background','url("//files.homepagemodules.de/b104774/f46t1197p2706n163_stDNZmOv.jpg")');
} 
else if (hours >= 0 && hours < 1) {             // von 0:00 bis 1:00
  headerBG.css('background','url("//files.homepagemodules.de/b104774/f46t1197p2706n163_stDNZmOv.jpg")'); 
} 
else if (hours >= 1 && hours < 6) {             // von 1:00 bis 6:00
  headerBG.css('background','url("//files.homepagemodules.de/b104774/f46t1197p2706n163_stDNZmOv.jpg")');  
};
 
});
</script>