Forum - Update: Animierte Weihnachtskerzen unter dem Avatar im Beitrag - Teil 2

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 - Fragen & Antworten! » Weihnachtszweig & Weihnachtskerzen - Kerzen zu den Adventssonntagen

Seite 2 von 6 « Seite 1 2 3 4 5 6 Seite »

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ankündigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. Ärger mit dem PC, Laptop oder Tablet? Ärger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? Ärger mit dem PC, Laptop oder Tablet - 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. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights 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.

#11 | Update: Animierte Weihnachtskerzen unter dem Avatar im Beitrag - Teil 2 datum

14.12.2024 12:48 (zuletzt bearbeitet: 15.12.2024 16:38)

Update: Animierte Weihnachtskerzen unter dem Avatar im Beitrag - Teil 2

Hallo GabiDa die Templates so verschieden sind und mittlerweile die nachgebauten Skripte auch ihren Einfluss haben, ist es gar nicht so einfach alles 100%ig hinzubekommen!
Bei Dir fehlte nur der Tag "<center ... </center>", der die Kerzen umschließt.
Für die Platzierung unter dem Avatar brauchte nur die Class geändert werden!
Das alte Kerzen-Skript muss entfernt oder überschrieben werden!
Das Skript ist allerdings nicht so automatisiert, dass zum 3. Advent und 4. Advent die passende Anzahl der Kerzen angezeigt wird.
Hier muss man dann zum Sonntag eine Kerze nachrüsten und evtl. die Größe anpassen!
Habe Deine Vorschläge in Beitrag #8 nachgetragen und die Einbauanleitung nochmals überarbeitet und genauer geschrieben!

Das Tannenzweig-Skript aus Beitrag#3 kann zusätzlich installiert werden, sieht gut aus, wenn die Kerzen unter dem Avatar platziert sind!

Viele Dank für Deine Ideen und das Feedback!
Wolfgang

Hans58, Gabriella und Dankeschön finden das Top!

Antworten

#12 | RE: Update: Animierte Weihnachtskerzen unter dem Avatar im Beitrag - Teil 2 datum

14.12.2024 16:04 (zuletzt bearbeitet: 15.12.2024 06:16)

Zitat von Wolfgang im Beitrag #11
Das Tannenzweig-Skript aus Beitrag#3 kann zusätzlich installiert werden, sieht gut aus, wenn die Kerzen unter dem Avatar platziert sind!

Das habe ich heute Morgen nur spontan eingesetzt, gefällt mir aber nicht, da der Hintergrund des Zweigs eben in diesem blöden weiss ist. Perfekter wäre es, wenn die gesamte Sidebar dieselbe Farbe hätte, zudem wäre es schöner unter dem Rang, direkt unter den Kerzen.

Ist das evtl. auch machbar?

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Antworten

#13 | Fehlersuche: Animierte Weihnachtskerzen unter dem Avatar im Beitrag - Teil 2 datum

15.12.2024 06:29 (zuletzt bearbeitet: 15.12.2024 16:18)

Zitat von Gabriella im Beitrag #12
Zitat von Wolfgang im Beitrag #11
Das Tannenzweig-Skript aus Beitrag#3 kann zusätzlich installiert werden, sieht gut aus, wenn die Kerzen unter dem Avatar platziert sind!

Das habe ich heute Morgen nur spontan eingesetzt, gefällt mir aber nicht, da der Hintergrund des Zweigs eben in diesem blöden Weiß ist. Perfekter wäre es, wenn die gesamte Sidebar dieselbe Farbe hätte, zudem wäre es schöner unter dem Rang, direkt unter den Kerzen.

Ist das evtl. auch machbar?

Ursache + Fehler gefunden!Viele Bilder und Grafiken haben einen weißen Hintergrund, wie der Tannenzweig auch!
Hatte den Tannenzweig bereits bearbeitet und den weißen Hintergrund entfernt, nur noch nicht in Beitrag #3 + Beitrag #5 eingetragen!

Bis dann
Wolfgang

Gabriella und Kipper-Spedition finden das Top!

Antworten

#14 | RE: Fehlersuche: Animierte Weihnachtskerzen unter dem Avatar im Beitrag - Teil 2 datum

15.12.2024 08:56

Lieber Wolfgang,

ich möchte Dir mitteilen, dass ich beide Scripte nun nach Deiner tollen Anweisung passend an meine Bedürfnisse einstellen konnte.

❤️ lichen Dank für Deine immerwährende und unermüdliche Hilfe, Deine alte Schweizerkollegin 🙋

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Kipper-Spedition und Wolfgang finden das Top!

Antworten

#15 | RE: Fehlersuche: Animierte Weihnachtskerzen unter dem Avatar im Beitrag - Teil 2 datum

06.02.2025 16:24

Hallo

