Forum - 5 verschiedene Hintergrundwechsler für Forum und Homepage

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � 5 verschiedene Hintergrundwechsler für Forum und Homepage - Teil 1

Seite 1 von 2 � Seite 1 2 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

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

09.08.2007 22:48 (zuletzt bearbeitet: 20.11.2019 23:14)

5 x Hintergrundwechsler für Forum und Homepage - Teil 1
Aktualisiert 20.11.19

Wie soll der Hintergrundwechsler funktionieren?

Soll sich das Hintergrundbild beim erneuten Webseitenaufruf ändern? - Teil 2
Oder automatisch nach einer bestimmten Zeit? - Teil 3
Oder automatisch zu einer bestimmten Tagezeit? - Teil 4
Soll der User das Hintergrundbild selber auswählen? - Teil 5
...

Die Wahl des Hintergrundwechslers ist bestimmt Geschmacksache und kann von Forum zu Forum oder Homepage zu Homepage, unterschiedlich passen und nützlich sein.

Die folgenden Einbauanleitungen funktionieren ohne Eingriff ins Template!

Wichtige Links aus dem Forum:

Styleswitcher - Designauswahl für's gesamte Forum
"Background" per "mouseover" verändern!
Hintergrundwechsler für verschiedene Tageszeiten

Wolfgang

Antworten

#2 | Hintergrundbilder wechseln bei erneuten Webseitenaufruf - Teil 2 datum

09.08.2007 23:30 (zuletzt bearbeitet: 07.05.2021 20:02)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3311
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	1243

Hintergrundbilder wechseln bei erneuten Webseitenaufruf - Teil 2
Aktualisiert 07.05.21

Hintergrundbilder wechseln bei erneuten Webseitenaufruf
Hier kommt ein Hintergrundwechsler, der bei jedem erneuten Webseitenaufruf den Hintergrund per Zufall auswählt.
Der Hintergrundwechsler funktioniert in allen gängigen Browsern und ohne Komplikationen!!!

Einbauanleitung ohne Eingriff ins Template!

Damit das Script läuft, darf im "Body-Tag" (<body ...) keine Hintergrundfarbe und kein festes Hintergrundbild eingetragen sein.
Bitte überprüfen!

Nur im Standard-Template ist kein festes Hintergrundbild und keine Hintergrundfarbe eingetragen!
Im Business-Template die "Hintergrundfarbe Content" und "Hintergrundfarbe des Fensters" löschen (x).
Wenn vorhanden, im Business-Template das "Hintergrundbild" löschen (x).
Wenn vorhanden, in Eigener CSS Code Hintergrundbild löschen.
Wenn vorhanden, in Eigener CSS Code Hinterfarbe löschen.

1
2
3
4
5
6
7
8
9
 
