WoltLab Community Forum

Dieser Thread soll anhand von Screenshots die Auswirkungen des Stil-Editors auf das Forum beschreiben.
Damit soll ermöglicht werden, eigene Stile zu erstellen. Die Screenshots sollen kein grafisches Kunstwerk sein, sondern die wichtigsten Funktionen des Stileditors verdeutlichen.
Bei Fragen und Anregungen schreibt mir einfach eine PN. Die nächsten Lektionen werden in den nächsten Tagen erstellt.

Lektion 1: Stilübersicht

Im ACP werden über "Darstellung - Stile - Stile auflisten" alle vorhandenen Stile angezeigt.
Hier hat man verschiedene Möglichkeiten:

1. Stile auflisten: Hier werden alle installierten Stile aufgelistet.
2. Stil hinzufügen: Einer neuer Stil kann erstellt werden.
3. Stil importieren: Ein exportierter Stil (z.B. von der WCom) kann über diesen Menüpunkt importiert und im Forum verwendet werden.
4. Bearbeiten: Der entsprechende Stil wird im Stileditor bearbeitet und kann den eigenen Wünschen angepasst werden.
5. Löschen: Der Stil wird gelöscht.
6. Exportieren: Der Stil kann exportiert werden, um z.b. anderen Nutzern der WCom bereitgestellt zu werden.
7. Zum Standard machen: Dieser Stil wird zum Standardstil deklariert.
   
8. Stil aktivieren/deaktivieren (Standardstil wird blau angezeigt).

Lektion 2: Allgemeine Stil-Einstellungen

Zu finden im Stil-Editor unter Global - Allgemein



Darstellung
Die Werte unter dem Punkt Darstellung wirken sich auf den rot umrandeten Bereich aus.
Ausrichtung: Im Screenshot wurde die Zentrierte Ausrichtung gewählt. Möglich ist außerdem rechts oder links.
Breite: Es gibt 2 Möglichkeiten.

• Flexibel: Die Forenbreite passt sich dem Browser an. In unserem Fall ist das Forum mindestens 760 Pixel breit, aber höchstens 80% der der zur Verfügung gestellten Breite des Browsers. Je nach Auflösung wird das Forum dann dargestellt.
  
• Statisch: Hier kann eingestellt werden, dass das Forum z.B. immer 760px breit sein soll. Das Forum passt sich dann nicht unterschiedlichen Auflösungen an.

Templates
Auf die hier eingestellte Templategruppe greift die Seite zurück

Speicherort für Grafiken
Werden im Stil Grafiken benutzt, empfiehlt es sich, dafür einen neuen Ordner zu erstellen und alle Grafiken in diesem abzuspeichern. Damit bei der Erstellung des Stils nicht immer der gesamte Pfad angegeben werden muss, kann dieser hier angegeben werden um später nur noch den Dateinamen einzutragen.
Z.B. images/meinstil/
Die Grafiken müssen dann im Ordner wcf/images/meinstil/ gespeichert werden.

Favoriten-Icon
Ein Favoriten-Icon wird z.B. bei den Lesezeichen (Bookmarks) angezeigt, aber auch in den Tabs des Browsers. Hier kann die gewünschte Farbe ausgewählt werden. Alternativ kann es hier ausgeschaltet werden, wenn man ein eigenes Favoriten-Icon erstellen und verwenden will.

Lektion 3: Allgemeine Seiteneigenschaften (Header, Logo, Hintergrund)

Zu finden im Stil-Editor unter Global - Seite



Seitenkopf
Hier kann der Seitenkopf (Header) des Forums angepasst werden.
Es kann eine einfache Farbe angegeben werden, oder eine Grafik verwendet werden.
Die Grafik kann unterschiedlich ausgerichtet werden und Horizontal bzw. Vertikal wiederholt werden.

Logo
Hier können die Einstellungen zum Logo getätigt werden. Auch hier kann die Ausrichtung bestimmt werden.
Das Logo ist Teil des Seitenkopfes. Die Abstände beziehen sich also auf die Ränder des Seitenkopfes.