Melde mich nach langer schwerer Erkrankung mal wieder zurück und hole das Thema nochmal nach vorne, wo ich auch direkt eine Frage zu habe:
Besteht zu einem Bild -welches man unter das Avatar-Bild legen kann- auch die Möglichkeit dort einen oder mehrere Links mit entsprechendem Text drunter zu legen ? Geil wäre auch eine Art Menübereich, was auf verschiedene Bereiche im Forum verweißt...??

Lieben Gruß
Alfred

Wolfgang findet das Top!

Antworten

Moderations-Kommentar:

Habe einen neuen Beitrag #1 aufgemacht!

#16 | RE: Animierte Weihnachtskerzen unter dem Avatar (im Beitrag) - Teil 2 datum

30.11.2025 12:21 (zuletzt bearbeitet: 30.11.2025 16:11)

Daishi

Informationen anzeigen

Beiträge:	409
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 € Forum Spende
Sternzeichen	Steinbock
Likes	362

Hier ist noch eine Idee von mir. Hatte ja die Kerzen damals entworfen und Wolfgang hatte sie ja verfeinert und für das Forum tauglich gemacht.

Wenn man alle 4 Kerzen einfügt, brennen sie alle. Dies kann man ja abschalten, dass nur 1 Kerze brennt. Man muss nur jeweils an der Kerze 2 Sachen auskommentieren.

Wenn auskommentiert wurde, sieht das so aus:

Im Moment, wenn man es einfügt schaut es so aus:

Wenn man die Kerzen auspusten möchte geht man so vor:

Man kommentiert diese 2 Zeilen aus:

1
2
3
4
5
6
7
8
 
        <div class="DivKerze">
          <div class="Kerze">
            <div class="Flackern"></div>
            <div class="Docht"></div>
            <!-- <div class="Leuchten"></div> -->
           <!-- <div class="Flamme"></div> -->
          </div>
        </div>
 

Im Code würde es so aussehen:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
 
<!-- Anfang Kerzen unter Profil -->
<!-- Anfang Kerzen unter Profil -->
<!-- Anfang Kerzen unter Profil -->
 

