Lexi Help
Partner
www.forumieren.com

[Tutorial] Das Aussehen der Toolbar anpassen

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[Tutorial] Das Aussehen der Toolbar anpassen

Beitrag von Günther am Fr 8 Feb 2013 - 13:21

Das Aussehen der Toolbar anpassen

Hallo,

in diesem Tutorial möchte ich euch bei der Anpassung eurer Toolbar mittels CSS helfen. Grundsätzliche Erklärungen und Informationen zur Toolbar findet ihr dort:
Update - 2. Teil Toolbar
Update vom 22.02.2013: Toolbar Version 2.0

Momentan können nur die Hintergrundfarbe der Toolbar und die Textfarbe auf der Toolbar im Adminbereich festgelegt werden.
Da die restliche Anpassung der Toolbar derzeit nur über CSS möglich ist, sind CSS-Grundlagenkenntnisse für diese Umsetzung sehr hilfreich. Sämtliche Codes, die im Folgenden erklärt werden, müssen im Administrationsbereich an dieser Stelle eingesetzt werden:
Administrations-Bereich (erweitert) Anzeige Bilder & Farben Farben Reiter "CSS Stylesheet"

Hintergrundfarbe, Hintergrundbild

Du kannst entweder eine Hintergrundfarbe oder ein Hintergrundbild festlegen.

Hintergrundfarbe:

Die Hintergrundfarbe der Toolbar kannst du direkt im Adminbereich bestimmen:
Administrations-Bereich (erweitert) Module Toolbar Einstellungen: Farbe

Hintergrundbild:

Hintergrundbild Toolbar ausgeklappt:
Code:
#fa_toolbar {
  background-image: url("BILDURL") !important;
}
Bei "Bildurl" fügst du die URL zum Hintergrundbild ein. Dieses muss eine Höhe von 30px besitzen. Die Breite kann entweder sehr gering gewählt werden, sodass sich das Bild horizontal wiederholt, oder sehr hoh (2.000px), sodass es sich unter keiner Bildschirmauflösung wiederholen muss.
Hintergrundbild Toolbar eingeklappt:
Dadurch wird der Hintergrund festgelegt, der bei eingeklappter Toolbar hinter dem Pfeilbutton sichtbar ist, in diesem Fall als rot definiert:

Code:
#fa_toolbar_hidden {
  background-image: url("BILDURL") !important;
}
Bei "Bildurl" fügst du die URL zum Hintergrundbild ein. Dieses sollte Ausmaße von 30x30px besitzen.

Textfarbe auf der Toolbar

Die Textfarbe der Links auf der Toolbar (Forumieren, Austausch, Login, Anmelden, Willkommen, Benachrichtigungen) kannst du direkt im Adminbereich bestimmen:
Administrations-Bereich (erweitert) Module Toolbar Einstellungen: Textfarbe

Suchfeld

Hintergrundfarbe/Hintergrundbild des Suchfeldes:

Du kannst entweder eine Hintergrundfarbe oder ein Hintergrundbild für das Suchfeld festlegen.
Hintergrundfarbe:
Code:
#fa_search #fa_textarea {
  background-color: FARBCODE;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.
Hintergrundbild:
Code:
#fa_search #fa_textarea {
  background-image: url("BILDURL");
}
Bei "Bildurl" fügst du die URL zum Hintergrundbild ein. Dieses sollte Ausmaße von 200x24px besitzen.
Suchicon Lupe:

Lupe entfernen:
Code:
#fa_search #fa_magnifier {
  background-image: none !important;
}
Lupe ersetzen:
Code:
#fa_search #fa_magnifier {
  background-image: url("BILDURL") !important;
}
Bei "Bildurl" fügst du die URL zum neuen Suchicon (Lupe) ein. Dieses sollte Ausmaße von 30x30px besitzen.
Textfarbe im Suchfeld:

Textfarbe im Suchfeld:
Code:
#fa_search #fa_textarea {
  color: FARBCODE;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.
Suchfeld entfernen:

Suchfeld entfernen:
Code:
#fa_toolbar #fa_search {
  display: none !important;
}

Bereich "Austausch"

(teilweises) Entfernen:

Bereich komplett entfernen:
Code:
#fa_toolbar #fa_share {
  display: none !important;
}
Facebook-Button entfernen:
Code:
#fa_toolbar #fa_fb {
  display: none !important;
}
Twitter-Button entfernen:
Code:
#fa_toolbar #fa_twitter {
  display: none !important;
}
GooglePlus-Button entfernen:
Code:
#fa_toolbar #fa_gp {
  display: none !important;
}
MailClient-Button entfernen:
Code:
#fa_toolbar #fa_mail {
  display: none !important;
}
RSSFeed-Button entfernen:
Code:
#fa_toolbar #fa_rss {
  display: none !important;
}

