Forum - RE: Fehlersuche: Weihnachts- und Neujahrs Countdown etwas anders!

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! � Weihnachts- und Neujahrs-Countdown! Mit vielen Optionen & Automatik!

Seite 3 von 4 � Seite 1 2 3 4 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.

#21 | RE: Fehlersuche: Weihnachts- und Neujahrs Countdown etwas anders! datum

20.12.2023 11:53

Hallo zusammen,

also ich hab mir das Plugin in meinem Testforum angelegt. Auch bei mir wird es Gästen nicht angezeigt und lässt sich das auf dem Portal auch anzeigen?

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Antworten

#22 | RE: Weihnachts- und Neujahrs Countdown etwas anders! datum

20.12.2023 12:48 (zuletzt bearbeitet: 20.12.2023 14:22)

Daishi

Informationen anzeigen

Beitr�ge:	450
Registriert seit:	08.01.2022

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

Hallo ihr lieben ich habe mal noch etwas herum getestet und probiert man kann es auch jetzt in den Beiträgen einfügen.

Mit Wolfgangs Variante habe ich es noch nicht probiert, werde ich aber heute noch testen, in den nächsten Stunden und auch da werde ich dann Rückmeldung geben, es ist immer schön, wenn wir nette User und Mitglieder alles testen, das freut Wolfgang sehr und erleichtert die Fehlersuche.

Also, ich habe das Script ohne HTML Code als Plugin angelegt "Untere Leiste - header".

Als einfacher Foren-Code habe ich den HTML-Code so eingegeben:

Ersetze:

1
 
[Neujahr]

Mit:

1
 
<h2>Neujahr '24</h2> <time class="zeitkontrolle" date-time="2023-12-31 00:00:00" style="--accent: green"></time>