Hintergrundfarbe löschen oder umbenennen:
body {background: #......;}
oder umbenennen in z.B.:
body {background-color: #E9E9E9;}
 
Hintergrundbild löschen:
body {background: url(https://.................... );}
oder
body {background-image: url(https://.................... );}
 

Schlie�en

Das Skript kann in die "Kopf- oder Fußzeile" oder besser als PIugin in "Untere Leiste - header" kopiert werden!
Die Hintergrundbilder können beliebig unter "backImage" erweitert werden

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<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].background=backImage[zeile];
}
 
window.onload = zufall();
</script>
 

Schlie�en

Der Hintergrundwechsler in Aktion: Hintergrundbilder wechseln bei erneuten Webseitenaufruf!

Wolfgang

Antworten

#3 | Hintergrundbilder wechseln automatisch nach Zeit - Teil 3 datum

10.08.2007 00:15 (zuletzt bearbeitet: 07.05.2021 20:00)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3311
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	1243

Hintergrundbilder wechseln automatisch nach Zeit - Teil 3
Aktualisiert 07.05.21

Hintergrundbilder wechseln automatisch nach einer vorgegebenen Zeit. Will man den Hintergrund (Hintergrundbild) im schnellen Wechsel ändern, muss man aufpassen, dass dieser Effekt auf die Dauer nicht zu nervig wird.
Die Hintergrundbilder müssen daher gut auf das Forum abgestimmt sein!

Der Hintergrundwechsler funktioniert in allen gängigen Browsern und ohne Komplikationen!!!

Einbauanleitung ohne Eingriff ins Template!

Damit das Script läuft, darf im "Body-Tag" (<body ...) kein festes Hintergrundbild eingetragen sein.
Bitte überprüfen!

Nur im Standard-Template ist kein festes Hintergrundbild und keine Hintergrundfarbe eingetragen!
Im Business-Template die "Hintergrundfarbe Content" und "Hintergrundfarbe des Fensters" löschen (x).
Wenn vorhanden, im Business-Template das "Hintergrundbild" löschen (x).
Wenn vorhanden, in Eigener CSS Code Hintergrundbild löschen.
Wenn vorhanden, in Eigener CSS Code Hinterfarbe löschen.

1
2
3
4
5
6
7
8
9
 
Hintergrundfarbe löschen oder umbenennen:
body {background: #......;}
oder umbenennen in z.B.:
body {background-color: #E9E9E9;}
 
Hintergrundbild löschen:
body {background: url(https://.................... );}
oder
body {background-image: url(https://.................... );}
 

Schlie�en

Das Skript kann in die "Kopf- oder Fußzeile" oder besser als PIugin in "Untere Leiste - header" kopiert werden!
Die Hintergrundbilder werden in Zeile 4-7 eingetragen.
Die Geschwindigkeit der Hintergrundwechsel bestimmt die Eintragung in Zeile 2, hier 5 Sekunden (5000 mS).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<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].background=bildChange[zeileChange];
zeileChange++;
if (zeileChange == bildChange.length) {
zeileChange = 0;
}
 
setTimeout("bildwechseln()",timeChange);
}
 
window.onload = bildwechseln;
</script>
 

Schlie�en

Der Hintergrundwechsler in Aktion: Hintergrundbilder wechseln automatisch nach Zeit!

Bis dann

Wolfgang

Antworten

#4 | Hintergrundbilder automatisch nach Tageszeit einstellen - Teil 4 datum

10.08.2007 00:18 (zuletzt bearbeitet: 06.04.2021 20:21)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3311
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	1243

Hintergrundbilder automatisch nach Tageszeit einstellen - Teil 4
Aktualisiert 17.05.17

Hier kommt ein Hintergrundwechsler, bei dem der Hintergrund sich nach der Tageszeit automatisch einstellt.
Der Hintergrundwechsler funktioniert in allen gängigen Browsern und ohne Komplikationen!!!
Es sind Zeitwechsel für 0 Uhr, 8 Uhr, 12Uhr, 16 Uhr und 20 Uhr eingebaut.

Einbauanleitung ohne Eingriff ins Template!

Damit das Skript läuft, darf im "Body-Tag" (<body ...) kein festes Hintergrundbild eingetragen sein.
Bitte überprüfen!

Nur im Standard-Template ist kein festes Hintergrundbild und keine Hintergrundfarbe eingetragen!
Im Business-Template die "Hintergrundfarbe Content" und "Hintergrundfarbe des Fensters" löschen (x).
Wenn vorhanden, im Business-Template das "Hintergrundbild" löschen (x).
Wenn vorhanden, in Eigener CSS Code Hintergrundbild löschen.
Wenn vorhanden, in Eigener CSS Code Hinterfarbe löschen.

1
2
3
4
5
6
7
8
9
 
Hintergrundfarbe löschen oder umbenennen:
body {background: #......;}
oder umbenennen in z.B.:
body {background-color: #E9E9E9;}
 
Hintergrundbild löschen:
body {background: url(https://.................... );}
oder
body {background-image: url(https://.................... );}
 

Schlie�en

Das Skript kann in die "Kopf- oder Fußzeile" oder besser als PIugin in "Untere Leiste - header" kopiert werden!
Die Bilder werden entsprechend den Tageszeiten in "Zeile 6-10" eingetragen!
Zum Testen der Bilder kann in "Zeile 15" für den Wert "null" die entsprechende Tageszeit in voller Stunde eingegeben werden

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<script language="javascript" type="text/javascript">
function switch_time_background() {
 
// Hintergrundbilder für Uhrzeiten definieren:
var time_bg = new Array(
{ time: 0, url: 'https://addpics.com/files/6v-4k-fdd7.jpg' },
{ time: 8, url: 'https://addpics.com/files/6v-4j-a755.jpg' },
{ time: 12, url: 'https://addpics.com/files/6v-4k-fdd7.jpg' },
{ time: 16, url: 'https://addpics.com/files/6v-4i-7193.jpg' },
{ time: 20, url: 'https://addpics.com/files/6v-4j-a755.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 = switch_time_background;
</script>
 
 

Schlie�en

Der Hintergrundwechsler in Aktion: Hintergrundbilder automatisch nach Tageszeit einstellen

PS: Nochmal besten Dank an Florian und Sachse für Ideen und Umsetzung

Bis dann

Wolfgang

Antworten

#5 | Hintergrundwechsler mit Vorschau, manuell einstellbar! - Teil 5 datum

17.09.2015 00:28 (zuletzt bearbeitet: 06.04.2021 20:22)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3311
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	1243

Hintergrundwechsler mit Vorschau, manuell einstellbar! - Teil 5
Aktualisiert 24.11.19

Hier kommt ein Hintergrundwechsler, bei dem der Hintergrund manuell mit Vorschau vom User eingestellt werden kann.
Damit man das Hintergrundbild in der Vorschau besser erkennen kann, werden noch zusätzlich die Boxen und Leisten ausgeblendet.
Es besteht auch die Möglichkeit, anstatt Hintergrundbilder, Farben oder Farbverläufe zu wechseln (schnellere Ladezeiten)!
Das Hintergrundbild hält sich auch, wenn die Seiten gewechselt oder geschlossen werden.
Der Hintergrundwechsler funktioniert in allen gängigen Browsern und ohne Komplikationen!!!

Einbauanleitung ohne Eingriff ins Template!

Damit das Script ordnungsmäßig läuft, sollten im "Body-Tag" (<body ...) alte Hintergrundfarben und alte Hintergrundbilder deaktiviert werden!
Um ein Fehlverhalten nach Änderung des Scriptes zu vermeiden "Cache (F5)" oder auch wenn nötig "Browserverlauf" löschen.
Bitte überprüfen!

Nur im Standard-Template ist kein festes Hintergrundbild und keine Hintergrundfarbe eingetragen!
Im Business-Template die "Hintergrundfarbe Content" und "Hintergrundfarbe des Fensters" löschen (x).
Wenn vorhanden, im Business-Template das "Hintergrundbild" löschen (x).
Wenn vorhanden, in Eigener CSS Code Hintergrundbild löschen.
Wenn vorhanden, in Eigener CSS Code Hinterfarbe löschen.

1
2
3
4
5
6
7
8
9
 
Hintergrundfarbe löschen oder umbenennen:
body {background: #......;}
oder umbenennen in z.B.:
body {background-color: #E9E9E9;}
 
Hintergrundbild löschen:
body {background: url(https://.................... );}
oder
body {background-image: url(https://.................... );}
 

Schlie�en

Die Werte für die CSS werden unter "Admin > Layout > Farben & Einstellungen > CSS" in "Eigener CSS Code" eingetragen!
Die Hintergrundfarbe im "Body" und "Start-Button 1" sollten gleich sein ("Zeile 7 und 27". Hier "background-color: #223376;")
Sollen nur Bilder gewechselt werden, den Wert für die Hintergrundfarbe in "Zeile 27" und die Auskommentierung in "Zeile 26" löschen
Über "class=bgtopnavi" kann die Position der Auslösebutton bestimmt werden!
Über ".bgimagepalette" kann die Größe und das Aussehen der Auslöse-Button bestimmt werden!
Für eine Erweiterung der Hintergrundbilder wird jeweils ein Eintrag von ".bgimagesswitch" in der CSS (unter Zeile 41-43) und ein weiterer Div-Container (unter Zeile 46) im JavaScript benötigt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<style type="text/css">
    
  body {
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    background-attachment:fixed;
    background-color:#223376;
  }
  .bgtopnavi {
    position: absolute !important;
    float: left !impotant;
    z-index: 9000 !important;
    top:0px;
  }
  .bgimagepalette {
    display:inline-block;
    z-index:9000;	
    margin: 5px !important;
    height: 15px !important;
    width: 20px !important;
    border: 1px solid #eeeeee !important;
    cursor:pointer !important;
}
 
  .bgimagesswitch1 { 	
    /* background:url(//files.homepagemodules.de/b104774/f46t1197p2704n55_crUpGYli.jpg); */
    background: #223376;
	}
  .bgimagesswitch2 {
    background:url(//files.homepagemodules.de/b104774/f46t1197p2704n56_IJocTREC.jpg);
	}
  .bgimagesswitch3 	{
    background:url(//files.homepagemodules.de/b104774/f46t1197p2704n57_queRaPpN.jpg);
	}
  .bgimagesswitch4 	{
    background:url(//files.homepagemodules.de/b104774/f46t1197p2704n53_KjxQsSrm.jpg);
	}
  .bgimagesswitch5 	{
    background:url(//files.homepagemodules.de/b104774/f46t1197p2704n52_tKbFyagH.jpg);
	}
  .bgimagesswitch6 	{
    background:url(//files.homepagemodules.de/b104774/pictures_u554_tFrmxKbz.jpg);
	}
 
</style>
 

Schlie�en

Das Skript kann in die "Kopf- oder Fußzeile" oder besser als PIugin in "Untere Leiste - header" kopiert werden!
Die "Klassen" und "ID's" in "Zeile 18,19 und 26" sind für das Aus- und Einblenden der Foren-Boxen beim "Mouseover" notwendig.
Sie sind hier für das Business-Template angepasst. Für andere Templates gelten andere "Klassen" und "ID's".
Für eine Erweiterung der Hintergrundbilder wird jeweils ein Eintrag von ".bgimagesswitch" in der CSS (unter Zeile 41-43) und ein weiterer Div-Container (unter Zeile 46) hier im Skript benötigt.
Will man auf das Aus- und Einblenden der Boxen-Fenster verzichten, "Zeile 18,19 und 26" einfach auskommentieren oder löschen.
Will man auf die Vorschau verzichten, "Zeile 12 bis 27" auskommentieren oder löschen.
Nur wenn JQuery nicht vorhanden ist (z.B. im Standard-Template), die Zeichen fürs "Auskommentieren" in "Zeile 3" löschen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 

<!--Nur wenn JQuery nicht vorhanden ist (Standard-Template), die Zeichen fürs "Auskommentieren" in der nächsten Zeile löschen-->
<!--<script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>-->
 
<script type="text/javascript">
$('div.topnavigation_wrap').prepend($('div.bgtopnavi'));
 
var getColour = localStorage.background;
$("body").addClass(getColour);
 
$(document).ready(function () {
 
//Vorschau
$('.bgimagepalette').hover(function() {
 
$("body").removeClass(getColour);
var getColour = $(this).attr("id"); 
$("body").addClass(getColour);
$('.flagcounter,#google_translate_element,.header,.container,.background_hidden,.footer,.imageslider,.transl').attr('style','visibility:hidden !important;'); 
$('#fb_like,#blog-sidebar').attr('style','display:none !important;');
 
}, function() {
 
$("body").removeClass(getColour);
var getColour = localStorage.background;
$("body").addClass(getColour); 
$('#blog-sidebar,#fb_like,.flagcounter,#google_translate_element,.header,.container,.background_hidden,.footer,.imageslider,.transl').attr('style','visibility:visible !important;'); 
});
 
//Hintergrundbild festlegen                               
$('.bgimagepalette').click(function () {
//$("body").removeClass(getColour);
//localStorage.removeItem('background');
var getColour = $(this).attr("id");
localStorage.setItem("background", getColour);
});
});
 
</script>
 
<!-- Leiste der Auslöse-Button -->
<div class="bgtopnavi" title="Hintergrundbild durch einen Mausklick ändern!">
  
  <div id="bgimagesswitch1" class="bgimagepalette bgimagesswitch1"></div>
  <div id="bgimagesswitch2" class="bgimagepalette bgimagesswitch2"></div>
  <div id="bgimagesswitch3" class="bgimagepalette bgimagesswitch3"></div>
  <div id="bgimagesswitch4" class="bgimagepalette bgimagesswitch4"></div>
  <div id="bgimagesswitch5" class="bgimagepalette bgimagesswitch5"></div>
  <div id="bgimagesswitch6" class="bgimagepalette bgimagesswitch6"></div>
  
</div>
 

Schlie�en

Hintergrundwechsler nur mit Farben oder Farbverläufen:

Es ist auch möglich, nur Farben oder Farbverläufe zu wechseln!
Hierzu werden in Zeile 10-20 die Tags (background...) gegen Farben oder Farbverläufe ausgetauscht.

Der Hintergrundwechsler in Aktion:

Hintergrundwechsler mit Bildern!
Hintergrundwechsler mit Farbverläufen!

PS: Nochmal besten Dank an Jürgen

Bis dann

Wolfgang

Antworten

#6 | Hintergrundbilder im Business-Template besser zu Geltung bringen datum

20.09.2015 11:34 (zuletzt bearbeitet: 24.11.2019 23:23)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3311
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	1243

Hintergrundbilder im Business-Template besser zu Geltung bringen
Aktualisiert 24.11.19

Im Business-Template gibt eine Farbbestimmung auf dem die Boxen angeordnet sind, die "Hintergrundfarbe Content".
Will man aber das Hintergrundbild stärker zu Geltung bringen und es wie hier im Forum zwischen den Boxen durchscheinen lassen, muss man die "" löschen.
Aber!
Einige Links, Button, Error-Meldungen und andere Benachrichtigungen, haben leider keinen eigenen Hintergrund und bauen auf die "Hintergrundfarbe Content" auf.
Um die Deckung beizubehalten, braucht nur die CSS angepasst werden.

Anleitung - Hintergrundbild zwischen den Boxen durchscheinen lassen

Um das Hintergrundbild durchscheinen zulassen muss die "Hintergrundfarbe Content" unter
"Admin > Layout > Farben & Einstellungen" gelöscht werden!
Werte für die CSS werden unter "Admin > Layout > Farben & Einstellungen > CSS" in "Eigener CSS Code" eingetragen!
Fertig!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
/*Hintergrund - durchscheinend - Korrektur*/
.error{background:#ffffff;border-radius:3px;adding:5px;border:1px solid #000000;width:auto;}
#usercont_bottom {width:96% !important}
#korrekturIndex{width:96% !important}
#guestinfo,.integration_cont{background:#ffffff;border-radius:3px;padding:5px;box-shadow: -2px 4px 6px #ffffff;border:1px solid #000000;}
#cid_1{background:#ffffff;}
#pm_filter{background:#ffffff;}
#searchpage{width:96% !important;}
#treetalk_new_topic_link {background:#ffffff;display: inline-block;border-radius: 6px;box-shadow: 0px 0px 6px #ffffff;border: 1px solid #000000;padding: 5px 20px;font-weight: bold;margin: 30px 0 10px 20px;}
#treetalk_new_topic_link:hover {color:#555555;}
.tree_answer {border-bottom:5px double #999999;box-shadow: 0px 3px 4px #cccccc !important;}
.tree_loadmore:hover {background:#eeeeee;}
 
.wikiratings, .calendar_info{background:#ffffff !important;}
.resulttd {position:relative;left:30px;margin-right:40px;background:#eeeeff;border-radius:3px;padding:0 30px 0 50px !important;}
.box{box-shadow: -2px 4px 6px #ffffff;background:#ffffff !important;}
.threadnp{border:1px solid #000000;background:#ffffff;margin:20px 0px 10px 0px;border-radius:5px;padding:0px;}
.next a:hover,.prev a:hover{background:#001154;padding:10px;color:#ffffff !important;}
.next,.prev{padding:10px;color:#000000;}
.page_foruminfo{background:#ffffff;width:97.7%;box-shadow: -2px 4px 6px #ffffff;border:1px solid #000000;margin-bottom:35px;}
.ntop,.ntit{background:#001154;color:#ffffff;padding:5px;}
.nnor td{padding:5px;}
#message_sent_box{background:#ffffff;border-radius:3px;padding:5px;box-shadow: -2px 4px 6px #ffffff;border:1px solid #000000;}
#testCont table{background:#ffffff;border-radius:3px;padding:5px;box-shadow: -2px 4px 6px #ffffff;border:1px solid #000000;}
.addboxdiv{background-color:#eeeeee;padding:5px;border-radius:4px;}
.default-css a{background-color:#eeeeee;padding:2px;border-radius:2px;}
 

Um diesen Beitrag zu lesen, müssen Sie sich anmelden!

Ein kleines Dankeschön für meine Arbeit!

Schlie�en

Bis dann und viel Spaß

Wolfgang

Hans58 findet das Top!

Antworten

#7 | Hintergrundbilder automatisch nach Tageszeit einstellen datum

22.09.2015 13:02 (zuletzt bearbeitet: 27.09.2015 05:07)

Hans58

Informationen anzeigen

Beitr�ge:	111
Registriert seit:	05.08.2008

Homepage:	Link
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	25

Habe ich mir als Plugin eingebaut.

Obere Leiste ... Header.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<script type="text/javascript">
var currentTime = new Date();
var hours = currentTime.getHours();
if (hours > 5 && hours <= 10){                        //von 6:00 bis 10:59
document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/a_134_23553ebc.jpg)";
} 
else if(hours > 10 && hours <= 11) {                  //von 11:00 bis 11:59
document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/a_134_23553ebc.jpg)";
} 
else if(hours > 11 && hours <= 13) {                  //von 12:00 bis 13:59
document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p504081n8_GkFMqYdW.jpg)";  
} 
 else if(hours > 13 && hours <= 14) {                  //von 14:00 bis 14:59
document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p504081n8_GkFMqYdW.jpg)";  
} 
 else if(hours > 14 && hours <= 15) {                  //von 15:00 bis 15:59
document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f180t21135p513995n4_eQISdlJc.jpg)";  
}  
else if(hours > 15 && hours <= 17) {                  //von 16:00 bis 17:59
document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p472938n3_bYXNKlBr.jpg)";
}   
else if(hours > 17 && hours <= 19) {                  //von 18:00 bis 19:59
document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f180t21135p485575n8_DXKTeOZC.jpg)"; 
} 
else if(hours > 19 && hours <= 24 || hours <= 0){     //von 20:00 bis 00:59
document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p504081n6_IeyKBUDS.jpg)";
} 
else if(hours > 0 && hours <= 5){                     //von 1:00 bis 5:59
document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p509119n6_BuMfiqFR.gif)"; 
}
</script>
 

Schlie�en

Wolfgang findet das Top!

Antworten

#8 | RE: Hintergrundbilder automatisch nach Tageszeit einstellen datum

22.09.2015 13:43 (zuletzt bearbeitet: 22.09.2015 16:07)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3311
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	1243

Hallo Hans58,
die IF-Abfrage mit "von ... bis" ist echt eine gute Variation für Änderung nach "Tageszeit".

Man kann auch hier die Zeiten gut durchtesten:

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
var currentTime = new Date();
 
// Testzeit - überschreibt tatsächliche Uhrzeit
// Für "currentTime.getHours()" volle Stunde eintragen (z.B.: 12)
// Eintrag "currentTime.getHours()" Grundstellung!
var hours = currentTime.getHours();
.....
 

Bis dann
Wolfgang

Antworten

#9 | RE: Hintergrundbilder automatisch nach Tageszeit einstellen datum

23.09.2015 18:05 (zuletzt bearbeitet: 23.09.2015 18:08)

Hans58

Informationen anzeigen

Beitr�ge:	111
Registriert seit:	05.08.2008

Homepage:	Link
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	25

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
var currentTime = new Date();
var hours = currentTime.getHours();
if (hours > 5 && hours <= 10){                        //von 6:00 bis 10:59
[rot]document.body.style.backgroundImage[/rot]="url(https://files.homepagemodules.de/b135428/a_134_23553ebc.jpg)";
} 
else if(hours > 10 && hours <= 11) {                  //von 11:00 bis 11:59
]document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/a_134_23553ebc.jpg)";
} 
.........
 

Hallo Wolfgang,
kann man den Script auch so umschreiben dass man damit das Headerbild ändern kann?

Mit document.write(..) will es nicht klappen!

Kannst du mir helfen?

Antworten

#10 | Hintergrundbild der Kopfzeile automatisch nach Tageszeit einstellen datum

27.09.2015 05:03 (zuletzt bearbeitet: 24.11.2019 23:31)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3311
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	1243

Hintergrundbild der Kopfzeile automatisch nach Tageszeit einstellen

Hallo Hans58,
habe eine Lösung gefunden. Wollte erst alles mit "jQuery" aufbauen, hat aber nicht so schnell geklappt.
Ich habe jetzt "document.getElementById('header').style.backgroundImage" eingesetzt. Das hat allerdings zur Folge, dass man eine "ID" braucht!
Man muss im Template Element "Obere Leiste" die "Header-Zeile" um eine "ID" erweitern.

<div id="header" class="header">

Ich habe die Zeile für den "Body-Hintergrund" nur auskommentiert.
Man könnte somit die Hintergründe für "Header" oder "Body" auch gemischt oder zusammen darstellen!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<script type="text/javascript">
var currentTime = new Date();
var hours = currentTime.getHours();
 
if (hours > 5 && hours <= 10){                        //von 6:00 bis 10:59
//document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/a_134_23553ebc.jpg)";
document.getElementById('header').style.backgroundImage="url(https://files.homepagemodules.de/b135428/a_134_23553ebc.jpg)"; 
} 
else if(hours > 10 && hours <= 11) {                  //von 11:00 bis 11:59
//document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/a_134_23553ebc.jpg)";
document.getElementById('header').style.backgroundImage="url(https://files.homepagemodules.de/b135428/a_134_23553ebc.jpg)"; 
} 
else if(hours > 11 && hours <= 13) {                  //von 12:00 bis 13:59
//document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p504081n8_GkFMqYdW.jpg)";
document.getElementById('header').style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p504081n8_GkFMqYdW.jpg)";    
} 
 else if(hours > 13 && hours <= 14) {                  //von 14:00 bis 14:59
//document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p504081n8_GkFMqYdW.jpg)";
document.getElementById('header').style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p504081n8_GkFMqYdW.jpg)";  
} 
 else if(hours > 14 && hours <= 15) {                  //von 15:00 bis 15:59
//document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f180t21135p513995n4_eQISdlJc.jpg)";
document.getElementById('header').style.backgroundImage="url(https://files.homepagemodules.de/b135428/f180t21135p513995n4_eQISdlJc.jpg)";   
}  
else if(hours > 15 && hours <= 17) {                  //von 16:00 bis 17:59
//document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p472938n3_bYXNKlBr.jpg)";
document.getElementById('header').style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p472938n3_bYXNKlBr.jpg)"; 
}   
else if(hours > 17 && hours <= 19) {                  //von 18:00 bis 19:59
//document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f180t21135p485575n8_DXKTeOZC.jpg)";
document.getElementById('header').style.backgroundImage="url(https://files.homepagemodules.de/b135428/f180t21135p485575n8_DXKTeOZC.jpg)";  
} 
else if(hours > 19 && hours <= 24 || hours <= 0){      //von 20:00 bis 00:59
//document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p504081n6_IeyKBUDS.jpg)";
document.getElementById('header').style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p504081n6_IeyKBUDS.jpg)"; 
} 
else if(hours > 0 && hours <= 5){                     //von 1:00 bis 5:59
document.getElementById('header').style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p509119n6_BuMfiqFR.gif)";
//document.body.style.backgroundImage="url(https://files.homepagemodules.de/b135428/f199t65501p509119n6_BuMfiqFR.gif)"; 
}
</script>
 

Schlie�en

Bis dann

Wolfgang

Hans58 findet das Top!

Antworten

Verlinkte Bilder zwischen den Forum Kategorien platzieren � � Eigene Forencodes funktionieren nicht

Seite 1 von 2 � Seite 1 2 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Sprechblasen fürs Forum - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 10.08.2022 18:49
Wolfgang • Zugriffe: 633
Zuklappen der Forum-Statistik Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 7 07.04.2022 19:31
Gabriella • Zugriffe: 594
Tastenkombinationen (Shortcuts) fürs eigene Forum (v4 + v6)
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 2 09.05.2022 14:11
Hannita2 • Zugriffe: 1039
Was ist Webhosting - Meine Homepage, mein Forum!
Erstellt im Forum Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps von Wolfgang 0 07.09.2018 11:20
Wolfgang • Zugriffe: 596

Wie mache ich mein Forum, Homepage oder Webseite bekannter?
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

18.11.2010 13:59
von

Wolfgang • Zugriffe: 1553

Foren in verschiedenen Sprachen übersetzen Teil 1-4
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 39 28.10.2023 13:02
Wolfgang • Zugriffe: 12283

Scripte und Effekte fürs Forum und die Homepage
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

25.10.2009 17:41
von

Wolfgang • Zugriffe: 13306

Minimierter Styleswitcher / Hintergrundwechsler für alle Template (auch V6)
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 21 16.08.2022 18:44
EaglePipe • Zugriffe: 13655
Die Top-Favoriten aus diesem Forum
Erstellt im Forum Alles, was noch so �brig bleibt von Wolfgang 0 10.04.2007 17:57
Wolfgang • Zugriffe: 18565

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €

78%

Zum Einbau: Google-Translator!

Favoriten speichern

5 x Hintergrundwechsler für Forum und Homepage - Teil 1Aktualisiert 20.11.19

Hintergrundbilder wechseln bei erneuten Webseitenaufruf - Teil 2Aktualisiert 07.05.21

Hintergrundbilder wechseln automatisch nach Zeit - Teil 3Aktualisiert 07.05.21

Hintergrundbilder automatisch nach Tageszeit einstellen - Teil 4Aktualisiert 17.05.17

Hintergrundwechsler mit Vorschau, manuell einstellbar! - Teil 5Aktualisiert 24.11.19

Hintergrundbilder im Business-Template besser zu Geltung bringenAktualisiert 24.11.19

Hintergrundbild der Kopfzeile automatisch nach Tageszeit einstellen

Forum Lesezeichen ❌

5 x Hintergrundwechsler für Forum und Homepage - Teil 1
Aktualisiert 20.11.19

Hintergrundbilder wechseln bei erneuten Webseitenaufruf - Teil 2
Aktualisiert 07.05.21

Hintergrundbilder wechseln automatisch nach Zeit - Teil 3
Aktualisiert 07.05.21

Hintergrundbilder automatisch nach Tageszeit einstellen - Teil 4
Aktualisiert 17.05.17

Hintergrundwechsler mit Vorschau, manuell einstellbar! - Teil 5
Aktualisiert 24.11.19

Hintergrundbilder im Business-Template besser zu Geltung bringen
Aktualisiert 24.11.19