Globaler Titel
Wenn man z.B. kein Logo verwenden möchte, kann man sich im Seitenkopf auch den globalen Titel einblenden lassen.
Auch hier bestehen unterschiedliche Möglichkeiten der Anpassung.

Hintergrund
Für den Seitenhintergrund kann ein Farbcode und/oder eine Grafik angegeben werden.

Lektion 4: Kästen

Zu finden im Stil-Editor unter Global - Kästen

Die Einstellungen in diesem Bereich wirken sich überall im Forum aus. Alle hier aufzuzählen wäre wohl zuviel.
Auch werde ich hier nicht jeden einzelnen Bereich aufgreifen. Ich habe einige Screenshots gemacht, die aufzeigen sollen, wie sich einige Bereiche des Forums verändern. Dazu habe ich die Kästen mit unterschiedlichen Farben versehen, um sie besser voneinander unterscheiden zu können.

Kasten 1: verschiedene Blautöne
Kasten 2: Grüntöne
Kasten 3: gelb-orange-rot
Siehe hier:



Anhand der folgenden Screenshots wird deutlich, wo welche Kästen sich auswirken. Ich habe auch für jeden Kasten Schriftfarben und Verweisfarben angelegt. Wenn man überall die gleiche Schriftfarbe verwenden möchte, kann dies leichter über den Bereich "Text" des Stil-Editors erreicht werden.
Kasten 3 wird auch für Hover-Effekte genutzt.

Startseite:


Forenübersicht:


Threadansicht:


Profileinstellungen:


Bei Fragen einfach mir schreiben. Ich werde dann den Thread hier erweitern.
Tipp: Test-Stil anlegen mit sehr unterschiedlichen Farben. Dann kann man schnell sehen, wo sich was, wie auswirkt.

Lektion 5: Rahmen

Zu finden im Stil-Editor unter Global - Rahmen

Rahmenkopf
Auch hier habe ich wieder Screenshots erstellt, die am besten zeigen wo sich dieser Bereich auswirkt. Für den Hintergrund habe ich nicht nur eine Farbe gewählt, sondern eine Grafik mit einem so genannten Verlauf erstellt. Hierdurch entsteht ein interessanter Effekt.

Solche Grafiken kann man leicht mit einem Grafikprogramm erstellen, z.B. Gimp oder Photoshop.
Alternativ kann man hier auch online solche Grafiken generieren lassen:
http://lab.rails2u.com/bgmaker/

Mein Verlauf geht von Farbwert "#6699FF" zu "#0033CC". Aus diesem Grund habe ich als Hintergrundfarbe "0033CC" gewählt.


Rahmen
Wie man auf dem oberen Screenshot erkennt, habe ich für den Außenrahmen schwarz und für den Innenrahmen rot gewählt.
Somit kann man gut erkennen wo sich den Rahmen-Einstellungen auswirken.
Für die Trennlinien habe ich ein helles Grün gewählt.

Bei den Rahmen kann man auch den Stil einstellen, wie z.b. solid, dotted oder dashed.
Hier eine Übersicht wie sich die verschiedenen Stile auswirken:
http://jendryschik.de/wsdev/einfuehrung/…ll#border-style

Startseite:


Profil:


Threadansicht:

Lektion 6: Formulare

Zu finden im Stil-Editor unter Global - Formulare

Ein Formular besteht aus Text, dem Hintergrund und dem Rand. Bei allen 3 Eigenschaften kann man die Farbe einstellen. Dabei gibt es 2 Zustände:

Normaler Zustand und Fokus. Wenn man z.B. sein Profil bearbeitet und noch in kein Feld geklickt hat, werden die Farben von "Normaler Zustand" angezeigt (Text, Hintergrund und Rand). Sobald aber in ein Formularfeld geklickt wird, werden die Farben von "Fokus" angezeigt (Text, Hintergrund und Rand).

Text
Hier kann außer den Farben noch die Schriftart und die Schriftgröße für Formulare festgelegt werden.

Hintergrund
Hier kann die Hintergrund-Farbe eingestellt werden.

Rand
Außer den Farben, kann hier auch die Stärke und die Art des Randes bestimmt werden.

