[Tutorial] Das Aussehen der Toolbar anpassen

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.

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.

Code:

#fa_search #fa_textarea {
  background-color: FARBCODE;
}

Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.

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.

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.

Code:

#fa_search #fa_textarea {
  color: FARBCODE;
}

Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.

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:

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.

Code:

#fa_toolbar #fa_menulist {
  background-color: FARBCODE;
}

Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.

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:

Code:

#fa_toolbar #fa_right #notif_list {
  background-color: FARBCODE !important;
}

Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.

Code:

#fa_toolbar #fa_right #notif_list .unread {
  background-color: FARBCODE !important;
}

Bei "Farbcode" fügst du einen Farbcode nach Wahl ein.

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:

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:

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:

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:

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):

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:

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.

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:

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.