<style>
.DivKerze {
  --kerzengröße: 40px;
 
  width: var(--kerzengröße);
  height: calc(var(--kerzengröße) * 2.5);
  margin: var(--kerzengröße) auto 20px auto;
  position: relative;
  display:inline-block;
}
.DivKerze *, .DivKerze *:before, .DivKerze *:after {
  position: absolute;
  content: "";
}
.Kerze {
  bottom: 0;
  width: var(--kerzengröße);
  height: calc(var(--kerzengröße) * 2);
  border-radius: var(--kerzengröße) / calc(var(--kerzengröße) / 3.75);
  box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0 50px 0 rgba(0, 0, 0, 0.4);
  background: #190f02;
  background: linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
   background: linear-gradient(#f44409, #f73309, #ee2209, #ff1103 50%, #fc0009); 
}
.Kerze:before {
  box-sizing: border-box;
  left: 0;
  width: 100%;
  height: calc(var(--kerzengröße) / 3.75);
  border-radius: 50%;
  border: 2px solid #d47401;
  border: 2px solid #d40001; 
  background: #b86409;
  background: radial-gradient(#ffef80, #b86409 60%);
  background: radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
   background: radial-gradient(#ff4480, #dd8809 60%); 
   background: radial-gradient(#e44421, #8e0001 45%, #b82209 80%); 
}
.Kerze:after {
  width: calc(var(--kerzengröße) / 4.412);
  height: calc(var(--kerzengröße) / 15);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  top: calc(var(--kerzengröße) / 10.714);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
}
.Docht {
  width: calc(var(--kerzengröße) / 25);
  height: calc(var(--kerzengröße) / 4.17);
  top: calc(var(--kerzengröße) * (-0.11333) );
  left: 50%;
  z-index: 1;
  border-radius: 40% 40% 5% 5%;
  transform: translateX(-50%);
  background: #121212;
  background: -webkit-gradient(linear, left top, left bottom, from(#d6994a), color-stop(#4b232c), color-stop(#121212), color-stop(black), color-stop(90%, #e8bb31));
  background: linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
}
.Flamme {
  width: calc(var(--kerzengröße) / 6.25);
  height: calc(var(--kerzengröße) / 1.25);
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%);
  bottom: 100%;
  border-radius: 50% 50% 20% 20%;
  background: rgba(255, 255, 255, 1);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, white), to(transparent));
  background: linear-gradient(white 80%, transparent);
  animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;
}
.Flamme:before {
  left:0;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 0 15px 0 rgba(247, 93, 0, .4), 0 -6px 4px 0 rgba(247, 128, 0, .7);
}
@keyframes moveFlame {
  0%, 100% {
    transform: translateX(-50%) rotate(-2deg);
  }
  50% {
    transform: translateX(-50%) rotate(2deg);
  }
}
@keyframes enlargeFlame {
  0%, 100% {
    height: calc(var(--kerzengröße) / 1.25);
  }
  50% {
    height: calc(var(--kerzengröße) / 1.07143);
  }
}
.Leuchten {
  width: calc(var(--kerzengröße) / 5.7692);
  height: calc(var(--kerzengröße) / 2.5);
  border-radius: 50% 50% 35% 35%;
  left: 50%;
  top: calc(var(--kerzengröße) * (-0.32) );
  transform: translateX(-50%);
  background: rgba(0, 133, 255, .7);
  box-shadow: 0 -40px 30px 0 #dc8a0c, 0 40px 50px 0 #dc8a0c, inset 3px 0 2px 0 rgba(0, 133, 255, .6), inset -3px 0 2px 0 rgba(0, 133, 255, .6);
}
.Leuchten:before {
  width: 70%;
  height: 60%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}
.Flackern {
  width: calc(var(--kerzengröße) / 1.5);
  height: calc(var(--kerzengröße) / 0.83333);
  left: 50%;
  top: -55%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ff6000;
  filter: blur(60px);
  animation: blinkIt .1s infinite;
}
@-webkit-keyframes blinkIt {
  50% {
    opacity: .8;
  }
}
@keyframes blinkIt {
  50% {
    opacity: .8;
  }
}
</style>
 
<script>
// Weihnachtskerzen unter dem Avatar im Beitrag
  document.addEventListener('DOMContentLoaded', function() {
    var kerze = $('td.sidebar, .messagecont div div:first-child center:first-child, .message_leftcol'); 
 // var kerze = $('td.sidebar .messageAvatar, .messagecont div div:first-child center:first-child, .message_leftcol .muser'); 
    kerze.append(`
      <center>
 
       
 
 <div class="DivKerze">
          <div class="Kerze">
            <div class="Flackern"></div>
            <div class="Docht"></div>
            <div class="Leuchten"></div>
            <div class="Flamme"></div>
          </div>
        </div> 
 
 <div class="DivKerze">
          <div class="Kerze">
            <div class="Flackern"></div>
            <div class="Docht"></div>
           <!--   <div class="Leuchten"></div> -->
         <!--    <div class="Flamme"></div> -->
          </div>
        </div>
 
 <div class="DivKerze">
          <div class="Kerze">
            <div class="Flackern"></div>
            <div class="Docht"></div>
           <!--   <div class="Leuchten"></div> -->
         <!--    <div class="Flamme"></div> -->
          </div>
        </div>
 
  <div class="DivKerze">
          <div class="Kerze">
            <div class="Flackern"></div>
            <div class="Docht"></div>
           <!--   <div class="Leuchten"></div> -->
         <!--    <div class="Flamme"></div> -->
          </div>
        </div> 
<!--   Schöner Zweig mit Lichtern unter den Kerzen -->
      <img src="//files.homepagemodules.de/b920350/a_52_c4a34906.png" style="max-width:265px; margin-top:-70px;">
 </center>
    `);
  });
</script>
 
<!-- Ende Kerzen unter Profil -->
<!-- Ende Kerzen unter Profil -->
<!-- Ende Kerzen unter Profil -->
 

Schließen

Sieht dann so aus:

Ich dachte mir nur, dass das ja nicht viele wissen, gebe mein Wissen weiter und hoffe das es in Ordnung ist. Ich dachte mir das vielleicht jemand fragen würde, ob man die Kerzen anzünden und auspusten kann.

Ich hoffe, dass ich hier etwas helfen konnte und ich es soweit gut und verständlich erklären konnte.

Ich wünsche euch allen schöne vorweihnachtliche Tage und einen schönen ersten Advent.

Mit herzlichen Grüßen

Daishi

Daishi

Wolfgang, Dankeschön und Nara finden das Top!

Antworten

#17 | RE: Animierte Weihnachtskerzen unter dem Avatar (im Beitrag) - Teil 2 datum

30.11.2025 12:26

Hallo Daishi,

schön das du wieder da bist.
Immer her mit deinen kreativen Ideen!

Sächsische Grüße vom Arndt

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang, Dankeschön und Daishi finden das Top!

Antworten

#18 | RE: Animierte Weihnachtskerzen unter dem Avatar (im Beitrag) - Teil 2 datum

01.12.2025 17:07 (zuletzt bearbeitet: 01.12.2025 17:27)

Klasse, vielen Dank an euch beide!

Einige Kleinigkeiten...

Nach dem Zweig hatte ich die 1 Kerze, auch mit den vorgeschlagenen Änderungen, die dann auch unterm Avatar.
V4 & mobil: Mobil ist dann der 1) ⮕ Nutzertitel bei uns allerdings hinten abgeschnitten, jedenfalls bei nur 1 Kerze, vielleicht nicht mehr wenn bei mehreren?
Und im V4 ist der Tannenzweig 2) ⮕ auf der linken Seite, das sieht ein bisschen komisch aus?

Die 1 hab ich jetzt im V4 duch Daishis 4 Kerzen ersetzt.
Da waren die Kerzen wieder unter dem Zweig, also "var Kerze" gesucht und die je freigegebene Zeile 'getauscht', hier dann 146 mit 147.
In rot getaucht sind diese ja schon, die 4 Zeilen konnte ich so belassen.

Nur ist im V4 der 3) ⮕ Nutzertitel jetzt nur in einfacher Schrift, nicht mehr fett und bunt, aber ist vielleicht Absicht und bis Weihnachten gut so.
Mobil sind die 4 Kerzen aber 4) ⮕ übereinander und über dem grünen Kranz, streckt also alles nach unten, hab ich also dort wiede zurückgeändert.
(Beide Verzierungen sieht man auf Handy ja auch 5) ⮕ nur wenn man es quer stellt, wohl mangels Platz.)