Man kann mit HTML immer erweitern und die Farbe auch ändern, (style="--accent: green ) green in andere Farbe ändern oder den Farbcode verwenden, den man gewohnt ist, z.B. (#000000).

Ich dachte mir, dass die Idee gut ankommt und manche Mitglieder oder Leser sich erfreuen würden, dass man es auch in Beiträgen einfügen kann. Bei mir als Test habe ich es in Beiträgen eingefügt und verschieden positioniert.

Hier zur Demo im Forum:
Neujahrs-Countdown-etwas-anders-auch-in-beitraegen!

Ich hoffe, die Idee kommt gut an.

Mit freundlichen Grüßen

Daishi

P.S. Wolfgang, ich teste gleich mal deine Version. Und gebe hier dann das Ergebnis ab bis später.

Daishi

Wolfgang findet das Top!

Antworten

#23 | RE: Weihnachts- und Neujahrs Countdown etwas anders! datum

20.12.2023 15:21 (zuletzt bearbeitet: 31.03.2024 08:09)

Daishi

Informationen anzeigen

Beitr�ge:	450
Registriert seit:	08.01.2022

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

Also, das Testergebnis mit Wolfgang seiner Version

funktioniert tatenlos bei mir im Forum mit Business Template (v4).

Auch für Gäste ist es sichtbar, in dem Plugin erscheint es oben im Header in der Forenansicht. Auch als Gast sichtbar auf folgenden Browsern Microsoft Edge, Google, Firefox - Windows und Ubuntu Linux Firefox, sowie Linux MINT auf Chrome Browser

In den Beiträgen sieht es etwas anders aus, da wird es doppelt angezeigt. Liegt aber daran, dass da der HTML-Code entfernt werden muss, im Plugin.

Aber sonst top Arbeit, funktioniert wie es soll. Ich kann es leider nicht reproduzieren, dass es die Gäste nicht sehen können, bei mir funktioniert es tatenlos auf allen Browsern, die ich habe, auch als Gast.

Habe auch das Glitter aktiviert, auch diese funktioniert einwandfrei.

Wolfgang du hast echt eine tolle Arbeit hier abgelegt, also bei mir funktioniert das Script tatenlos, als Gast und als registrierter User.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@Wolfgang habe in der Plugin Änderungen vorgenommen

Nachtrag habe in der Plugin-Änderungen gemacht, habe jetzt ausgeklammert und angepasst.

In den Beiträgen sieht es etwas anders aus, da zeigt er es doppelt an. Liegt aber daran, dass da der HTML-Code ausgeklammert werden muss, im Plugin

Also so:

Von Zeile 113 bis 125:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/* <center>
  <div class="CountDownZeit">
    <h2 class="TextUe">Weihnachten 2023</h2>
    <br>
    <div class="zeitkontrolle" date-time="2023-12-24 00:00:00" style="--accent: #a10a06"></div>
  </div>
 
  <div class="CountDownZeit">
    <h2 class="TextUe">Neujahr 2024</h2>
    <br>
    <div class="zeitkontrolle" date-time="2023-12-31 00:00:00" style="--accent: #0a9006"></div>
  </div>
</center> */
`);
 

Und für die Beiträge muss Zeile 128 bis 138 ausgeklammert werden:

1
2
3
4
5
6
7
8
 
/*  class zeitkontrolle {
  constructor(el){
    this.el = el;
    this.targetDate = new Date(el.getAttribute("date-time"));
    this.createzeitkontrolleParts()
    this.zeitkontrolleFunction();
    this.zeitkontrolleLoopId = setInterval(this.zeitkontrolleFunction.bind(this), 1000)
  } */
 

Zeigt jetzt so an das Script normal nicht mehr doppelt.
Test Wolfgangs Script!

Nachteil, wird im Header nicht mehr angezeigt, aber in den Beiträgen.

Wo jetzt hier der Fehler ist oder befindet kann ich so nicht sagen, ich habe nur getestet, ich dachte es wäre ein guter Hinweis, zu bedenken, jedes Forum reagiert ja anders hmmm

Ich dachte, mit diesem Test würde ich dir helfen für die Fehlersuche.

Nette Grüße

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#24 | RE: Weihnachts- und Neujahrs Countdown etwas anders! datum

20.12.2023 18:55

Entschuldigt bitte, ich habe gerade etwas bemerkt, mein Testforum ist für Gäste nicht zugänglich- Vielleicht wird es deshalb nicht angezeigt. Allerdings ist es auch da wo Wolfgang es geschrieben hatte eingefügt, nämlich; Untere Leiste, header.
Ich werde jetzt mal versuchen, wenn ich es so mache, wie alle meine Plugins nämlich Forum Übersicht Header.
OK, das geht, aber trotzdem wird es im Portal nicht angezeigt, ich brauche es zwar nicht, aber vielleicht wäre es schön, wenn es für die welche ein Portal haben, dort eben auch angezeigt würde.

@Wolfgang, wenn Du magst, kannst dort gerne experimentieren. Weisst ja, wie Du rein kannst

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Antworten

#25 | RE: Weihnachts- und Neujahrs Countdown etwas anders! datum

20.12.2023 19:24 (zuletzt bearbeitet: 20.12.2023 20:18)

Daishi

Informationen anzeigen

Beitr�ge:	450
Registriert seit:	08.01.2022

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

Ich glaube, für das Portal wäre das die Lösung

Für Portal bearbeitet:

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
 
<style>
.CountDownZeit {
  --fontsize: 25px;
 
  display:inline-block; 
  margin: 5px 10px 2px 10px; 
  /* z-index:999; */
  position: relative;
}
.zeitkontrolle {
  padding:10px;
  background: rgba(000, 000, 000, 0.5);
  
  /* Hintergrundbild Countdown-Zähler */
  /* background-image: url("https://files.homepagemodules.de/b104774/a_489_06de1da5.jpg"); */
  
  /* Glitzerrand */
  /* border: 1px solid #0e0e0f;
      border-image-source: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
      border-image-slice: 3%; */
 
  border-radius:9px;
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  width: fit-content;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1rem;
  font-weight: bold; 
  color: rgb(230,230,230);
}
.zeitkontrolle > .part {
  padding: calc(var(--fontsize) / 5);
  display: grid;
  gap: 0.5rem;
}
.zeitkontrolle > .part > .number {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #aaaaaa;
  border: 2px solid hsl(0 0% 50% / .3);
  font-size: var(--fontsize);
  position: relative;
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  }
.zeitkontrolle > .part.Tage { --num: 365 }
.zeitkontrolle > .part.Stunden { --num: 24 }
.zeitkontrolle > .part:where(.Minuten, .Sekunden) { --num: 60 }
.zeitkontrolle > .part > .number::after{
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -0.5);
  border-radius: inherit;
  --degree: calc(360deg / var(--num) * (var(--num) - var(--value,0)));
  background-image: conic-gradient(var(--accent) var(--degree), transparent calc(var(--degree) + 0.1deg));
  --border-size: 4px;  
  --mask-image: radial-gradient(100% 100%, transparent calc(50% - var(--border-size)), black calc(50% - var(--border-size) + 1px));
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
}
.zeitkontrolle > .part > .text {
  width: calc(var(--fontsize)*3.3);
  background: rgb(200, 200, 200);
  border:1px solid #383838;
  border-radius: 3px;
  font-size: calc(var(--fontsize)/1.8);
  font-weight: bold;
  color: #383838;
  padding: 1px 10px;
  text-align: center;
} 
 
/* 3D-Überschrift */
h2.TextUe {
  font: bold var(--fontsize) Arial !important;
  color: #eeeeee !important;
  letter-spacing: 10px;
  text-transform: uppercase;
  text-shadow: 
    1px 1px 1px #919191,
    1px 2px 1px #919191,
    1px 3px 1px #919191,
    1px 4px 1px #919191,
    1px 5px 1px #919191,
    1px 6px 1px #919191,
    1px 9px 6px rgba(16,16,16,0.4),
    1px 11px 10px rgba(16,16,16,0.2),
    1px 13px 35px rgba(16,16,16,0.2),
    1px 15px 60px rgba(16,16,16,0.4);
}
</style>  
 
<center>
  <div class="CountDownZeit">
    <h2 class="TextUe">Weihnachten 2023</h2>
    <br>
    <div class="zeitkontrolle" date-time="2023-12-24 00:00:00" style="--accent: #a10a06"></div>
  </div>
 
  <div class="CountDownZeit">
    <h2 class="TextUe">Neujahr 2024</h2>
    <br>
    <div class="zeitkontrolle" date-time="2023-12-31 00:00:00" style="--accent: #0a9006"></div>
  </div>
</center>
 
<script>
 
window.addEventListener('load', function(){
 
class zeitkontrolle {
  constructor(el){
    this.el = el;
    this.targetDate = new Date(el.getAttribute("date-time"));
    this.createzeitkontrolleParts()
    this.zeitkontrolleFunction();
    this.zeitkontrolleLoopId = setInterval(this.zeitkontrolleFunction.bind(this), 1000)
  }
  createzeitkontrolleParts(){
    ["Tage", "Stunden", "Minuten", "Sekunden"].forEach(part => {
      const partEl = document.createElement("div");
      partEl.classList.add("part", part);
      const textEl = document.createElement("div");
      textEl.classList.add("text");
      textEl.innerText = part;
      const numberEl = document.createElement("div");
      numberEl.classList.add("number");
      numberEl.innerText = 0;
      partEl.append(numberEl, textEl);
      this.el.append(partEl);
      this[part] = numberEl;
    })
  }
 
 /*  zeitkontrolleFunction(){
    const currentDate = new Date();    
    if(currentDate > this.targetDate) return clearInterval(this.intervalId);
    const remaining = this.getRemaining(this.targetDate, currentDate);
    Object.entries(remaining).forEach(([part,value]) => {
      this[part].style.setProperty("--value", value)
      this[part].innerText = value
    })  
  } */
  
 /*   getRemaining(target, now){
    let Sekunden = Math.floor((target - (now))/1000);
    let Minuten = Math.floor(Sekunden/60);
    let Stunden = Math.floor(Minuten/60);
    let Tage = Math.floor(Stunden/24);
    Stunden = Stunden-(Tage*24);
    Minuten = Minuten-(Tage*24*60)-(Stunden*60);
    Sekunden = Sekunden-(Tage*24*60*60)-(Stunden*60*60)-(Minuten*60);
    return { Tage, Stunden, Minuten, Sekunden }      
  }
} */
 
const zeitkontrolleEls= document.querySelectorAll(".zeitkontrolle") || [];
zeitkontrolleEls.forEach(zeitkontrolleEl => new zeitkontrolle(zeitkontrolleEl))
 
});
  
</script>  
 

Schlie�en

Bin die ganze Zeit am Herumtesten für das Portal für Wolfgang seine Version. Nur komisch, ich musste 2 Sachen ausklammern da es doppelt im Portal anzeigte.

Ich hoffe, dass ich damit etwas helfen konnte, musste auch von Script etwas entfernen, hoffe, das war ok so mit dem Testen. Wenn noch Fehler drinnen sind, entschuldige ich mich, ich teste nur im Moment im Forum herum bei mir.

Hoffe, es war ok so, ich weiß nicht wie die anderen Foren, da reagieren. Hoffe für das Testen, dass das ok war, das meine Lösung bei den angezeigten Fehlern hilft und ich es richtig erklären konnte.

Portal:
test Portal!

Nette Grüße

Daishi

Daishi

Antworten

#26 | RE: Weihnachts- und Neujahrs Countdown mit Glitzer-Effekt! datum

20.12.2023 20:10 (zuletzt bearbeitet: 20.12.2023 20:19)

Hallo Daishi,

Danke für den Versuch, ich habe mal geschaut, wo Du das bei Dir gemacht hast? So wie ich es sehe, hast Du es einfach in einer Simple Text Box gemacht?
Falls dem so ist und ich das richtig sehe, muss ich Dir leider sagen, dass dies nicht die Lösung ist.
Wenn ich meinen Adventskranz, kannst Du hier: https://www.garten-der-poesie.de/ schön sehen und hin und herschalten zwischen Portal und Übersicht. Es ist beides dasselbe Plugin, nur an verschiedenen Orten eingesetzt.
So einfach ist es nicht, dass man im Portal dasselbe bekommt wie auf der Forenübersicht. Also beide Ansichten müssen dasselbe zeigen, nicht dass man im Portal einfach eine weiter Box macht, wenn man da auch etwas haben möchte, was es auch auf der Forenübersicht hat.

Falls ich jetzt eine falsche Annahme habe und Du das in Deinem Portal nicht mit einer Box gemacht hast, wo Du das Plugin reingestellt hast. Würdest Du mir dann bitte sagen, in welchem Selektor in der Admin ich es einstellen soll?

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Antworten

#27 | RE: Weihnachts- und Neujahrs Countdown mit Glitzer-Effekt! datum

20.12.2023 20:35 (zuletzt bearbeitet: 20.12.2023 20:37)

Ja, so weit bin ich noch nicht, ich habe es umgemodelt als simple Text Box gemacht

Dann entschuldige ich mich. Ich befasse mich erst seit kurzem, mit dem Plugin, bin noch experimentierfreudig oder wie das heißt. Nur kenne ich alle Codes noch nicht.

Hoffe, du bist mir nicht böse, denn hatte ich es falsch verstanden.

Ich entschuldige mich nochmal von ganzem Herzen

Daishi

Daishi

Antworten

#28 | RE: Fehlersuche: Weihnachts- und Neujahrs Countdown mit Glitzer-Effekt! datum

20.12.2023 20:57

Wieso sollte ich denn böse sein Daishi,

mich freut das, dass Du Dich so hier einbringst und auch vieles dabei lernst. Das trifft auch auf meinen Weggefährten Wolfgang zu, wir bewegen uns seit den Anfängen zusammen in der inzwischen vielfältigen Xobor Templatelandschaft.
Ich liefere leider nur Ideen, denn selber Scripten in der heutigen Zeit mutet sich die alte Frau nicht mehr zu. Deshalb bin ich froh, dass Wolfgang meinen alten Gehirnsynapsen so hilfsbereit zur Seite steht.

Ich freue mich auch über den coolen Wind der neuen Mitglieder und über Eure vielfältigen Ideen, welche Ihr uns darbietet

Liebe Grüsse

Gabi

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Nara findet das Top!

Antworten

#29 | Update: Weihnachts- und Neujahrs Countdown etwas anders! datum

21.12.2023 20:52 (zuletzt bearbeitet: 30.12.2023 09:19)

Wolfgang

Administrator

Informationen anzeigen

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

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

Update: Weihnachts- und Neujahrs Countdown etwas anders!

Aktualisiert 03.01.2026

Hallo zusammen!Erstmal ein großes Sorry, dass ich mich so spät melde, hatte noch andere Baustellen....
Unter anderen wollte meine Videogalerie nicht mehr mit den schönen und jetzt zu der Zeit passenden Weihnachtsliedern und lustigen Weihnachtsvideos!

Wow! Was für eine Begeisterung für den Weihnachts- und Neujahrs Countdown!
Besten Dank an Anne, Nara, Gabriella und Daishi für Feedback und Unterstützung!

Warum wurde bei den Gästen nichts angezeigt?Das Skript war so aufgebaut, dass es über "Activity Feed " gesetzt wird!
Wenn der "Activity Feed " also nicht da, nicht freigegeben oder für Gäste deaktiviert ist, wird der CountDown auch nicht angezeigt!

Was kann man tun, damit auch Gäste den Countdown Zähler sehen?Bereits im Beitrag #2, Beitrag #7 und Beitrag #8 ist der Fehler behoben.
Es muss auch nicht zwingend das "Activity Feed " freigegeben oder Berechtigungen geändert werden!

Countdown-Zähler in der Portal-BoxHier braucht nur unter "Portal bearbeiten " in z. B. "Box zum Bereich Oben_Mitte hinzufügen " eine "SimpleTextBox" aufgerufen werden und das komplette Skript eingefügt werden!
Dadurch wird der Countdown-Zähler nur im Portal angezeigt!

Countdown-Zähler nicht für GästeHier braucht nur das komplette Skript mit dem folgenden Foren-Variablen umschlossen werden!
Dadurch wird der Countdown-Zähler nicht mehr für Gäste angezeigt!

1
2
3
 
{{user_registered==true.start}} 
...                           
{{user_registered==true.end}} 
 

Ich hoffe, dass ich alle Fragen getroffen habe!

Wolfgang

Anne und Daishi finden das Top!

Antworten

#30 | Update: Weihnachts- und Neujahrs Countdown in den Beiträgen datum

22.12.2023 10:24 (zuletzt bearbeitet: 22.12.2023 21:31)

Daishi

Informationen anzeigen

Beitr�ge:	450
Registriert seit:	08.01.2022

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

Hallo @Wolfgang, sorry, wenn ich mich nochmal so spät melde, habe am Script herumgebastelt.

Da die Glitter und die 3D Überschrift in den Beiträgen nicht so groß gingen, musste ich noch etwas hinzufügen und testen.

Ich hoffe, es war ok so, dachte es würde eine kleine Hilfe sein, ob da noch Fehler drinnen sind, kann ich nicht sagen da ich es im kostenlosen Forum getestet habe. Was mir da aufgefallen ist, dass die Scripte auf Tarif Foren einwandfrei gehen und bei kostenloser Version anders aussehen, hmmm

Es ist schon faszinierend, was man alles mit der CSS machen kann, nur sehr schwierig, da es hier im Forum manchmal die Zahlen ändern muss, warum auch immer. Mir fällt es auf, wie gesagt ich weiß nicht, ob es an mir liegt.

Du kannst ja nochmal drüberschauen, ob ich es soweit richtig gemacht habe, ich dachte, ich nehme dir damit ein bisschen Arbeit ab.

Die HTML-Codes habe ich so für die Forencodes benutzt.

Einfache Forencodes:

Ersetze:

1
 
[Weihnachten]

Mit:

1
 
<h2 class="TextUe">Weihnachten 2023</h2><time class="zeitkontrolle" date-time="2023-12-24 00:00:00" style="--accent: red"></time>

Diese kann man immer erweitern.

Z.B.

1
 
<h2 class="TextUe">Engel Geburtstag</h2> <time class="zeitkontrolle" date-time="2024-02-22 00:00:00" style="--accent: yellow"></time>

So hier mal das Script, das ich ein wenig verändert habe, dass man es auch schön in den Beiträgen sehen kann. Ich habe es als Plugin angelegt in "Untere 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
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
 
<style>
.CountDownZeit {
  --fontsize: 25px;
 
  display:inline-block; 
  margin: 5px 10px 2px 10px; 
  /* z-index:999; */
  position: relative;
}
.zeitkontrolle {
  padding:10px;
  background: rgba(000, 000, 000, 0.5);
  
  /* Hintergrundbild Countdown-Zähler */
  /* background-image: url("https://files.homepagemodules.de/b104774/a_489_06de1da5.jpg"); */
  
  /* Glitzerrand */
  /* border: 1px solid #0e0e0f;
      border-image-source: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
      border-image-slice: 3%; */
 
  border-radius:9px;
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  width: fit-content;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1rem;
  font-weight: bold; 
  color: rgb(230,230,230);
}
.zeitkontrolle > .part {
  padding: calc(var(--fontsize) / 5);
  display: grid;
  gap: 0.5rem;
}
.zeitkontrolle > .part > .number {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #aaaaaa;
  border: 2px solid hsl(0 0% 50% / .3);
  font-size: var(--fontsize);
  position: relative;
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  }
.zeitkontrolle > .part.Tage { --num: 365 }
.zeitkontrolle > .part.Stunden { --num: 24 }
.zeitkontrolle > .part:where(.Minuten, .Sekunden) { --num: 60 }
.zeitkontrolle > .part > .number::after{
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -0.5);
  border-radius: inherit;
  --degree: calc(360deg / var(--num) * (var(--num) - var(--value,0)));
  background-image: conic-gradient(var(--accent) var(--degree), transparent calc(var(--degree) + 0.1deg));
  --border-size: 4px;  
  --mask-image: radial-gradient(100% 100%, transparent calc(50% - var(--border-size)), black calc(50% - var(--border-size) + 1px));
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
}
.zeitkontrolle > .part > .text {
  width: calc(var(--fontsize)*3.3);
  background: rgb(200, 200, 200);
  border:1px solid #383838;
  border-radius: 3px;
  font-size: calc(var(--fontsize)/1.8);
  font-weight: bold;
  color: #383838;
  padding: 1px 10px;
  text-align: center;
} 
 
/* 3D-Überschrift */
/*  h2.TextUe {
  font: bold var(--fontsize) Arial !important;
  font-size: 38px !important;                  
  color: #eeeeee !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 
    1px 1px 1px #919191,
    1px 2px 1px #919191,
    1px 3px 1px #919191,
    1px 4px 1px #919191,
    1px 5px 1px #919191,
    1px 6px 1px #919191,
    1px 9px 6px rgba(16,16,16,0.4),
    1px 11px 10px rgba(16,16,16,0.2),
    1px 13px 35px rgba(16,16,16,0.2),
    1px 15px 60px rgba(16,16,16,0.4);
}  */
 
/* Überschrift mit Glitzereffekt */
h2.TextUe {
      background: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-text-stroke: 1px #403d37;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: rgb(64, 61, 55);
     font: bold calc(var(--fontsize)*12.6) VERDANA,ARIAL,HELVETICA !important;
     font-size: 48px !important;              
     color: #ffffff !important;
     letter-spacing: 1px;
     text-transform: uppercase;
} 
</style>
 
<script>
window.addEventListener('load', function(){
 
$('.xFeedContainer, #activity_feed').before(`
/*  <center>
  <div class="CountDownZeit">
    <h2 class="TextUe">Weihnachten 2023</h2>
    <br>
    <div class="zeitkontrolle" date-time="2023-12-24 00:00:00" style="--accent: #a10a06"></div>
  </div>
 
  <div class="CountDownZeit">
    <h2 class="TextUe">Neujahr 2024</h2>
    <br>
    <div class="zeitkontrolle" date-time="2023-12-31 00:00:00" style="--accent: #0a9006"></div>
  </div>
</center> 
`); */
 
  class zeitkontrolle {
  constructor(el){
    this.el = el;
    this.targetDate = new Date(el.getAttribute("date-time"));
    this.createzeitkontrolleParts()
    this.zeitkontrolleFunction();
    this.zeitkontrolleLoopId = setInterval(this.zeitkontrolleFunction.bind(this), 1000)
  }
  
  createzeitkontrolleParts(){
    ["Tage", "Stunden", "Minuten", "Sekunden"].forEach(part => {
      const partEl = document.createElement("div");
      partEl.classList.add("part", part);
      const textEl = document.createElement("div");
      textEl.classList.add("text");
      textEl.innerText = part;
      const numberEl = document.createElement("div");
      numberEl.classList.add("number");
      numberEl.innerText = 0;
      partEl.append(numberEl, textEl);
      this.el.append(partEl);
      this[part] = numberEl;
    })
  }
  
 
  zeitkontrolleFunction(){
    const currentDate = new Date();    
    if(currentDate > this.targetDate) return clearInterval(this.intervalId);
    const remaining = this.getRemaining(this.targetDate, currentDate);
    Object.entries(remaining).forEach(([part,value]) => {
      this[part].style.setProperty("--value", value)
      this[part].innerText = value
    })  
  }
  
  getRemaining(target, now){
    let Sekunden = Math.floor((target - (now))/1000);
    let Minuten = Math.floor(Sekunden/60);
    let Stunden = Math.floor(Minuten/60);
    let Tage = Math.floor(Stunden/24);
    Stunden = Stunden-(Tage*24);
    Minuten = Minuten-(Tage*24*60)-(Stunden*60);
    Sekunden = Sekunden-(Tage*24*60*60)-(Stunden*60*60)-(Minuten*60);
    return { Tage, Stunden, Minuten, Sekunden }      
  }
}
 
const zeitkontrolleEls= document.querySelectorAll(".zeitkontrolle") || [];
zeitkontrolleEls.forEach(zeitkontrolleEl => new zeitkontrolle(zeitkontrolleEl))
 
}); 
</script>
 
 

