Weihnachtszweig & Weihnachtskerzen

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

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 & 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. 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 | Weihnachtszweig & Weihnachtskerzen datum

27.11.2023 11:56 (zuletzt bearbeitet: 12.12.2024 06:09)

Daishi

Informationen anzeigen

Beitr�ge:	389
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	327

Hallo, habe auch dafür die Inspiration und Idee von Wolfgangs Forum hier geholt.

Da ich es hier im Forum nirgends gesehen habe, habe ich mir gedacht, dass man in den Beiträgen auch eine weihnachtliche Stimmung verbreiten und schmücken kann. @Wolfgang, ich danke dir sehr für die tollen Ideen und Inspirationen hier im Forum Hilfe, Tricks & Tipps.

Da ich Probleme hatte, dass das Forum die Symbole so nicht annimmt, musste ich sie HTML codieren.

Der Stern wird so nicht angenommen:
⭐

Nur HTML codiert, als Unicode:

1
 
&#11088;

Meine Idee und Inspiration war ein Weihnachtszweig für die Iconbar zu erstellen und es ist mir so weit gelungen alles in reiner CSS zu schreiben und das es ein wenig wie echte Tannenzweige ausseht, geschmückt sind mit 3 Kugeln.

Ich dachte mir, das wäre eine wundervolle Idee die Beiträge weihnachtlicher zu machen.

Ich hoffe, ich habe es soweit richtig gemacht mit den Classes.

Für die Iconbar geht man so vor:

Hier der Code, den ich einfach bei Foren-Code eingegeben habe.

Ersetze:

1
 
[zweig]

Mit:

1
 
<center><div class="kugeln">   <div class="zweig zweig-1">     <div class="nadeln-oben"></div>     <div class="nadeln-unten"></div>     <div class="nadeln-ende"></div>   </div>   <div class="zweig zweig-2">     <div class="nadeln-oben"></div>     <div class="nadeln-unten"></div>     <div class="nadeln-ende"></div>   </div>   <div class="kugel kugel-1">&#11088;     <div class="aufhaenger"></div>   </div>   <div class="kugel kugel-2">&#10052;&#65039;     <div class="aufhaenger"></div>   </div>   <div class="kugel kugel-3">&#128156;     <div class="aufhaenger"></div></center>   </div> </div>

CSS Code:

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
 
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 100%, 
    #6930c3 0%,
    #56cfe1 40%,
    #72efdd 70%,
    #80ffdb 100%
  );
  
  min-height: 100vh;
  margin: 0;
}
 
.kugeln {
  --kugeln-zweig: #9d6b53;
  --kugeln-zweig-light: #cd9777;
  --kugel-1: #f83b17;
  --kugel-1-light: #fb8f7a;
  --kugel-2: #02c39a;
  --kugel-2-light: #50fdd8;
  --kugel-3: #c77dff;
  --kugel-3-light: #e0aaff;
 
  position: relative;
  width: 40rem;
  height: 24rem;
}
 
.kugeln .zweig {
  position: absolute;
  width: 20rem;
  height: 0.3rem;
  top: 4rem;
  border-radius: 0 50% 50% 0;
  background-color: var(--kugeln-zweig);
}
 
.kugeln .zweig.zweig-1 {
  transform: rotate(-10deg);
  top: 7rem;
}
 
.zweig.zweig-2 {
  transform: rotate(-6deg);
  top: 11rem;
  left: 12rem;
}
 
.kugeln .zweig::before {
  content: '';
  display: block;
  border-radius: 50%;
  position: absolute;
  top: -0.15rem;
  left: -0.1rem;
  width: 0.8rem;
  height: 0.6rem;
  background-color: var(--kugeln-zweig);
}
 