Die neuesten Beiträge auf meinem Naturforum...

Wolfgang findet das Top!

Antworten

#19 | Animierte Adventskerzen im Beitrag, mit Automatik - Teil 3 datum

02.12.2025 11:48

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Animierte Adventskerzen im Beitrag, mit Automatik - Teil 3

Aktualisiert 29.12.2025

Hallo DaishiHier nochmal ein großes Dankeschön für Deine fantastischen Ideen & Inspirationen!

Kerzen werden automatisch angezündetDie Ideen reißen nicht ab!
Wie wäre es, wenn die Kerzen automatisch zu den Advents-Sonntagen angezündet werden?

Mit dem folgenden Skript ist das möglich, auch wird ein Umbrechen der Kerzen verhindert, sodas alle 4 Kerzen immer in einer Reihe stehen. Auch kann der Platz im V4 gewählt werden, unter dem Avatar oder unter den User-Informationen!
Zusätzlich hat das Skript noch eine Test-Funktion für die Advents-Sonntage, um zu sehen, dass alles reibungslos funktioniert, keine fremden CSS oder JavaScript-Einträge sich störend auswirken!

Neu! Es braucht kein Datum mehr eingegeben werden
Neu! Kerzenfarbe, Kerzengröße kann jetzt leicht über "VAR" verändert werden!
Neu! Brennfaktor, Kerzenhöhe und Optionen nach dem 4. Advent!
Neu! Kerzen nach dem 4. Advent!

Installation für alle Templates & Mobil

Infos zu den Adventstagen:

Der 1. Advent ist immer der vierte Sonntag vor Weihnachten.
Damit liegt er zwischen dem 27. November und dem 3. Dezember, wohl auch im Schaltjahr!

Das folgende Skript wird für die Template (v1- v4) in die Kopf- oder Fußzeile kopiert.
Für das neue Xobor V6 & Mobil nach Eigenes Javascript.

Gut sortiert mit allen Funktionen und den wichtigsten Einstellungen oben:

In Zeile 6-10 kann die Größe und die Farbe bestimmt werden. Auch ist es möglich einen Faktor einzustellen, um viel die Kerzen nach jedem Adventsonntag herunterbrennen!
Bei Brennfaktor "0" sind die Kerzen alle gleich groß, bei Faktor "20" sind sie zum 4. Advent schon ziemlich runtergebrannt!
Über Zeile 58 gibt es eine Test-Möglichkeit für alle Advents-Sonntage und einen Test nach dem 4. Advent!
In Zeile 87 steckt der Adventszweig unter den Kerzen. Hier kann die Position und die max. Größe über "style " angepasst werden.
Von Zeile 93-106 kann das Template und der Platz der Adventskerzen bestimmt werden.
Dazu die Doppelstriche der Befehlszeile entfernen, nicht bei den darüberliegenden Kommentaren
Ist "Brennfaktor: 0" sind die Kerzen gleich hoch. In Zeile 83 bestimmt dann der Wert für "var(--KerzenGröße) * 2" (0.5-2.0) die Kerzenhöhe!

Infos zu den Adventstagen:

Der 1. Advent ist immer der vierte Sonntag vor Weihnachten.
Damit liegt er zwischen dem 27. November und dem 3. Dezember.

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
<!-- ********** Anfang Adventskerzen ********** -->
 
<style>
/* Basiswerte */
:root {
  --KerzenGröße: 40px;    
  --KerzenFarbe: #f40009; /* Rot: #f40009; // Lila: #800080; // Weiß: #f5f5f5 */
  --BrennFaktor: 5;       /* Schrumpf-Schritt 0-20 */
  --Nach4Advent: 0;       /* 0 = Kerzen ausblasen, 1 = weiter brennen */ 
  --Advent: 1;            /* 1 = Anzeigen, 0 = Alles aus */
}
 
.DivKerze {margin: var(--KerzenGröße) calc(var(--KerzenGröße)/12) 0 calc(var(--KerzenGröße)/12); display:block;position:relative;}
 
/* Kerzenkörper */
.DivKerze .Kerze {position:relative;width:var(--KerzenGröße);height:var(--Kerzenhöhe);background:linear-gradient(var(--KerzenFarbe), var(--KerzenFarbe) 50%, var(--KerzenFarbe));border-radius:calc(var(--KerzenGröße) / 3.75);box-shadow:inset 20px -30px 50px rgba(0,0,0,.4), inset -20px 0 50px rgba(0,0,0,.4);}
 
