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!
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>