.kugeln .nadeln-oben {
  position: absolute;
  top: -4rem;
  left: 4rem;  
  width: 17rem;
  height: 4rem;
  background: repeating-linear-gradient(to right, #006600, #006600 0.2rem, transparent 0.2rem, transparent 0.7rem);
  transform: skewX(-45deg);
}
.kugeln .nadeln-unten {
  position: absolute;
  top: 0.3rem;
  left: 4rem;  
  width: 17rem;
  height: 4rem;
  background: repeating-linear-gradient(to right, #006600, #006600 0.2rem, transparent 0.2rem, transparent 0.7rem);
  transform: skewX(45deg);
}
 
.kugeln .nadeln-ende {
  position: absolute;
  top: -3rem;
  left: 20.6rem;
  width: 6.3rem;
  height: 6.3rem;
  overflow: hidden;
  transform: rotate(135deg);
  border-radius: 30% 10% 0 10%;
}
 
.kugeln .nadeln-ende::after {
  position: absolute;
  top: -0.8rem;
  left: -0.8rem;
  content: '';
  display: block;
  width: 14rem;
  height: 14rem;
  background: repeating-conic-gradient(from 0deg, #006600 0deg 2deg, transparent 2deg 9deg);
}
 
.kugeln .kugel {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  font-size: 4rem;
}
 
.kugeln .kugel::before {
  position: absolute;
  content: '';
  display: block;
  width: 3rem;
  height: 2rem;
  top: 1.75rem;
  left: 0.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: rotate(-60deg);
}
 

.kugeln .kugel::after {
  position: absolute;
  content: '';
  display: block;
  width: 6rem;
  height: 6rem;
  top: 0.4rem;
  left: 0.5rem;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 100%);
  transform: rotate(-20deg);
}
 
.kugel-1 {
  top: 12.7rem;
  left: 5rem;
  background: radial-gradient(circle at 75% 75%, var(--kugel-1), 40%, var(--kugel-1-light) 80%);
}
 
.kugel-2 {
  top: 16.8rem;
  left: 15rem;
  background: radial-gradient(circle at 75% 75%, var(--kugel-2), 40%, var(--kugel-2-light) 80%);
}
.kugel-3 {
  top: 15.8rem;
  left: 25rem;
  background: radial-gradient(circle at 75% 75%, var(--kugel-3), 40%, var(--kugel-3-light) 80%);
}
 
.kugeln .aufhaenger {
  position: absolute;
  width: 2rem;
  height: 1rem;
  background-image: linear-gradient( to right, white, lightgrey, white );
  border-radius: 0.25rem 0.25rem 50% 50% / 0.25rem 0.25rem 10% 10%;
  top: -0.75rem;
}
 
.kugeln .aufhaenger::before {
  position: absolute;
  content: '';
  display: block;
  border-left: 0.1rem solid black;
  height: 3rem;
  top: -3rem;
  left: 1rem;
}
 
.kugeln .aufhaenger::after {
position: absolute;
  content: '';
  display: block;
  border-left: 0.1rem solid black;
  border-top: 0.1rem solid black;
  border-right: 0.1rem solid black;
  width: 0.6rem;
  height: 2rem;
  top: -5rem;
  left: 1rem;
  border-radius: 50% 50% 50% 0
}
 
 

Schließen

Ich hoffe, ich habe es so weit richtig gemacht mit der Class-Erweiterung. Es war wieder nur eine Idee und Inspiration.

@Wolfgang Ich danke Dir für die schönen Ideen und Inspirationen, die ich durch Deine weihnachtliche Stimmung im Forum bekommen habe.

Nette Grüße

Daishi

Daishi

Wolfgang und Gabriella finden das Top!

Antworten

#2 | RE: Weihnachtszweig datum

27.11.2023 16:53 (zuletzt bearbeitet: 27.11.2023 16:56)

Wolfgang

Administrator

Informationen anzeigen

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

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1339

Hallo Daishi

Ich bin mal wieder begeistert, was man allein mit CSS-Einträgen machen kann!
Einfach klasse und mal wieder besten Dank!

Was mir an der CSS aufgefallen ist:

In der CSS ist so weit alles gut, die Classes passen, Lob, Lob!
Der Body-Eintrag.......
Den kann man stehen lassen, wenn man eine eigene Seite hat!
Im Forum wirkt er sich wieder auf die ganze Seite aus!

Dickere Nadeln

Weihnachtszweig mit CSS erstellt!

Habe den Foren-Code so gelassen und etwas an der CSS geschraubt und geschaut, wo was passiert!
Die Nadeln sind jetzt dicker geworden, konnte sie unter "background + rem" ändern (Zeile 55+64)!
Den Body-Eintrag habe ich weggelassen, hat soweit keinen Einfluss auf den Zweig!

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
 
 
.kugeln {
  --kugeln-zweig: #9d6b53;
  --kugeln-zweig-light: #cd9777;
  --kugel-1: #f83b17;
  --kugel-1-light: #fb8f7a;
  --kugel-2: #02c39a;
  --kugel-2-light: #50fdd8;
  --kugel-3: #c77dff;
  --kugel-3-light: #e0aaff;
 
  position: relative;
  width: 40rem;
  height: 24rem;
}
 
.kugeln .zweig {
  position: absolute;
  width: 20rem;
  height: 0.3rem;
  top: 4rem;
  border-radius: 0 50% 50% 0;
  background-color: var(--kugeln-zweig);
}
 
.kugeln .zweig.zweig-1 {
  transform: rotate(-10deg);
  top: 7rem;
}
 
.zweig.zweig-2 {
  transform: rotate(-6deg);
  top: 11rem;
  left: 12rem;
}
 
.kugeln .zweig::before {
  content: '';
  display: block;
  border-radius: 50%;
  position: absolute;
  top: -0.15rem;
  left: -0.1rem;
  width: 0.8rem;
  height: 0.6rem;
  background-color: var(--kugeln-zweig);
}
 
.kugeln .nadeln-oben {
  position: absolute;
  top: -4rem;
  left: 4rem;  
  width: 17rem;
  height: 4rem;
  background: repeating-linear-gradient(to right, #006600, #006600 0.4rem, transparent 0.4rem, transparent 1.1rem);
  transform: skewX(-45deg);
}
.kugeln .nadeln-unten {
  position: absolute;
  top: 0.3rem;
  left: 4rem;  
  width: 17rem;
  height: 4rem;
  background: repeating-linear-gradient(to right, #006600, #006600 0.4rem, transparent 0.4rem, transparent 1.1rem);
  transform: skewX(45deg);
}
 
.kugeln .nadeln-ende {
  position: absolute;
  top: -3rem;
  left: 20.6rem;
  width: 6.3rem;
  height: 6.3rem;
  overflow: hidden;
  transform: rotate(135deg);
  border-radius: 30% 10% 0 10%;
}
 
.kugeln .nadeln-ende::after {
  position: absolute;
  top: -0.8rem;
  left: -0.8rem;
  content: '';
  display: block;
  width: 14rem;
  height: 14rem;
  background: repeating-conic-gradient(from 0deg, #006600 0deg 2deg, transparent 2deg 9deg);
}
 
.kugeln .kugel {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  font-size: 4rem;
}
 
.kugeln .kugel::before {
  position: absolute;
  content: '';
  display: block;
  width: 3rem;
  height: 2rem;
  top: 1.75rem;
  left: 0.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: rotate(-60deg);
}
 
 
.kugeln .kugel::after {
  position: absolute;
  content: '';
  display: block;
  width: 6rem;
  height: 6rem;
  top: 0.4rem;
  left: 0.5rem;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 100%);
  transform: rotate(-20deg);
}
 
.kugel-1 {
  top: 12.7rem;
  left: 5rem;
  background: radial-gradient(circle at 75% 75%, var(--kugel-1), 40%, var(--kugel-1-light) 80%);
}
 
.kugel-2 {
  top: 16.8rem;
  left: 15rem;
  background: radial-gradient(circle at 75% 75%, var(--kugel-2), 40%, var(--kugel-2-light) 80%);
}
.kugel-3 {
  top: 15.8rem;
  left: 25rem;
  background: radial-gradient(circle at 75% 75%, var(--kugel-3), 40%, var(--kugel-3-light) 80%);
}
 
.kugeln .aufhaenger {
  position: absolute;
  width: 2rem;
  height: 1rem;
  background-image: linear-gradient( to right, white, lightgrey, white );
  border-radius: 0.25rem 0.25rem 50% 50% / 0.25rem 0.25rem 10% 10%;
  top: -0.75rem;
}
 
.kugeln .aufhaenger::before {
  position: absolute;
  content: '';
  display: block;
  border-left: 0.2rem solid black;
  height: 3rem;
  top: -3rem;
  left: 1rem;
}
 
.kugeln .aufhaenger::after {
position: absolute;
  content: '';
  display: block;
  border-left: 0.2rem solid black;
  border-top: 0.2rem solid black;
  border-right: 0.2rem solid black;
  width: 0.6rem;
  height: 2rem;
  top: -5rem;
  left: 1rem;
  border-radius: 50% 50% 50% 0
}
 

Schlie�en

Bis dann und nochmal besten Dank für die interessante CSS

Wolfgang

Antworten

#3 | Weihnachtszweig unter dem Avatar im Beitrag - Teil 1(2) datum

03.12.2024 14:42 (zuletzt bearbeitet: 15.12.2024 15:34)

Wolfgang

Administrator

Informationen anzeigen

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

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1339

Weihnachtszweig unter dem Avatar im Beitrag - Teil 1

Möchte man sein Forum weihnachtlich gestalten, lassen sich Bilder, Grafiken, Animationen an beliebigen Stellen im Forum platzieren!
Auch Hintergrundbilder sind machbar!
Eine Möglichkeit wäre der Platz unter dem Avatar im Beitrag.
Im folgenden Skript ist es ein kleiner Tannenzweig, es kann aber auch eine andere beliebige Grafik sein!

Installation für alle Templates & Mobil

Das folgende Skript wird für die Template (v1-4) in die Kopf- oder Fußzeile kopiert.
Für das neue Xobor V6 & Mobil nach Eigenes Javascript.
In Zeile 4 wird über die Class oder auch ID der Platz bestimmt!
In Zeile 5 ist die Grafik zu finden. Hier kann die Größe und der Abstand zum Rand eingestellt werden!

1
2
3
4
5
6
7
8
 
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Tannenzweig unter Avatar im Beitrag
    $('td.sidebar, .message_leftcol, .messagecont div div:first-child center:first-child, .infoUserBox, #pagewidth table a > table tr:nth-child(3) td:first-child').append(`
        <img src="//files.homepagemodules.de/b104774/a_755_8d87e469.png" style="max-width:140px; padding:15px;"> 
    `);
  });
</script>
 

Bis dann und ein schöne Vorweihnachtszeit
Wolfgang

Antworten

#4 | Weihnachtszweig neben dem Avatar im Beitrag datum

04.12.2024 15:26 (zuletzt bearbeitet: 04.12.2024 15:36)

Lieber Wolfgang,

eine sehr hübsche Idee und sehr leicht und schnell einzubauen!

Ich hätte aber dazu eine Frage:
Ist es möglich, die Grafik neben dem Avatar zu setzen und wenn ja, wie muß dann die 4. oder auch 5. Zeile Deines Skripts lauten?

In meinem Forum sind die Avatare rechteckig oder quadratisch und linkbündig angeordnet - maximal (100x100 Pixel, 20KBytes) - und sie drehen sich dank Deiner!

Danke schon jetzt für Deine Antwort.

Standard Template (V1)

Wolfgang findet das Top!

Antworten

#5 | Weihnachtszweig neben dem Avatar im Beitrag - Teil 1.1 datum

04.12.2024 22:23 (zuletzt bearbeitet: 15.12.2024 15:36)

Wolfgang

Administrator

Informationen anzeigen

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

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1339

Weihnachtszweig neben dem Avatar im Beitrag - Teil 1.1
Aktualisiert 15.12.2024

Hallo nobodySchön von Dir zu hören!
Natürlich sieht es nicht in jedem Template gut aus, wenn der Tannenzweig neben dem Avatar (Beitrag) platziert wird!
Gut passt es in Deinem Standard Template (v1), finde ich, aber auch im V2.

Installation für die Templates (v1+2)

Standad Template (v1)

Das folgende Skript wird für die Template (v1+2) in die Kopf- oder Fußzeile kopiert.
In Zeile 4 wird über die Class der Platz bestimmt!
In Zeile 5 ist die Grafik zu finden. Hier kann die Größe und der Abstand zum Rand eingestellt werden!

1
2
3
4
5
6
7
8
 
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Tannenzweig unter Avatar im Beitrag
    $('.avatar_div img, #pagewidth table .msgAvatar').after(`
        <img src="//files.homepagemodules.de/b104774/a_755_8d87e469.png" style="max-width:100px; padding:0px;"> 
    `);
  });
