Neue Farben für das Template Xobor (v6) - Teil 1 Aktualisiert 15.08.22
Die neuen responsive Templates sind richtig gut geworden, viele Fehler sind ausgemerzt und Anpassungen vorgenommen worden! Aktuell haben die Templates auch ihren Beta-Status verloren! Aber wie sieht es mit den Farben aus?
Nur für die mobile Version, wenn es noch die Templates (v1-4) gibt:
"Mobil" können die Farben unter "Admin > Layout > Mobil > Theme" beliebig eingestellt werden. Es stehen zusätzlich 7 verschiedene Vorlagen zur schnellen Auswahl zur Verfügung!
Für die neue Version - Xobor (v6) & Mobil:
In der neuen Version braucht man nur einmal die Farben unter "Admin > Layout > Farben & Einstellungen > Theme" anzupassen. Auch hier stehen zusätzlich 7 verschiedene Vorlagen zur schnellen Auswahl zur Verfügung!
Style-Switcher für das neue Template Xobor (v6) - Teil 2 Aktualisiert 15.08.22
×
Der neue Style-Switcher fürs Xobor (v6)
Der neue Style-Switcher fürs Xobor (v6)
Im zweiten Teil kann über ein "Style-Switcher" der User selber die Grundfarbe für das Forum aussuchen! Die Hintergrundfarbe wird über ein Dropdown-Menü ausgewählt! Bei der Installation wurde auf Variablen (Plugin-Installation) verzichtet, um den Nachbau einfacher zu gestalten!
Was kann das Skript in Teil 2?
Mit dem folgenden Skript können 9 verschiedene Farbtöne über ein Dropdown-Menü ausgewählt werden!
Die Farbanpassungen sind für die Templates "X6" + "Gaia" + "Zeitlos Blau" + "HPM Business" + "HPM Classic" vorgesehen!
Die Farbe bleibt bei Seitenwechsel erhalten!
Das Dropdown-Menü wird oberhalb der Kategorien platziert!
Installation für das neue Xobor (v6) & Mobil - Teil 2
Voraussetzungen für den Style-Switcher
Der Style-Switcher benötigt eine Referenzfarbe! Ist das Template farblich noch nicht verändert, sind keine weiteren Maßnahmen erforderlich!
Ist das Template farblich bereits angepasst, muss die Farbe aus "Theme" übernommen werden und in Zeile 50 und im "Cassic" Zeile 51 eingetragen werden! Zur Zeit kann nur eine Referenzfarbe geändert werden!
JavaScript
CSS
Das Skript für das Design des Forums wird einfach nach "Eigenes Javascript" kopiert!
Es stehen 9 Farben über ein Dropdown-Menü zur Auswahl, die automatisch alle Farben im Forum anpassen!
Wichtig! Damit beim Aufrufen der Seiten die Standardfarbe nicht kurz aufblitzt, CSS-Eintrag + Eintrag "Eigene Fußzeile" nicht vergessen!
Zeile 3 bestimmt den Standort der Auswahl-Menüs
In Zeile 11-19 stehen die Farben im DropDown-Menü, können aber beliebig angepasst werden! Hier wird nur die Auswahl und das farbliche Aussehen für das Dropdown-Menü bestimmt!
In Zeile 32-40 werden die Farben fürs Forum festgelegt. Sie haben die gleiche Reihenfolge wie im Dropdown-Menü.
In Zeile 50 steht die Referenz-Farbe für die Hintergrundfarbe aus dem Forum!
In Zeile 68 wird zusätzlich das Scroll-Symbol farblich angepasst!
In Zeile 71 wird zusätzlich das Profil farblich angepasst und die Schrift zentriert!
In Zeile 11-19 stehen die Farben im Dropdown-Menü, können aber beliebig angepasst werden! Hier wird nur die Auswahl und das farbliche Aussehen für das Dropdown-Menü bestimmt!
In Zeile 32-40 werden die Farben fürs Forum festgelegt. Sie haben die gleiche Reihenfolge wie im Dropdown-Menü.
In Zeile 50 steht die Referenz-Farbe für die Hintergrundfarbe aus dem Forum!
In Zeile 68 wird zusätzlich das Scroll-Symbol farblich angepasst!
In Zeile 71+72 wird zusätzlich das Profil farblich angepasst und die Schrift zentriert!
In Zeile 75-79 wird das Mouseover im Activity-Feed farblich angepasst!
In Zeile 11-19 stehen die Farben im DropDown-Menü, können aber beliebig angepasst werden! Hier wird nur die Auswahl und das farbliche Aussehen für das Dropdown-Menü bestimmt!
In Zeile 32-40 werden die Farben fürs Forum festgelegt. Sie haben die gleiche Reihenfolge wie im Dropdown-Menü.
In Zeile 50 steht die Referenz-Farbe für die Hintergrundfarbe aus dem Forum!
In Zeile 68 wird zusätzlich das Scroll-Symbol farblich angepasst!
In Zeile 71 wird zusätzlich das Profil farblich angepasst und die Schrift zentriert!
In Zeile 11-19 stehen die Farben im DropDown-Menü, können aber beliebig angepasst werden! Hier wird nur die Auswahl und das farbliche Aussehen für das Dropdown-Menü bestimmt!
In Zeile 32-40 werden die Farben fürs Forum festgelegt. Sie haben die gleiche Reihenfolge wie im Dropdown-Menü.
In Zeile 50+51 steht die Referenz-Farbe für die Schrift- und Hintergrundfarbe aus dem Forum!
In Zeile 80 wird zusätzlich das Scroll-Symbol farblich angepasst!
In Zeile 83+84 wird zusätzlich das Profil farblich angepasst und die Schrift zentriert!
In Zeile 11-19 stehen die Farben im DropDown-Menü, können aber beliebig angepasst werden! Hier wird nur die Auswahl und das farbliche Aussehen für das Dropdown-Menü bestimmt!
In Zeile 32-40 werden die Farben fürs Forum festgelegt. Sie haben die gleiche Reihenfolge wie im Dropdown-Menü.
In Zeile 50 steht die Referenz-Farbe für die Hintergrundfarbe aus dem Forum!
In Zeile 70 wird zusätzlich das Scroll-Symbol farblich angepasst!
In Zeile 73 wird zusätzlich das Profil farblich angepasst und die Schrift zentriert!
In Zeile 76+77 wird die Titelleiste farblich angepasst!
Damit beim Aufrufen der Seiten die Standardfarbe nicht kurz aufblitzen sind zwei Einträge notwendig! Der gesamte Body wird erst angezeigt, wenn das Java-Skript geladen ist! In Zeile 3 kann man die Einblendzeit über "fadeIn" zusätzlich verzögern. Ist das nicht notwendig, können die Einträge "fadeOut/fadeIn" gelöscht werden!
Folgende CSS-Eintrag in CSS / SCSS Addon kopieren!
Zitat von EaglePipe im Beitrag #14Vielen Dank für die interessante Anleitung
Ist es auch möglich über den Switcher zwischen zwei erstellten Design zu wechseln
Gruß Alex
Hallo Alex
Das funktioniert bereits in Beitrag #12 - Teil 2! Hier kannst Du über "Forum-Style ändern" die Farben bestimmen und zwischen Standard und 9 weiteren Farben wählen! Willst Du die Standard-Farbe nur heller oder dunkler haben, musst Du das Auswahl-Menü minimieren! Welchen Farb-Code hat Dein Forum? Für heller müssen die Werte verhältnismäßig erhöht werden! Für "dunkler" müssen die Werte verhältnismäßig niedriger ausfallen!
Zeile 31 ist für die Standard-Farbe zuständig - nicht verändern! Zeile 11-19 und 32-40 für die frei gewählten Farben!
Nachtrag:
Der Style-Switcher benötigt eine Referenzfarbe! Ist das Template farblich noch nicht verändert, sind keine weiteren Maßnahmen erforderlich!
Ist das Template farblich bereits angepasst, muss die zu verändernde Farbe aus "Theme" übernommen und in Zeile 50 eingetragen werden! Zur Zeit kann nur eine Referenzfarbe geändert werden!
Style-Switcher für das neue Template Xobor (v6) - Teil 2 Aktualisiert 06.07.22
×
Der neue Style-Switcher fürs Xobor (v6)
Der neue Style-Switcher fürs Xobor (v6)
Bis dann und gutes Gelingen Wolfgang
Ich habe gerade das Problem, dass die Standardfarbe immer kurz blitzt. Hier wurde geschrieben das man "body {visibility:hidden;}" einfügen soll, aber dann wird mein Design zerschossen!
Ich habe fast alle Probleme gelöst, nur im dunklen Design sieht man ganz kurz den Hintergrund. Im hellen Design ist es nicht, hat jemand noch eine Idee?
<script>
if(!localStorage.getItem('fontwechsler')){ var forum_einst = $(".card, .ftitle a, .ttitle a, h3, .col-12, .text-center, .card-body, .col-12, .card-body-addon, .forumdesc,.forumstats, .subforumlist, .thread_info, .table").css("color"); localStorage.setItem('fontwechsler', forum_einst); } var speicherung = localStorage.getItem('fontwechsler') $('body').append('<style>.col-12, .card, .text-center .ftitle a, h3, .ttitle a, .card-body, col-12, .card-body-addon, .forumdesc, .subforumlist, .thread_info, .table, .table-hover tbody tr:hover{color:'+speicherung+' !important;}</style>');
// Einstellung Hell function forum_standard(){ localStorage.clear(); $('body').append('<style>.col-12, .card, .text-center, h3, .ftitle a, .ttitle a, .card-body, .card-body-addon, .col-12, .forumdesc, .subforumlist, .thread_info, .table, .table-hover tbody tr:hover{color: #ffffff;}</style>'); localStorage.setItem('fontwechsler', '#000000'); }
<script> /* hover Effekt in Forumliste und AF und Portal-AF entfernen */ $('.forumlist .forum, #activity_feed .card-body .feedentry').removeClass('hoverable') </script>
<script> var $pagebutton = $('.pagination_container').clone(); $('.pagination.pagelinks').html($pagebutton).addClass('float-right'); </script>
Fehlersuche: Style-Switcher für das neue Template Xobor (v6) - Teil 2
Hallo Alex, habe die Ursache gefunden! Hinzu kommt noch, dass die Browser sich unterschiedlich verhalten, auch in den Templates! In den Templates (v1-4) hat alles, auch in den gängigen Browsern funktioniert! Im neuen Xobor (v6) mit dem neuen Framework "Bootstrap", ist auch vieles anders!
Um das Aufblitzen zu verhindern, war die Idee, den gesamten "body" dunkel zu schalten und wenn alle JavaScripte geladen sind, verzögert einzublenden! Mit "opacity:0 + opacity:1.0" oder "visibility: hidden + visibility: visible" war es nicht möglich in allen Browsern alles wieder einzublenden! An den verkehrten Stellen eingesetzt, brachte es auch keinen Erfolg! Interessanterweise lief es immer mit dem Browser "Edge".
Lösung für alle gängigen Browser:
Die Lösung liegt darin, das Einblenden nicht im gleichen Skript zu erledigen, sondern den Befehl als letztes in "Eigene Fußzeile" zu schieben! Damit beim Aufrufen der Seiten die Standardfarbe nicht kurz aufblitzen sind zwei Einträge notwendig! Der gesamte Body wird erst angezeigt, wenn die Java-Skripte geladen sind!
Folgende CSS-Eintrag in CSS / SCSS Addon kopieren!
1
body {visibility: hidden;}
Folgende Zeilen nach Eigene Fußzeile kopieren! die Zeit von "fadeIn" in Zeile 3 kann beliebig angepasst werden!