[Tutorial] Das Aussehen der Toolbar anpassen

von Günther 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) Tuto* Tutorial - [Tutorial] Das Aussehen der Toolbar anpassen Arrow10

Bilder & Farben Tuto* Tutorial - [Tutorial] Das Aussehen der Toolbar anpassen Arrow10

Farben

Reiter "CSS Stylesheet"

Tuto* Tutorial - [Tutorial] Das Aussehen der Toolbar anpassen 09615110

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) Tuto* Tutorial - [Tutorial] Das Aussehen der Toolbar anpassen Arrow10

Module

Toolbar

Einstellungen: Farbe

Hintergrundbild:

Hintergrundbild Toolbar ausgeklappt:

Hintergrundbild Toolbar eingeklappt:

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) Tuto* Tutorial - [Tutorial] Das Aussehen der Toolbar anpassen Arrow10

Module

Toolbar

Einstellungen: Textfarbe

Tuto* Tutorial - [Tutorial] Das Aussehen der Toolbar anpassen 09615110

Suchfeld

Hintergrundfarbe/Hintergrundbild des Suchfeldes:

Du kannst entweder eine Hintergrundfarbe oder ein Hintergrundbild für das Suchfeld festlegen.

Hintergrundfarbe:

Hintergrundbild:

Suchicon Lupe:

Lupe entfernen:

Lupe ersetzen:

Textfarbe im Suchfeld:

Suchfeld entfernen:

Bereich "Austausch"

(teilweises) Entfernen:

Bereich komplett entfernen:

Facebook-Button entfernen:

Twitter-Button entfernen:

GooglePlus-Button entfernen:

MailClient-Button entfernen:

RSSFeed-Button entfernen:

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

Funktionslinks:

Kennzeichnung neuer Benachrichtigungen:

Hintergrundfarbe & Textfarbe der Funktionslinks bei ausgeklapptem Menü:

ausgeklappte Menüs der Funktionslinks:

Hintergrundfarbe des ausgeklappten Begrüßungsmenüs ("Willkommen..."):

Linkfarbe & Rangfarbe im Begrüßungsmenü ("Willkommen..."):

Textfarbe der Statistik im Begrüßungsmenü ("Willkommen..."):

Hintergrundfarbe des ausgeklappten Benachrichtigungsmenüs:

Hintergrundfarbe neuer Benachrichtigungen im ausgeklappten Menü:

Textfarbe der Benachrichtigungen im ausgeklappten Menü:

Linkfarbe der Benachrichtigungen im ausgeklappten Menü:

Hintergrundfarbe & Textfarbe von "Alle Benachrichtigungen ansehen":

Icon "Benachrichtigung löschen":

Icon ersetzen:

Pfeilbuttons zum Ein- und Ausklappen

Pfeilbuttons ersetzen:

Popup Echtzeitaktualisierung

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

Tuto* Tutorial - [Tutorial] Das Aussehen der Toolbar anpassen Tuto_t12

Du kannst entweder eine Hintergrundfarbe oder ein Hintergrundbild für das Popup festlegen.

Hintergrundfarbe & Transparenz:

Hintergrundbild:

Textfarbe & Linkfarbe:

Hinweis-Icon ersetzen:

Der Bereich des Forumieren-Icons sowie Forumieren-Links darf nicht entfernt/unsichtbar gemacht werden!

Tuto* Tutorial - [Tutorial] Das Aussehen der Toolbar anpassen Tuto_t22

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

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

Hier findest du eine Übersicht sämtlicher Themen zur Toolbar:
https://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!

Tuto* Tutorial - [Tutorial] Das Aussehen der Toolbar anpassen Helpmo10

	Neue Beiträge seit dem letzten Besuch.	
	Textbausteine des MODERATIONSTOOL	
	AB > PFAD > GENERATOR	
	FORUM > PFAD > GENERATOR	
	Unterstützung Lösungs-Probleme	
	Auffällige User	
	Der Runde Tisch	
	HÄUFIG GESTELLTE FRAGEN	