</script>
 

Bis dann und lass es Dir gut gehen
Wolfgang

Antworten

Moderations-Kommentar:

Grafik ausgetauscht, ohne weißen Hintergrund!

#6 | RE: Weihnachtszweig neben dem Avatar im Beitrag datum

04.12.2024 23:52 (zuletzt bearbeitet: 05.12.2024 00:06)

Lieber Wolfgang,

ich habe Dein Skript gleich in unser aktives Forum eingebaut und es sieht wirklich toll aus! Du bist und bleibst einfach der Beste!

Noch einmal vielen Dank für die schnelle Hilfe und auch Danke für die andere Problemlösung!

Nachtrag:
Findest Du nicht, daß ich viel schlanker wirke in meinem V1-Testforum als hier bei Dir?

Übrigens kam schon eine positive Reaktion auf das Skript:

Zitat von einem Mitglied meines Forums
Und wer legt denn diese wunderbaren Zweiglein mit Weihnachtskugeln zu unseren Namen?

Standard Template (V1)

Wolfgang und Hans58 finden das Top!

Antworten

#7 | Fehlersuche: Weihnachtszweig neben dem Avatar im Beitrag - Teil 1.1 datum

05.12.2024 01:19 (zuletzt bearbeitet: 10.12.2024 09:37)