Hie nun die Einstellungen im ACP und die Auswirkungen auf das Forum:



Threadansicht:


Antwort erstellen:


Profil bearbeiten:


Erweiterte Suche:

Lektion 7: Textarten und Verweise

Zu finden im Stil-Editor unter "Text - Textarten" und "Text - Verweise"

Neuer Tag, neue Lektion
Diesmal geht es um Textarten und Verweise.
In diesen beiden Bereichen kann man die Schrift des Forums und Verweise einstellen.

Achtung: Wurden bei "Global - Kästen" für die einzelnen Kästen schon Schrift- und Verweisfarben vergeben, werden diese in den Kästen verwendet.

Sind bei den Kästen aber noch keine Farben angegeben worden, wirken sich die Einstellungen von "Textarten" und "Verweise" auch in den Kästen aus.
In meinen Screenshots habe ich bei den Kästen keine Farben definiert. Deshalb wirken sich die vorgenommenen Einstellungen auf alle Bereiche aus.

Textarten
Texte
In diesem Bereich kann die Schriftart, Größe und Farbe angegeben werden.
Hinweis: Die hier angegebene Schriftart wird so gut wie im ganzen Forum verwendet!

Überschrift
Hier kann die Seitenüberschrift angepasst werden. Diese befindet sich unterhalb des Seitenkopfes.
Wird hier nicht eine extra Farbe eingestellt, wird die Farbe von "Normaler Zustand" (aus dem Bereich Texte) verwendet.
Bei Stil kann man die Überschrift normal, fett, kursiv oder fett kursiv anzeigen lassen.

Verweise
Verweise
In diesem Bereich werden interne Verweise angepasst. Z.B. zu einem Thema innerhalb des Forums.

Externe Verweise
Hier werden externe Verweise konfiguriert. Also zu allen Seiten außerhalb des Forums (z.B. www.tagesschau.de).
Werden für die externen Verweise keine keine extra Farben verwendet, werden externe Verweise genau wie interne Verweis angezeigt.

Aktive Verweise
Die hier angegebene Farbe wird angezeigt, wenn man auf den Link mit der Maus klickt.

Normaler Zustand: Diese Farbe wird normal angezeigt.
Hover: Fährt man mit der Maus über den Verweis, wird die hier angegebene Farbe angezeigt.

Einstellungen im ACP:
Textarten:


Verweise:


Auswirkungen im Forum:
Startseite:


Themenansicht:


Profil:

Lektion 8: Buttons

Zu finden im Stil-Editor unter "Buttons - Kleine Buttons" und "Buttons - Große Buttons"

Diese Lektion gilt sowohl für kleine, als auch große Buttons, da beide Buttonarten vom Prinzip her gleich aufgebaut sind.

Jeder Button besteht aus einer Hintergrundfarbe (oder Hintergrundgrafik), einem Innenrahmen, einem Außenrahmen und der Beschriftung.
Auch hier gelten wieder die 2 Zustände (Normaler Zustand und Hover (wenn die Maus über den Button bewegt wird)).

Beschriftung
Wird die Beschriftung deaktiviert, werden nur die Icons angezeigt.
Ansonsten gibt man hier eine Farbe für den Normalzustand und eine Farbe für Hover an.

Außenrahmen
Hier können sowohl die Stärke und die Art , als auch die Farben des Außenrahmens eingestellt werden.

Innenrahmen
Hier können sowohl die Stärke und die Art , als auch die Farben des Innenrahmens eingestellt werden.

Hintergrundfarbe
Hier wird die Hintergrundfarbe des Buttons eingestellt. Alternativ kann auch eine Hintergrundgrafik benutzt werden.

Hintergrundgrafik
Durch Einsatz einer Hintergrundgrafik können die Buttons zusätzlich unterschiedliche Effekte erhalten.
Z.B. durch eine Grafik mit Farbverlauf.
Als Beispiel kann man den Stil "Blue Sunrise" untersuchen.


Kleine Buttons:



Große Buttons:


Einstellung im ACP für die großen Buttons:


Ergebnis:

Lektion 9: Menüs - Hauptmenü

Zu finden im Stil-Editor unter Menüs - Hauptmenü

