🎁 Dein Foren-Upgrade: „Cyber-Blue 2026 – Ultimate Glass Edition“
Hallo Wolfgang, ich habe ein exklusives Design-Skript für dein Forum erstellt.
Das Besondere daran:
Es installiert sich quasi von selbst und passt sich deinen Einstellungen an!
Was das Design für dich erledigt:
Schrift-Automatik:
Du musst nichts umstellen. Das Design erkennt deine gewählte Foren-Schriftart und übernimmt sie automatisch für alle neuen Elemente.
Intelligente Transparenz:
Alle Boxen erhalten einen modernen „Glas-Effekt“ (Frosted Glass), der sich perfekt über dein Hintergrundbild legt.
Lebendige Interaktion:
Die Kategorien und der Footer reagieren auf deine Maus – sie schweben dir förmlich entgegen und werden heller. Deine Foren-Boxen „atmen“ durch einen dezenten, blauen Neon-Puls am Rand.
Ultra-Slim Footer:
Der Bereich ganz unten wurde komplett modernisiert. Er ist jetzt schlank, elegant und hat denselben coolen Hover-Effekt wie deine Kategorien.
Dynamische Zeilen:
Wenn du über ein Thema fährst, gleitet die Zeile ein Stück zur Seite – das sorgt für ein extrem flüssiges Bediengefühl.
So aktivierst du es: (Dauer: 30 Sekunden):
Kopiere den Code einfach komplett.
Gehe in deinem Forum auf: Admin > Layout > Farben & Einstellungen > CSS .
Füge den Code ganz unten in das Textfeld ein und klicke auf Speichern.
Keine extra Einstellungen nötig – einfügen und genießen!
RE: Ein kleines Geschenk für dich als Dankeschön :O)
Einiges gefällt mir, nur die unscharfe Schrift ist gewöhnungsbedürftig. Ich war vorhin schon beim Optiker und wollte meine Sehstärke kontrollieren lassen...
Aber Danke für deine Ideen und Ausführungen! Jeder kann sich raussuchen was er will oder braucht. Bitte weiter so!
Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:
RE: Ein Geschenk - Neues Design Forenstatistik für dich mein Mentor
Hallo Wolfgang
danke für deine großartige Unterstützung als Mentor! Als Dankeschön habe ich ein exklusives Design-Upgrade für dein Forum vorbereitet.
Ich habe mich an den Code gesetzt und die Forenstatistik unten so kalibriert, dass sie nun im fehlerfreien Glanz deiner Ultimate Glass Edition erstrahlt – inklusive funktionierendem Besucherzähler und Finanz-Modul. Alles passt sich jetzt perfekt deinem ruhigen Stil an.
Ich habe den neuen Code für dich bereitgelegt. Am besten testest du ihn vorher erst in Ruhe im Testforum. Wenn du möchtest, kannst du das Ganze dort natürlich noch nach deinen eigenen Wünschen weiter anpassen und verfeinern.
Ich hoffe, die Überraschung ist gelungen und das Geschenk gefällt dir!
const parseAndInject = () => { var boxContent = $('.box.grey.stats .boxcontent'); if (!boxContent.length) return;
// --- SCHRITT 1: PRÄZISE INHALTE AUSLESEN --- var onlineUsersHtml = $('#foverview_stat1').html() || ""; if(onlineUsersHtml.includes('Online:')) { var parts = onlineUsersHtml.split('Online:'); var systemText = $('<div>' + parts[0] + '</div>').text().replace("sind", "sind online:").trim(); var userList = parts[1].trim(); onlineUsersHtml = systemText + '<br><div style="margin-top:5px;">' + userList + '</div>'; }
var recordText = $('#foverview_stat2').text() || "7 Benutzer gleichzeitig online (28.02.2026 14:13)"; recordText = recordText.replace("Besucherrekord", "").trim();
var topics = "14", posts = "14", members = "1"; $('#foverview_stat3 table tr').each(function() { var label = $(this).find('td').eq(0).text().trim(); var val = $(this).find('td').eq(1).text().trim(); var cleanVal = val.replace(/[^0-9]/g, '');
Ich gebe mir sehr viel Mühe und versuche immer**,** ein gutes Ergebnis abzugeben**. Ich hoffe von ganzem Herzen,** dass es dir gefällt**.
Es war sehr viel Arbeit und ich dachte mir einfach,** da dein Forum so modern ist**,** ist das das I-Tüpfelchen auf der Sahnehaube.
Ich hoffe**,** dass es dir gefällt**,** du dich darüber freust und es verwenden kannst.
Mit herzlichen Grüßen
Daishi
P.S.: Ich habe vergessen, die Bilder anzuhängen, damit du siehst, wie es in etwa ausschaut. Ich habe ein dunkles Design eingestellt, es müsste aber in deinem Foren-Style zu sehen sein. Ich entschuldige mich für die verspäteten Bilder.
Ich hänge die Bilder jetzt hier an.
als Gast zu sehen
als eingelogt zu sehen
Hoffe, dass man es gut erkennen kann und ob das Dashboard soweit gut rüberkommt und die Idee und Inspiration gut war.
Ich hoffe, dass es Dir gefällt und du dafür Verwendung hast.
Mir ist immer wichtig, dass Effekte nicht zu schnell oder hektisch wirken, dass man sie genießen kann, wenn die Zeit dafür da ist. Ein schöner einfacher CSS-Eintrag funktioniert mit "Transistion", bei dem man "Ansprechzeit (2)" und "Schnelligkeit (1)" getrennt einstellen kann! Fährt man mit der Mouse über die Elemente, passiert nichts, aber wenn die Mouse dann stehen bleibt, läuft der Effekt ab, und zwar in der Geschwindigkeit, wie man es mag!
1
transition: all 0.3s 0.5s linear;
Manchmal stören auch Umbrüche, wenn man bestimmte DIV's nebeneinander setzten oder ohne Leerzeilen darstellen möchte. Hier hilft meist ein CSS-Eintrag der ausblendet oder eine JS-Zeile, die "<br>" sogar löscht! Nützlich können auch die weniger gebräuchlichen "CSS-Selektoren", "+" und "~" sein. Mit ihnen springt man zum nächsten Element oder zu den nachfolgenden Elementen!
Bei dem Finanzstatus bin ich mir nicht so sicher, in welchem Maße die eingegangenen Spenden dargelegt werden sollten. Auf jeden Fall ist es für mich ein Dankeschön und auch erwähnenswerter Eintrag. Ich kann mir gut vorstellen, dass einige User hier auch nicht genannt werden möchten.
vielen Dank für deine wunderbare und ausführliche Rückmeldung! Es freut mich riesig, dass ich dich zu neuen Ideen anregen konnte und dass wir uns gegenseitig so toll inspirieren. Genau so macht das gemeinsame Arbeiten und Lernen unglaublich viel Spaß!
Deine Tipps und Erklärungen habe ich regelrecht aufgesaugt:
• Der Transition-Trick (0.3s 0.5s): Das mit der Verzögerung ist genial! Dadurch wirkt der Effekt beim Drüberfahren mit der Maus extrem edel und unaufdringlich. Es fängt erst an zu "atmen", wenn man wirklich mit der Maus verweilt. Das nimmt sofort jede Hektik aus dem Design.
• Die CSS-Selektoren (+ und ~): Das Löschen der störenden Umbrüche per CSS oder direkt per jQuery über die Nachbar-Selektoren ist ein super cleverer Workaround. Das rettet das Layout vor ungewollten Lücken, ohne dass man das HTML-Template komplett umbauen muss.
• Das Abheben beim Hover: Der sanfte Schatten in Kombination mit dem minimalen Vergrößern (scale) sieht einfach klasse aus. Es gibt dem User ein dezentes Gefühl von Tiefe, ohne das Auge zu überfordern.
• Datenschutz beim Finanzstatus: Da hast du absolut recht, das ist ein sehr wichtiger Einwand! Die Privatsphäre der Mitglieder geht vor. Es reicht völlig aus, wenn man dort allgemein ein "Danke für eure Unterstützung" oder den reinen Fortschrittsbalken anzeigt, ohne Namen zu nennen.
Die Idee, die Statistik mit einem Skript standardmäßig geschlossen starten zu lassen, finde ich fantastisch. Das sorgt für einen extrem aufgeräumten und minimalistischen Look beim Betreten des Forums. Wer die Zahlen sehen will, klappt sie sich einfach entspannt auf.
Vielen Dank, dass du dein Wissen so mit mir teilst. Ich werde deine Code-Kniffe direkt in meinen nächsten Übungen ausprobieren und verfeinern!
Hier nochmal ein Geschenk für dich, die mobile version. Da du ja Änderungen und Anpassungen gemacht hast, kannst du dies hier ja dann auch tun, da ich ja nicht genau weiß, was du angepasst hast.
Ich dachte, dass du dich freust, wenn es in Xobor auch bei dir mobil genauso anzeigt, wie man es auf dem PC sieht.
Schritt 1: Das CSS für den Cyber-Glass-Look einfügen. Klicke in deiner gezeigten Navigation links auf den Bereich CSS/SCSS und füge dort folgenden Code ein.
Dieser überschreibt das mobile Standard-Theme mit Wolfgangs Neon- und Transparenz-Effekten:
/* Alle Texte innerhalb des mobilen Headers weiß färben */ .xBoxHeader *, .xBlockTitle * { color: #ffffff !important; }
/* 4. Der mobile Slim-Footer im Wolfgang-Style */ .xFooter, #xobor_mobile_footer { background: linear-gradient(135deg, #000090 0%, #3c6cce 50%, #000090 100%) !important; margin: 30px 10px 15px 10px !important; padding: 10px !important; border-radius: 25px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; text-align: center !important; } .xFooter a { color: #ffffff !important; font-size: 10px !important; text-transform: uppercase !important; font-weight: bold !important; }
/* 5. Dezenter Text-Glow für den Cyber-Effekt auf Mobile */ .xBoxHeader, .xBlockTitle, .xLink, a { text-shadow: 0 0 4px rgba(60, 108, 206, 0.6) !important; }
Schritt 2: Das Script für das mobile Einklappen aktivieren. Klicke in der Menü-Auswahl links auf "Eigenes HTML/JS". Kopiere diesen Code hinein, damit die Boxen auch auf dem Smartphone per Fingertipp platzsparend ein- und ausklappen:
Schritt 3: Die Farbfelder direkt in deiner Maske anpassen (Wichtig!) Damit das System keine hellen Standardfarben dazwischenwirft, kannst du die Farbfelder aus deinem Screenshot direkt mit folgenden Werten füllen:
Hintergrundfarbe des Forums: #000000 (Tiefschwarz)
Hintergrund Inhaltsboxen: transparent oder rgba(0,0,0,0.3)
Theme-Farbe 1 (Hauptfarbe): #3c6cce (Das leuchtende Neon-Blau für Links)
Theme-Farbe 2 (Zweitfarbe): #000090
Vergiss am Ende nicht, ganz unten auf den blauen Speichern-Button zu klicken!
Mit herzlichen Grüßen
Daishi
P.S. Teste es erst im Testforum und lass dir Zeit. Ich dachte mir nur, dass du dich darüber freuen würdest es auch mobil so zu haben wie auf dem ohne mobilen Ansicht. Hoffe, dass meine Idee und Inspiration gut ankommt.
Hallo Wolfgang Ich muss mich noch einmal ganz offiziell bei dir entschuldigen!
Der Code von gestern hatte einen dicken Denkfehler. Da ich momentan an sehr vielen verschiedenen Projekten und Styles gleichzeitig bastle, habe ich versehentlich Code-Fragmente aus meinem eigenen, dunklen Test-Design erwischt.
Das war natürlich völlig falsch für deine Forenfarben und hat zu einem ordentlichen Farb-Chaos geführt.
Aus der Ferne ohne direkten Live-Testzugang zu arbeiten, ist verdammt schwer.
Ich habe mir deine Seite aber noch einmal ganz genau auf dem Smartphone angeschaut und analysiert, warum Xobor deine schöne Desktop-Arbeit mobil einfach ignoriert: Xobor erzwingt auf Handys standardmäßig ein ganz eigenes, starres Mobil-System.
Dadurch sieht man zwar dein Hintergrundbild, aber der Rest der Seite schrumpft in das graue Standard-Layout zurück.
Hier ist nun die finale Komplettlösung, die wir sauber in drei einfache Schritte aufteilen.
Damit überlisten wir das Xobor-System, bringen deine eleganten Pillenformen und den Glas-Look aufs Handy und reparieren gleichzeitig die fehlerhaften Links im Hintergrund!
🛠️ Schritt 1: Die Farbfelder im mobilen Template anpassen
Damit das Xobor-System im mobilen Template keine falschen Standardfarben dazwischenwirft, gehe im Administrationsbereich zu Layout → Farben & Einstellungen. Stelle sicher, dass du dich in den Einstellungen für das mobile Template befindest, und passe die Felder mit diesen korrekten Werten an:
Hintergrundfarbe des Forums: transparent (Wichtig! Nur so bleibt dein eigenes Hintergrundbild im gesamten Forum voll sichtbar!)
Hintergrund Inhaltsboxen: rgba(255, 255, 255, 0.05) oder transparent (Das sorgt für den echten, hellen Glas-Effekt deines Designs)
Hintergrund Kopfzeilen: #000090 (Das edle Cyber-Dunkelblau für deine Menüs)Theme-Farbe 1 (Hauptfarbe): #3c6cce (Das leuchtende Neon-Blau für deine Links)
Theme-Farbe 2 (Zweitfarbe): #000090Am Ende ganz unten auf Speichern klicken!
💻 Schritt 2: Den Link-Fix im mobilen HTML/JS einfügenBleibe im Adminbereich unter Layout → Farben & Einstellungen und klicke oben auf den Reiter Eigenes HTML/JS (mobile).
Füge dort dieses JavaScript in das Textfeld ein.
Dieses Skript läuft unsichtbar im Hintergrund und repariert die zerschossenen HTML-Links der Forenübersicht direkt auf dem Smartphone:
<!-- ======================================================================= 🎁 DAISHI'S MOBILE LINK-REPAIR SCRIPT (Hintergrund-Fix für Handys) ======================================================================= --> <script> $(document).ready(function() { $('.box.cat .noimage.forum li, .m-forum-row').each(function() { var $li = $(this); var $fdesc = $li.find('.fdesc, .m-fdesc');
// Entfernt den fehlerhaften Link mit dem blauen Kreis komplett $fdesc.find('a').each(function() { if ($(this).text().indexOf('🔵') !== -1) { $(this).remove(); } });
// Repariert den kaputten HTML-Link beim Foren-Icon ganz links (m-fnew) var $fnewLink = $li.find('.fnew a[onclick*="forum_redirect"], .m-fnew a'); if ($fnewLink.length > 0) { var onclickAttr = $fnewLink.attr('onclick'); if (onclickAttr) { var match = onclickAttr.match(/forum_redirect[^0-9]+([0-9]+)/); if (match && match) { $fnewLink.attr('href', '/f' + match + '-.html'); } } } }); }); </script>