Fehlersuche: Weihnachtszweig neben dem Avatar im Beitrag - Teil 1.1

@nobody @CrazySpacy

Hallo nobodyDu bist echt ein Fehlerfinder!
Wenn Du mal vorbeischaust, fallen Dir gleich Unregelmäßigkeiten auf!

Zitat von nobody
...
Noch einmal vielen Dank für die schnelle Hilfe und auch Danke für die andere Problemlösung!
...

Mmh, das Problem lag auf meiner Seite!
Im "Profil bearbeiten" und nur im V4, konnte man nicht nur in der Signatur, sondern auch in den anderen Eingabefeldern nichts mehr eintragen!
Habe die Ursache gefunden!
Der Fehler lag an einem unpassenden CSS-Eintrag vom Beitrag "Sternzeichen ins Profil einbauen!"!
War so noch nicht aufgefallen (März 24)!

Zitat von nobody im Beitrag #6
...
Findest Du nicht, daß ich viel schlanker wirke in meinem V1-Testforum als hier bei Dir?
...

Habe auch hier die Ursache gefunden!
Damit die Avatare verzerrungsfrei angezeigt werden, kann man ein CSS-Eintrag setzen, "object-fit: contain" oder "object-fit: cover".
Habe jetzt "object-fit: contain" eingetragen, längliche Bilder werden hier besser wiedergegeben!