Kommen wir nun zum Hauptmenü.
Das Hauptmenü besteht im Normalfall aus Forum, Mitglieder und Hilfe. Je nach Erweiterung gesellen sich weitere Punkte hinzu.
Die Leiste in der sich das Menü befindet nennt man Buttonleiste.



Buttons
Her hat man die Möglichkeit, dass ganze Menü auszurichten. Standardmäßig befindet es sich auf der linken Seite, kann aber auch zentriert oder nach rechts verschoben werden.
Eine weitere Möglichkeit ist hier, dass man die Buttonleiste transparent setzt. Das bedeutet, dass der Seitenkopf sichtbar wird.
Wenn man die Transparenz für Buttonleiste aktiviert, kann man noch entscheiden, ob die Trennlinie angezeigt wird oder nicht (die Trennlinie umrandet die gesamte Buttonleiste).

Bei der Beschriftung und der Hintergrundfarbe gibt es 4 Zustände. Diese will ich kurz erläutern:
Normaler Zustand: Weder die Maus befindet sich über dem Button, noch wird die Seite angezeigt die der Button aufruft.
Hover: Wird mit der Maus über einen Button mit "Normaler Zustand" gefahren, verändert sich der Zustand zu "Hover"
Aktiv: Wenn z.B. die Hilfe aufgerufen wird, ist der Hilfe-Button "Aktiv".
Aktiv Hover: Wird jetzt noch mit der Maus über den momentan aktiven HIlfe-Button gefahren, verändert sich der Zustand zu "Aktiv Hover"!

Beschriftung
Wenn die Beschriftung der Buttons im Menü nicht erwünscht wird, kann das hier abgestellt werden. Es werden dann nur die entsprechenden Icons angezeigt.
Ansonsten kann man hier die Farbe für die Button-Beschriftung festlegen.

Hintergrundfarbe
Hier legt man die Hintergrundfarbe für die Menü-Buttons fest. Alternativ kann man auch eine Hintergrundgrafik für die Menü-Buttons verwenden.

Hintergrundgrafik
Es können hier 2 Grafiken angegeben werden. Zum einen die normale Grafik und zum anderen ein Hover Grafik.
Die Hover Grafik wird auch angezeigt, wenn der Button aktiv ist. Wenn die Hintergrundgrafik verwendet wird, spielt die Hintergrundfarbe keine Rolle mehr (außer die Grafiken können nicht geladen werden).

In meinem Beispiel verwende ich Grafiken mit einem leichten Verlauf.
Normal:

Hover:


Einstellungen im ACP:


Ergebnis im Forum:

Lektion 10: Menüs - Tabs und Tab-Buttons

Zu finden im Stil-Editor unter "Menüs - Tabs" und "Menüs - Tab-Buttons"

Kommen wir nun zu den Tabs und den Tab-Buttons. Ich fasse sie in dieser Lektion zusammen, da sie im Forum zusammen auftreten
Tabs und Tab-Buttons befinden sich bei den Profil-Einstellungen und bei der Mitgliederliste:




Sowohl bei den Tabs, als auch bei den Tab-Buttons gibt es die Bereiche Beschriftung und Hintergrundfarbe.
Auch hier gibt es wieder die 4 verschiedenen Zustände "Normaler Zustand, Hover, Aktiv, Aktiv Hover" (Erklärung siehe Lektion 9).
Beachte: Hinter den Tab-Buttons und dem aktive Tab befindet sich die Rahmenkopf-Hintergrundfarbe (Global - Rahmen - Rahmenkopf)
Wenn z.B. bei den Tab-Buttons bei "Normaler Zustand" keine Farbe angegeben wird (), scheint die Hintergrundfarbe durch.

Tabs
Bei den Tabs kann man außer der Beschriftung und den Hintergrundfarben eine Hintergrundgrafik (normal und Hover) einbinden.

Tab-Buttons
Bei den Tab-Buttons kann zusätzlich noch der Außenrahmen bearbeitet werden.