Schlie�en

Frage, was hast du getan?

Ich habe in Zeile 78 das noch eingefügt ( font-size: 38px !important; ) und in Zeile 80 auf 1 Pixel gestellt. Das ist für den 3D-Text.

Für den Glittertext habe ich in Zeile 104 das noch eingefügt ( font-size: 48px !important; ) und in Zeile 106 auf 1 Pixel gestellt.

Ich hoffe, es war ok so und konnte es so gut es geht verständlich erklären. Wolfgang, ich dachte, es wäre eine kleine Hilfe und würde dir damit ein kleines bisschen Arbeit abnehmen.

Hier nochmal zu sehen, mit Veränderungen:

So sieht es in den Beiträgen aus!

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

"Achtung Bauarbeiten" für halbfertige Beiträge" - Teil 1-3 � � Sidebar "Tips"

Seite 3 von 4 � Seite 1 2 3 4 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Countdown mit neuen Codes und neuen Farbcodes
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi 1 26.05.2024 21:00
Wolfgang • Zugriffe: 423
Countdown
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Kipper-Spedition 2 03.07.2024 13:27
Wolfgang • Zugriffe: 468
Spoiler Alarm - Countdown Spoiler
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi 3 11.03.2024 10:24
Wolfgang • Zugriffe: 910
Webseiten automatisch einblenden
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 0 24.05.2022 19:43
Wolfgang • Zugriffe: 755
Countdown-Timer: Javascript läuft falsch
Erstellt im Forum Das neue Template Xobor (v6). von Nara 9 12.09.2021 15:28
Nara • Zugriffe: 1300
Die neue Videogalerie - Neue Optionen!
Erstellt im Forum Ank�ndigungen & Termine, wichtige News. von Wolfgang 16 25.03.2026 14:18
Kipper-Spedition • Zugriffe: 1955

Upload-Fenster immer automatisch in den Sichtbereich scrollen lassen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

30.03.2025 14:00
von

Dankeschön • Zugriffe: 1168

Silvester/Neujahrs-Karten Online versenden
Erstellt im Forum Ank�ndigungen & Termine, wichtige News. von Wolfgang 0 31.12.2017 09:43
Wolfgang • Zugriffe: 937
Countdown(up) - Timer - Zähler - Generatoren
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 0 01.04.2012 00:53
Wolfgang • Zugriffe: 7482

Forum �bersicht → XOBOR-Foren und Homepages →

Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! → Weihnachts- und Neujahrs-Countdown! Mit vielen Optionen & Automatik!

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 €

37%

⚡Stress‑Test

�

🔥 Konsole �ffnen

Um die Browser-Konsole zu �ffnen, dr�cke:

F12 oder Ctrl + Shift + I

W�hle danach den Reiter Console.

Dort kannst du:
� Test-Anfragen sehen
� Fehler erkennen
� Netzwerk-Infos pr�fen