Bis dann und nochmal besten Dank fürs Feedback!
Wolfgang

Antworten

#8 | Animierte Weihnachtskerzen unter dem Avatar (im Beitrag) - Teil 2 datum

11.12.2024 18:31 (zuletzt bearbeitet: 14.12.2024 12:50)

Wolfgang

Administrator

Informationen anzeigen

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

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1339

Animierte Weihnachtskerzen unter dem Avatar (im Beitrag) - Teil 2
Aktualisiert 14.12.2024

Wie sieht es mit einer Weihnachtskerze aus, nicht als Bild, sondern als Animation?
Auch hier bietet sich der Platz unter dem Avatar an und evtl. fürs Standard-Template rechts daneben!
Viele Optionen sind hier möglich und tragen zu einem schönen, weihnachtlichen Aussehen bei!

Installation für alle Templates & Mobil

Das folgende Skript wird für die Template (v3, v4 + v6) & Mobil in die Kopf- oder Fußzeile kopiert.
Für das neue Xobor V6 & Mobil nach Eigenes Javascript.
In Zeile 3 kann die Größe der Kerze bestimmt werden!
In Zeile 142 wird über die Classes oder auch ID's der Platz bestimmt!
Neu! Möchte man die Kerzen direkt unter dem Avatar platzieren, muss die Zeile 143 freigegeben werden und Zeile 142 gelöscht oder auskommentiert werden!
Neu! Sollen die Kerzen in ein weihnachtliches Rot getaucht werden, müssen die Zeilen 23, 32, 36 und 37 freigegeben werden!
Neu! Benötigt man nicht nur eine Kerze, müssen die Zeilen 156-163 freigegeben werden!
Bei weiteren Kerzen (3. + 4. Advent), einfach die Zeilen 156-163 kopieren und untereinander schreiben!

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
 