/* Oberseite der Kerze */
.Kerze:before {content:"";background:radial-gradient(var(--KerzenFarbe), #8e0001 45%, #b82209 80%);left:0;width:100%;height:calc(var(--KerzenGröße) / 3.75);border-radius:50%;border:2px solid var(--KerzenFarbe);box-sizing:border-box;position:absolute;top:0;}
 
/* Schatten oben */
.Kerze:after {content:"";background:radial-gradient(rgba(0,0,0,.6), transparent 45%);width:calc(var(--KerzenGröße) / 4.4);height:calc(var(--KerzenGröße) / 15);left:50%;top:calc(var(--KerzenGröße) / 10.7);transform:translateX(-50%);border-radius:50%;box-shadow:0 0 20px rgba(0,0,0,.5);position:absolute;}
 
/* Docht */
.Docht {position:absolute;width:calc(var(--KerzenGröße) / 20);min-width:3px;height:calc(var(--KerzenGröße) / 3.0);top:calc(var(--KerzenGröße)*-0.11);left:50%;transform:translateX(-50%);border-radius:40% 40% 5% 5%;z-index:1;background:linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);box-shadow:0 0 0 0.5px rgba(0,0,0,.35);}
 
/* Flamme */
.Flamme {position:absolute;background:linear-gradient(white 80%, transparent);width:calc(var(--KerzenGröße) / 4.0);height:calc(var(--KerzenGröße) / 1.25);left:50%;bottom:100%;transform:translateX(-50%);border-radius:50% 50% 20% 20%;animation:moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;}
.Flamme:before {position:absolute;content:"";width:100%;height:100%;border-radius:50% 50% 20% 20%;box-shadow:0 0 15px rgba(247,93,0,.4),0 -6px 4px rgba(247,128,0,.7);}
 
/* Leuchten */
.Leuchten {position:absolute;background:rgba(0,133,255,.7);width:calc(var(--KerzenGröße) / 5.77);height:calc(var(--KerzenGröße) / 2.5);top:calc(var(--KerzenGröße)*-0.32);left:50%;transform:translateX(-50%);border-radius:50% 50% 35% 35%;box-shadow:0 -40px 30px #dc8a0c,0 40px 50px #dc8a0c,inset 3px 0 2px rgba(0,133,255,.6),inset -3px 0 2px rgba(0,133,255,.6);}
.Leuchten:before {content:"";background:rgba(0,0,0,.35);width:70%;height:60%;left:50%;bottom:0;transform:translateX(-50%);border-radius:50%;position:absolute;}
 
/* Flackern */
.Flackern {position:absolute;background:#ff6000;width:calc(var(--KerzenGröße) / 1.2);height:calc(var(--KerzenGröße) / 0.5);top:-55%;left:50%;transform:translateX(-50%);border-radius:50%;filter:blur(60px);animation:blinkIt 0.1s infinite;}
 
/* Container für alle Kerzen */
.Kerzenreihe {display:flex;align-items:flex-end;justify-content:center;gap:calc(var(--KerzenGröße) / 6);}
 
/* Container für Kerzen & Tannenzweig */
.AdventBlock {display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto;}
 
/* Animationen */
@keyframes moveFlame {0%,100% {transform:translateX(-50%) rotate(-5deg);}50% {transform:translateX(-50%) rotate(5deg);}}
@keyframes enlargeFlame {0%,100% {height:calc(var(--KerzenGröße) / 1.25);}50% {height:calc(var(--KerzenGröße) / 1.07);}}
@keyframes blinkIt {50%{opacity:.6;}}
</style>
 
<script>
document.addEventListener('DOMContentLoaded', () => {
  // ---------------------------------------------
  // Test-Advent
  // 0      = Automatik
  // 1–4  = Adventssonntage manuell
  // 5     = Nach dem 4. Advent (alle Kerzen an/aus, siehe CSS)
  // ---------------------------------------------
  const Test_Advent = 0;
 
  // CSS-Variablen auslesen
  const cssVars = getComputedStyle(document.documentElement),
        brennFaktor = parseInt(cssVars.getPropertyValue('--BrennFaktor').trim()) || 0,
        nach4Advent = parseInt(cssVars.getPropertyValue('--Nach4Advent').trim()) || 0,
        adventOn   = parseInt(cssVars.getPropertyValue('--Advent').trim()) || 0;
 
  // Aus-Schalter: Wenn --Advent = 0 --> Keine Adventskerzen
  if (adventOn === 0) return;
 
  // Advent automatisch berechnen (Nur wenn Test_Advent = 0)
  const today = new Date(); today.setHours(0,0,0,0); 
  const dayMs = 24*60*60*1000;
  const adventStart = new Date(today.getFullYear(), 10, 27); adventStart.setHours(0,0,0,0); while (adventStart.getDay() !== 0) adventStart.setDate(adventStart.getDate() + 1);
  const fourthAdvent = new Date(adventStart.getTime() + 21*dayMs);
  const afterFourthAdvent = new Date(fourthAdvent.getTime() + dayMs);
 
  // aktive Adventszahl bestimmen
  let activeAdvent = 0; if (Test_Advent > 0) {  activeAdvent = Test_Advent;  } else if (today < adventStart) {  activeAdvent = 0; } else if (today >= afterFourthAdvent) {  activeAdvent = 5;  } else { activeAdvent = Math.floor((today - adventStart) / (7*dayMs)) + 1;  }
 
  // Kerzen erzeugen
  const kerzenHtml = Array.from({length:4}, (_,i) => {  let isBurning = false; if (activeAdvent >= 1 && activeAdvent <= 4) { isBurning = (i < activeAdvent); } else if (activeAdvent === 5) { isBurning = (nach4Advent === 1); }
 
  // Referenz-Advent für Schrumpflogik - "var(--KerzenGröße) * 1" --> Kerzen habe gleich Größe bei Brennfaktor: 0
  const referenceAdvent = Math.min(activeAdvent,4); const basis = `calc(var(--KerzenGröße) * 2)`; let kerzenhöhe = basis; if (referenceAdvent >= 1) {  const steps = Math.max(0, referenceAdvent - i);  const shrinkPercent = (brennFaktor/100) * steps;  const minShrink = brennFaktor > 0 ? 5 * steps : 0;  kerzenhöhe = `calc(${basis} * (1 - ${shrinkPercent}) - ${minShrink}px)`; } return `<div class="DivKerze" style="--Kerzenhöhe:${kerzenhöhe};">  <div class="Kerze">  <div class="Docht"></div>  ${isBurning ? '<div class="Flackern"></div><div class="Leuchten"></div><div class="Flamme"></div>' : ''}  </div>  </div>`; }).join('');
 
  // Neuer AdventBlock: Kerzen + Zweig zusammen
  const kerze=`<div class="AdventBlock"><div class="Kerzenreihe">${kerzenHtml}</div>
  <img src="//files.homepagemodules.de/b920350/a_52_c4a34906.png" style="max-width:300px;margin-top:-55px;"></div>`;
 
  // --------------------------------------------- 
  // Einfügen ins Forum 
  // --------------------------------------------- 
 
  // V4 + V6 unter Avatar                     
  $('.sidebar .usertitle, .message_leftcol').after(kerze);
 
  // V4 unter User-Information               
  // $('.messageinformation').after(kerze);
  
  // V6 & Mobil unter Avatar                     
  // $('.mbt .message_leftcol').after(kerze);
 
  // V1 unter der User-Information
  // $('#pagewidth table .msgUsername').closest('table').after(kerze);
 
  // V2 + V3 unter der User-Information
  // $('#pagewidth .post .infoUserBox, .messagecont div div:first-child center:first-child').append(kerze);
});
</script>
 
<!-- ********** Ende Adventskerzen ********** -->
 

Ultra kompakt mit allen Funktionen und den wichtigsten Einstellungen oben:

Wer die Ladezeiten in seinem Forum verbessern will, kann die "Ultra kompakte Version" installieren.
Der einzige Nachteil zeigt sich bei Änderungen, hier muss man suchen oder mit Online-Tools das Skript wieder sortieren!

In Zeile 5-9 kann die Größe und die Farbe bestimmt werden. Auch ist es möglich einen Faktor einzustellen, um viel die Kerzen nach jedem Adventsonntag herunterbrennen!
Bei Brenn-Faktor "0" sind die Kerzen alle gleich groß, bei Faktor "20" sind sie zum 4. Advent schon ziemlich runtergebrannt!
Über Zeile 18 gibt es eine Test-Möglichkeit für alle Advents-Sonntage und einen Test nach dem 4. Advent!
In Zeile 22 steckt der Adventszweig unter den Kerzen. Hier kann die Position und die max. Größe über "style " angepasst werden.
Von Zeile 24-37 kann das Template und der Platz der Adventskerzen bestimmt werden.
Dazu die Doppelstriche der Befehlszeile entfernen, nicht bei den darüberliegenden Kommentaren

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
 
<!-- ********** Anfang Adventskerzen ********** -->
 
<style>
:root {
  --KerzenGröße: 40px;    /* Breite der Kerze, Basisgröße */
  --KerzenFarbe: #f40009; /* Rot: #f40009; // Lila: #800080; // Weiß: #f5f5f5 */
  --BrennFaktor: 5;       /* Schrumpf-Schritt 0-20 // 0 = Alle Kerzen gleich groß // 20 = Kerzeen fast runtergegebrannt*/
  --Nach4Advent: 1;       /* 0 = Kerzen ausblasen, 1 = Kerzen brenne weiter */ 
  --Advent: 1;            /* 1 = Advendskerzen anzeigen, 0 = Alles aus! */
}
 
.DivKerze{margin:var(--KerzenGröße) calc(var(--KerzenGröße) / 12);display:block;position:relative;}.DivKerze .Kerze{position:relative;width:var(--KerzenGröße);height:var(--Kerzenhöhe);background:linear-gradient(var(--KerzenFarbe), var(--KerzenFarbe) 50%, var(--KerzenFarbe));border-radius:calc(var(--KerzenGröße) / 3.75);box-shadow:inset 20px -30px 50px rgba(0, 0, 0, .4),inset -20px 0 50px rgba(0, 0, 0, .4);}.Kerze:before{content:"";background:radial-gradient(var(--KerzenFarbe), #8e0001 45%, #b82209 80%);left:0;width:100%;height:calc(var(--KerzenGröße) / 3.75);border-radius:50%;border:2px solid var(--KerzenFarbe);box-sizing:border-box;position:absolute;top:0;}.Kerze:after{content:"";background:radial-gradient(rgba(0,0,0,.6), transparent 45%);width:calc(var(--KerzenGröße) / 4.4);height:calc(var(--KerzenGröße) / 15);left:50%;top:calc(var(--KerzenGröße) / 10.7);transform:translateX(-50%);border-radius:50%;box-shadow:0 0 20px rgba(0, 0, 0, .5);position:absolute;}.Docht{position:absolute;width:calc(var(--KerzenGröße) / 20);min-width:3px;height:calc(var(--KerzenGröße) / 3.0);top:calc(var(--KerzenGröße)*-0.11);left:50%;transform:translateX(-50%);border-radius:40% 40% 5% 5%;z-index:1;background:linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);box-shadow:0 0 0 0.5px rgba(0, 0, 0, .35);}.Flamme{position:absolute;background:linear-gradient(white 80%, transparent);width:calc(var(--KerzenGröße) / 4.0);height:calc(var(--KerzenGröße) / 1.25);left:50%;bottom:100%;transform:translateX(-50%);border-radius:50% 50% 20% 20%;animation:moveFlame 6s linear infinite,enlargeFlame 5s linear infinite;}.Flamme:before{position:absolute;content:"";width:100%;height:100%;border-radius:50% 50% 20% 20%;box-shadow:0 0 15px rgba(247, 93, 0, .4),0 -6px 4px rgba(247, 128, 0, .7);}.Leuchten{position:absolute;background:rgba(0, 133, 255, .7);width:calc(var(--KerzenGröße) / 5.77);height:calc(var(--KerzenGröße) / 2.5);top:calc(var(--KerzenGröße)*-0.32);left:50%;transform:translateX(-50%);border-radius:50% 50% 35% 35%;box-shadow:0 -40px 30px #dc8a0c,0 40px 50px #dc8a0c,inset 3px 0 2px rgba(0, 133, 255, .6),inset -3px 0 2px rgba(0, 133, 255, .6);}.Leuchten:before{content:"";background:rgba(0, 0, 0, .35);width:70%;height:60%;left:50%;bottom:0;transform:translateX(-50%);border-radius:50%;position:absolute;}.Flackern{position:absolute;background:#ff6000;width:calc(var(--KerzenGröße) / 1.2);height:calc(var(--KerzenGröße) / 0.5);top:-55%;left:50%;transform:translateX(-50%);border-radius:50%;filter:blur(60px);animation:blinkIt 0.1s infinite;}.Kerzenreihe{display:flex;align-items:flex-end;justify-content:center;gap:calc(var(--KerzenGröße) / 6);}.AdventBlock{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto;}@keyframes moveFlame{0,100%{transform:translateX(-50%) rotate(-5deg);}50%{transform:translateX(-50%) rotate(5deg);}}@keyframes enlargeFlame{0,100%{height:calc(var(--KerzenGröße) / 1.25);}50%{height:calc(var(--KerzenGröße) / 1.07);}}@keyframes blinkIt{50%{opacity:.6;}}
</style>
 
<script>
document.addEventListener('DOMContentLoaded', () => {
  // Test-Button: 0 = Automatik, 1–4 = Test, 5 = Nach 4. Advent
  const Test_Advent = 0;
 
  // 1. Advent automatisch berechnen (Sonntag zwischen 27.11. und 3.12.) // Kerzen erzeugen // CSS-Variablen auslesen // Schrumpflogik // Aus-Schalter //
  const cssVars=getComputedStyle(document.documentElement),brennFaktor=parseInt(cssVars.getPropertyValue('--BrennFaktor').trim())||0,nach4Advent=parseInt(cssVars.getPropertyValue('--Nach4Advent').trim())||0,adventOn=parseInt(cssVars.getPropertyValue('--Advent').trim())||0;if(adventOn===0)return;const today=new Date();today.setHours(0,0,0,0);const dayMs=24*60*60*1000;const adventStart=new Date(today.getFullYear(),10,27);adventStart.setHours(0,0,0,0);while(adventStart.getDay()!==0)adventStart.setDate(adventStart.getDate()+1);const fourthAdvent=new Date(adventStart.getTime()+21*dayMs);const afterFourthAdvent=new Date(fourthAdvent.getTime()+dayMs);let activeAdvent=0;if(Test_Advent>0){activeAdvent=Test_Advent}else if(today<adventStart){activeAdvent=0}else if(today>=afterFourthAdvent){activeAdvent=5}else{activeAdvent=Math.floor((today-adventStart)/(7*dayMs))+1}const kerzenHtml=Array.from({length:4},(_,i)=>{let isBurning=false;if(activeAdvent>=1&&activeAdvent<=4){isBurning=(i<activeAdvent)}else if(activeAdvent===5){isBurning=(nach4Advent===1)}const referenceAdvent=Math.min(activeAdvent,4);const basis=`calc(var(--KerzenGröße) * 2)`;let kerzenhöhe=basis;if(referenceAdvent>=1){const steps=Math.max(0,referenceAdvent-i);const shrinkPercent=(brennFaktor/100)*steps;const minShrink=brennFaktor>0?5*steps:0;kerzenhöhe=`calc(${basis} * (1 - ${shrinkPercent}) - ${minShrink}px)`}return`<div class="DivKerze" style="--Kerzenhöhe:${kerzenhöhe};">  <div class="Kerze">  <div class="Docht"></div>  ${isBurning?'<div class="Flackern"></div><div class="Leuchten"></div><div class="Flamme"></div>':''}  </div>  </div>`}).join('');const kerze=`<div class="AdventBlock"><div class="Kerzenreihe">${kerzenHtml}</div> ;
  <img src="//files.homepagemodules.de/b920350/a_52_c4a34906.png" style="max-width:300px;margin-top:-55px;"></div>`;
 
  // V4 + V6 unter Avatar                     
  $('.sidebar .usertitle, .message_leftcol').after(kerze);
 
  // V4 unter User-Information               
  // $('.messageinformation').after(kerze);
  
  // V6 & Mobil unter Avatar                     
  // $('.mbt .message_leftcol').after(kerze);
 
  // V1 unter der User-Information
  // $('#pagewidth table .msgUsername').closest('table').after(kerze);
 
  // V2 + V3 unter der User-Information
  // $('#pagewidth .post .infoUserBox, .messagecont div div:first-child center:first-child').append(kerze);
});
</script>
 
<!-- ********** Ende Adventskerzen ********** -->
 

KompressionsergebnisseOriginalgröße: 7,04 kBytes
Komprimierte Größe: 6,20 kBytes
Einsparung: 840 Bytes (11,9%)

HTML minimieren!"HTML-Minifier - HTML online minimieren "

HTML maximieren, sortieren!" Best HTML Viewer, HTML Beautifier, HTML Formatter and to Test / Preview HTML Output"

Schließen

Bis dann und viel Spaß damit
Wolfgang

Dankeschön, Kipper-Spedition und Daishi finden das Top!

Antworten

Moderations-Kommentar:

Skript nochmals überarbeitet, mehrere Fehler behoben!
Viele Optionen über "VAR" möglich.
Test-Area eingefügt.

#20 | RE: Animierte Adventskerzen im Beitrag, mit Automatik - Teil 3 datum

02.12.2025 12:48 (zuletzt bearbeitet: 02.12.2025 12:49)

Wow, oberklasse, funzt astrein, auch beim Testen der 1-4 Kerzen.

Alles sonst schon so voreingestellt wie ichs am besten brauche, musste nix umstellen.

Aufm Handy hochkant sind die Kerzen jetzt auch unterm Avatar, der Tannenzweig weiterhin nur sichtbar wenn quer. Sinnig, sonst nähme es zu viel Platz weg.
Meine 4) + 5) sind dadurch gelöst, plus die edle Automation, mit der Testmöglichkeit, prima!

Es bleibt 1) der Nutzertitel (mobil) abgeschnitten, 2) der Nutzertitel (V4) in einfacher Schrift und 3) der Tannenzweig (V4 + Mobil) links ausgerichtet, nicht zentriert wie hier.
Aber alles absolut verzichtbar!

Dankeschön!!
von Jan

Die neuesten Beiträge auf meinem Naturforum...

Wolfgang findet das Top!

Antworten

⏰Onlinezähler » « Brauche mal einen guten Rat - Information für Gäste!

Seite 2 von 6 « Seite 1 2 3 4 5 6 Seite »

Ähnliche Themen

Antworten

Letzter Beitrag

Ideen reißen nicht ab - Adventskerzen in unterschiedlicher Höhe
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi

18.12.2025 15:51
von

Wolfgang • Zugriffe: 313

Linklisten und Bilder im Seitenmenü
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 0 14.02.2025 09:49
Wolfgang • Zugriffe: 322

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages »

Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! » Weihnachtszweig & Weihnachtskerzen - Kerzen zu den Adventssonntagen

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: 45 €

41%