Auch hier habe ich wieder ein Beispiel vorbereitet, um die Einstellmöglichkeiten zu veranschaulichen.
Zuvor habe ich dem Rahmenkopf (Global-Rahmen-Rahmenkopf) ein helles grün zugewiesen (Farbcode: #0f0).

Einstellungen im ACP:



Ergebnis:

Lektion 11: Menüs - Spaltenköpfe

Zu finden im Stil-Editor unter Menüs - Spaltenköpfe

Spaltenköpfe werden überall angezeigt, wo Daten tabellarisch dargestellt werden. Z.B. bei der Mitgliederliste, oder der Forenübersicht:


Beschriftung
Hier wird die Farbe der Spaltenkopf-Beschriftung eingestellt. Auch hier kann wieder für jeden der 4 Zustände eine andere Farbe angegeben werden.

Unterstreichung
Der Spaltenkopf hat eine Unterstreichung. Die Farbe kann hier eingestellt werden.
Auch der Stil der Unterstreichung kann hier verändert werden.

Hintergrundfarbe
Hier wird die Hintergrundfarbe der Spaltenköpfe eingestellt.

Hintergrundgrafik
Alternativ zur Hintergrundfarbe kann auch eine Grafik benutzt werden.

Hier nun ein Beispiel:
Achtet nicht auf die Farben. Die Unterstreichung hab ich extra hervorgehoben, damit man sieht wo sie sich befindet.

Einstellung im ACP:


Auswirkung im Forum:
Forenübersicht:


Mitgliederliste:

Lektion 12: Menüs - Extras

Zu finden im Stil-Editor unter Menüs - Extras

In diesem Bereich wird z.B. das Listenmenü bei den privaten Nachrichten konfiguriert.
Die Screenshots zeigen einige Einsatzbereiche. Nun aber erst die Erklärung.

Dropdown- & Listenmenüs
Verweisfarben
Hier kann die normale Verweisfarbe und die Hover-Verweisfarbe eingestellt werden.

Hintergrundfarben
Auch bei der Hintergrundfarbe gibt es die zwei Zustände.

Hintergrundgrafik
Alternativ können auch hier wieder Hintergrundgrafiken angegeben werden.

Ausgewählte Elemente
Beschreibung folgt!

Einstellungen im ACP:


Auswirkungen im Forum:
Private Nachrichten:


Profil:


Suche:


Moderation:

Lektion 13: Zusätzliche CSS-Deklarationen und Kommentare

Zu finden im Stil-Editor unter "Erweitert - Zusätzliche CSS-Deklarationen" und "Erweitert - Kommentare"

Ich bin mit meinem Tutorial zum Stil-Editor nun fast zu Ende. Ich hoffe, dass es einen guten Einstieg zum Thema "Stile erstellen" bietet.

Über den Stileditor kann man sehr viel komfortabel einstellen. Manche Dinge lassen sich über den Editor nicht einstellen. Hier hat man aber die Möglichkeit, zusätzliche CSS-Deklarationen anzugeben, um die gewünschte Veränderung zu erreichen.

Einige Themen werden im Tutorial-Forum erklärt:
http://community.woltlab.com/forum/index…oard&boardID=24
Speziell dieser Thread soll nach und nach häufig gefragte Stil-Anpassungen erklären, die nicht über den Editor erreicht werden können:
Stile erstellen - Häufige Fragen

Falls hier keine Lösung gefunden wird, kann man in diesem Forum die Frage stellen (bitte vorher noch Suchfunktion benutzen):
http://community.woltlab.com/forum/index…oard&boardID=11

Zusätzliche CSS-Deklarationen
Hier gibt es 2 Felder um zusätzliche CSS-Deklarationen einzugeben. Die zusätzlichen CSS-Deklarationen werden auch beim Stil-Export mitgenommen. Es gibt zur besseren Übersicht zwei Eingabefelder. Ein Feld kann z.B. zum Testen von neuem CSS-Code verwendet werden, während in das andere Feld der Code geschrieben wird bei welchem man sich sicher ist.

Kommentare
Hier kann ein Kommentar zum Stil gespeichert werden, welcher auch mit exportiert wird.


Hinweis: Lektion 1 wird noch ergänzt

So, und nun danke fürs Lesen