<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> -->
 
      </center>
    `);
  });
</script>
 

Schließen

Das folgende Skript wird für die Template (v1 + v2) in die Kopf- oder Fußzeile kopiert.
In Zeile 3 kann die Größe der Kerze bestimmt werden!
In Zeile 146 wird der Abstand zur linken Seite eingestellt!
In Zeile 143 wird über die Class oder auch ID der Platz bestimmt!
Neu! Möchte man die Kerzen in ein weihnachtliches Rot tauchen, müssen die Zeilen 23, 32, 36 und 37 freigegeben werden!
Neu! Möchte man nicht nur eine Kerze platzieren, müssen die Zeilen 155-162 freigegeben werden!
Bei weiteren Kerzen (3. + 4. Advent), einfach die Zeilen 155-162 kopieren und untereinander schreiben!

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
 
<style>
.DivKerze {
  --kerzengröße: 30px;
 
  width: var(--kerzengröße);
  height: calc(var(--kerzengröße) * 2.5);
  margin: var(--kerzengröße) auto 0 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 = $('.avatar_div img, #pagewidth table .msgAvatar'); 
    kerze.after(`
 
   <div class="DivKerze" style="margin-left: 30px;">
        <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> -->
 
    `);
  });
</script>
 

Schließen

Hier testen:

Weihnachtskerzen: Weihnachtskerzen unter dem Avatar im Beitrag!

Bis dann und gutes Gelingen beim Ausprobieren!
Wolfgang

Antworten

Moderations-Kommentar:

Beitrag überarbeitet, Installation für die verschiedenen Templates aufgeteilt!
Änderung der Kerzenfarbe und der Platzierung möglich!

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

13.12.2024 22:16 (zuletzt bearbeitet: 14.12.2024 12:30)

Hallo Wolfgang,

wollte gerade dieses schöne Gimmik bei mir probieren. Aber etwas scheine ich falsch zu machen.

1. Bei mir ist nur 1 Kerze, sollten es nicht zwei sein und am Sonntag 3?
2. Die Kerze ist linksbündig und nicht zentriert.

Bei mir werden unter dem Avatar die Profilsachen angezeigt und die Kerze darunter, wie bekomme ich die unter den Avatar? Und mit dem Hintergrund des Profils und wie bekomme ich sie in dem schönen rot?

Wäre für eine kleine Hilfestellung dankbar, da ich das dann auch im Musengarten so machen können wollte 😁

LG

Gabi

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Anne findet das Top!

Antworten

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

14.12.2024 09:31 (zuletzt bearbeitet: 14.12.2024 12:30)

Guten Morgen Wolfgang,

vielen lieben Dank, Du hast meine Bitte schneller erfüllt, als ich gucken konnte

Habe es im Musengarten jetzt auch so gemacht, wie Du im GDP

Ich nehme an, das von mir eingestellte Script im GDP kann ich rausnehmen, denn das funktionert ja nicht?
Wäre dann aber trotzdem froh, wenn Du mir sagst woran es gehackt hat, bitte 🙋

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Antworten

Iconbar: "Bilder der Galerie" oder "Inhalte integrieren" löschen � � Newsletter

Seite 1 von 2 � Seite 1 2 Seite �

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 €

58%

Weihnachtszweig unter dem Avatar im Beitrag - Teil 1

Weihnachtszweig neben dem Avatar im Beitrag - Teil 1.1Aktualisiert 15.12.2024

Fehlersuche: Weihnachtszweig neben dem Avatar im Beitrag - Teil 1.1

Animierte Weihnachtskerzen unter dem Avatar (im Beitrag) - Teil 2Aktualisiert 14.12.2024

Weihnachtszweig neben dem Avatar im Beitrag - Teil 1.1
Aktualisiert 15.12.2024

Animierte Weihnachtskerzen unter dem Avatar (im Beitrag) - Teil 2
Aktualisiert 14.12.2024