Funktionslinks (Login, Anmelden, Willkommen, Benachrichtigungen) & Menüs

Funktionslinks:

Kennzeichnung neuer Benachrichtigungen:
Code:
#fa_toolbar #notif_unread {
  color: FARBCODE !important;
  font-weight: 900;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein. Dadurch werden neue Benachrichtigungen auffallender angezeigt:
Hintergrundfarbe & Textfarbe der Funktionslinks bei ausgeklapptem Menü:
Code:
#fa_right.welcome #fa_menu #fa_welcome, #fa_right.notification > #fa_notifications {
  background-color: FARBCODE !important;
  color: FARBCODE !important;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.
ausgeklappte Menüs der Funktionslinks:

Hintergrundfarbe des ausgeklappten Begrüßungsmenüs ("Willkommen..."):
Code:
#fa_toolbar #fa_menulist {
  background-color: FARBCODE;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.
Linkfarbe & Rangfarbe im Begrüßungsmenü ("Willkommen..."):
Code:
/* Textfarbe der Links */
#fa_toolbar #fa_menulist a {
  color: FARBCODE !important;
}
/* Textfarbe des Rangs */
#fa_toolbar a#fa_ranktitle {
  color: FARBCODE !important;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein. Davon werden Ränge nicht beeinflusst, denen bereits mittels HTML im Rangnamen eine Textfarbe zugewiesen wurde. Wird als Farbe der Links z.B. Rot gewählt und als Farbe des Rangs Grün, sieht das Ergebnis so aus:
Textfarbe der Statistik im Begrüßungsmenü ("Willkommen..."):

Textfarbe der gesamten Statistik:
Textfarbe der gesamten Statistik:
Code:
#fa_toolbar #fa_usermenu table {
  color: FARBCODE;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.
Textfarbe der Statistik-Feldnamen (Beiträge, PNs, Bewertung):
Textfarbe der Feldnamen:
Code:
#fa_toolbar #fa_usermenu .first, #fa_toolbar #fa_usermenu .first + td {
  color: FARBCODE;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.
Textfarbe der Statistik-Feldinhalte:
Textfarbe der Feldinhalte:
Code:
#fa_toolbar #fa_usermenu .bold {
  color: FARBCODE;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.
Hintergrundfarbe des ausgeklappten Benachrichtigungsmenüs:
Code:
#fa_toolbar #fa_right #notif_list {
  background-color: FARBCODE !important;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.
Hintergrundfarbe neuer Benachrichtigungen im ausgeklappten Menü:
Code:
#fa_toolbar #fa_right #notif_list .unread {
  background-color: FARBCODE !important;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.
Textfarbe der Benachrichtigungen im ausgeklappten Menü:
Code:
/* Textfarbe alter Benachrichtigungen */
#fa_toolbar #fa_right #notif_list li .contentText {
  color: FARBCODE;
}
/* Textfarbe neuer Benachrichtigungen */
#fa_toolbar #fa_right #notif_list li.unread .contentText {
  color: FARBCODE;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein. Wird für alte Benachrichtigungen z.B. Grün gewählt und für neue Rot, sieht das Ergebnis so aus:
Linkfarbe der Benachrichtigungen im ausgeklappten Menü:
Code:
/* Linkfarbe alter Benachrichtigungen */
#fa_toolbar #fa_right #notif_list li div.contentText.ellipsis a {
  color: FARBCODE !important;
}
/* Linkfarbe neuer Benachrichtigungen */
#fa_toolbar #fa_right #notif_list li.unread div.contentText.ellipsis a {
  color: FARBCODE !important;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein. Wird für alte Benachrichtigungen z.B. Grün gewählt und für neue Rot, sieht das Ergebnis so aus:
Hintergrundfarbe & Textfarbe von "Alle Benachrichtigungen ansehen":
Code:
/* Hintergrundfarbe */
#fa_toolbar #fa_right #notif_list li.see_all {
  background-color: FARBCODE !important;
}
/* Textfarbe */
#fa_toolbar #fa_right #notif_list li.see_all a {
  color: FARBCODE !important;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein. Wird als Hintergrundfarbe z.B. Grün gewählt und als Textfarbe Rot, sieht das Ergebnis so aus:
Icon "Benachrichtigung löschen":

Icon ersetzen:
Code:
#fa_toolbar #fa_right #notif_list li a.delete {
  background-image: url("BILDURL") !important;
  background-position: 0 0 !important;
}
Bei "Bildurl" fügst du die URL zum neuen "Benachrichtigung löschen"-Button ein. Dieser kann Ausmaße von bis zu 30x30px besitzen. Hier der Vergleich zwischen dem Standardbutton und einem persönlichen Button:

Pfeilbuttons zum Ein- und Ausklappen

Pfeilbuttons ersetzen:
Code:
/* Pfeil zum Einklappen */
#fa_toolbar #fa_hide {
  background-image: url("BILDURL") !important;
  background-position: 0 0 !important;
}
/* Pfeil zum Ausklappen */
#fa_toolbar_hidden #fa_show {
  background-image: url("BILDURL") !important;
  background-position: 0 0 !important;
}
Bei "Bildurl" fügst du jeweils die URL der entsprechenden Pfeil-Grafik ein. Diese müssen Ausmaße von exakt 30x30px besitzen. Vorzugsweise sollten sie außerdem transparente Hintergründe besitzen.

Hier der Vergleich zwischen den Standardbuttons (oben) und persönlichen Buttons (unten):

Popup Echtzeitaktualisierung

Du kannst auch das Aussehen des Popups anpassen, das die Benachrichtigungen durch die Echtzeit-Aktualisierung anzeigt:

Du kannst entweder eine Hintergrundfarbe oder ein Hintergrundbild für das Popup festlegen.
Hintergrundfarbe & Transparenz:
Code:
#live_notif .fa_notification {
  background-color: FARBCODE !important; /* Hintergrundfarbe */
  opacity: 0.8 !important; /* Transparenz der Hintergrundfarbe */
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein. Bei der opacity-Eigenschaft fügst du einen Wert zwischen 0 (volle Transparenz) und 1 (keine Transparenz) ein. Achte dabei darauf, das Komma als Punkt anzugeben. Je niedriger die Kommastelle, desto höher ist der Grad der Transparenz. Beispiele:
0.4
0.8
Wird z.B. Rot als Hintergrundfarbe und eine Transparenz von 0.5 gewählt, sieht das Ergebnis so aus:
Hintergrundbild:
Code:
#live_notif .fa_notification {
  background-color: transparent !important;
  background-image: url("BILDURL") !important;
  opacity: 1 !important;
}
Bei "Bildurl" fügst du die URL zum Hintergrundbild ein. Dieses sollte Ausmaße von 330x60px besitzen. Die Transparenz des Popups ist dadurch außerdem entfernt. Wünschst du dennoch eine Transparenz, solltest du vorzugsweise eine teil-transparente Hintergrundgrafik verwenden.
Textfarbe & Linkfarbe:
Code:
/* Textfarbe Popup */
#live_notif .content.ellipsis {
  color: FARBCODE !important;
}
/* Linkfarbe Popup */
#live_notif .content.ellipsis a {
  color: FARBCODE !important;
}
Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.
Wird als Textfarbe z.B. Grün gewählt und als Linkfarbe Rot, sieht das Ergebnis so aus:
Hinweis-Icon ersetzen:
Code:
#live_notif .content.ellipsis {
  background-image: url("BILDURL") !important;
}
Bei "Bildurl" fügst du die URL zum neuen Hinweis-Icon ein. Dieses kann Ausmaße von bis zu 32x32px besitzen.

Der Bereich des Forumieren-Icons sowie Forumieren-Links darf nicht entfernt/unsichtbar gemacht werden!
Dadurch würde eine AGB-Verletzung vorliegen, die zur Sperre des Dienstes durch Forumieren führen kann.
Aus diesem Grund wird hier im Hilfeforum keine Auskunft erteilt, ob/wie dieser Bereich mittels CSS angesprochen werden kann (gilt auch für Veränderung der Textfarbe des Forumieren-Links etc.).

Ausgenommen davon ist selbstverständlich die Möglichkeit, diesen Bereich durch den Einsatz von Guthabeneinheiten kostenpflichtig zu entfernen/anzupassen:
Update vom 22.02.2013 : Toolbar Version 2.0 & Verbesserung der mobilen Version

Arrow Bei Fragen zu diesem Tutorial bzw. der Anpassung der Toolbar bitte statt des Forenversions-Präfixes das Präfix [Toolbar] im Thementitel angeben. Danke!

Arrow Hier findest du eine Übersicht sämtlicher Themen zur Toolbar:
http://hilfe.forumieren.com/search?search_keywords=*toolbar*

Viel Spaß mit der Toolbar! Very Happy

Liebe Grüße
Günther

Dieses Tutorial stammt von Günther.
Das Tutorial unterliegt dem Copyright von hilfe.forumieren.com.
Eine Veröffentlichung außerhalb von hilfe.forumieren.com ist nicht gestattet!

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten