You are not logged in.

Dear visitor, welcome to WoltTutorials. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Stil Editor und dessen Auswirkungen

Christoph Tuesday, April 5th 2011, 2:18pm


2

Global->Allgemein

Christoph Tuesday, April 5th 2011, 2:28pm

Darstellung:
  • Ausrichtung
    Hier könnt ihr einstellen wo der Content des Forums ist, möglich ist hier links, zentriert und rechts.
  • Breite
    Bei dieser Option könnt ihr die Breite des Forums einstellen, möglich sind flexibel und statisch.
Templates:
  • Templategruppe
    Hier könnt ihr die Templategruppe auswählen die euer Stil benutzen soll, die Templateverwaltung selber ist nur in der kostenpflichtigen Burning Board Version vorhanden.
Speicherort für Icons *:
  • Order
    Im WCF1.1 ist es möglich, dass ihr eurem Stil einen eigenen Icon Ordner zuweisen könnt. Dieser befindet sich dann im icon Ordner (wbb/icon, wcf/icon, andere Endanwendung/icon...). Es ist nicht notwendig das ihr hier alle Icons hinzufügt, denn das System ist so ausgelegt, dass es sich die Icons die nicht im eigenen Icon Ordner vorhanden sind, aus dem Standard Ordner holt. Möchtet ihr also einen Stil mit eigenen Icons anbieten, reicht es aus, dass ihr nur die geänderten Icons in euren Icon Ordner packt.
Speicherort für Grafiken:
  • Ordner
    Hier gebt ihr den Ordner an, indem sich die Grafiken eures Stils befinden, dieser wird im wcf/images Ordner erstellt. Gebt hier am besten einen aussagekräftigen Namen an, denn "stil" sagt nichts über den verwendeten Stil aus und wenn andere Benutzer ihren Grafikenordner auch so nennen können sich Grafiken überschreiben.
Favoriten-Icon:
  • Hier könnt ihr die mitgelieferten Favoriten Icons des Burningboards aktivieren und deaktiveren, sowie ein farblich passendes zum Stil auswählen.


* WCF1.1 Feature (WBB3.1, WBBLite2.1)

3

Global->Seite

Christoph Tuesday, April 5th 2011, 2:37pm



Seitenkopf:
  • Seitenkopf-Farbe
    Hier könnt ihr die Farbe des Headers oder im Stil Editor genannt "Seitenkopf" einstellen, in meinem Beispiel habe ich dem eine grüne Farbe verpasst.
  • Höhe
    Hier könnt ihr die Höhe des Seitenkopfes einstellen, mögliche Angaben sind px, %, em und pt.
  • Hintergrundgrafik verwenden
    Aktiviert ihr diese Option könnt ihr in den Seitenkopf eine Grafik einfügen.
    • Grafik
      Hier gebt ihr lediglich den Dateinamen an, dass System holt sich dann dieses Bild aus dem Ordner den ihr unter "Global->Allgemein" beim Punkt "Speicherort für Grafiken" angegeben habt.
    • Ausrichtung
      Hier habt ihr die Möglichkeit die Ausrichtung des Bildes anzugeben, möglich sind hier links, zentriert und rechts.
    • Wiederholen
      Mit dieser Option könnt ihr einstellen ob eure Grafik sich wiederholt (auch bekannt als "repeat"), möglich sind hier horizontal und vertical).
  • Logo
    Hier könnt ihr im Seitenkopf eine Grafik als Logo verwenden, wenn ihr die Option "Einheitliches Logo verwenden" nicht benutzt wird das Standard "WoltLab Burning Board Logo" benutzt, aktiviert ihr die Option habt ihr die Möglichkeit euer eigenes Icon zu verwenden. Nach aktivieren der Option einfach im Feld den Dateinamen eingeben, bsp: logo.png.
  • Ausrichtung
    Möglichkeiten zur Ausichten des Logos sind links, zentriert und rechts.
  • Abstand
    Hier könnt ihr euer Logo besser positionieren, dies geschieht mit den Feldern oben, rechts oder links. Hier könnt ihr einfach entsprechend die Werte angeben und dann die Einheit auswählen (px, pt, %, em). Auch negativ Werte (bsp: -10px) sind möglich.
Globaler Titel:
  • Globalen Titel einblenden
    Mit aktivieren dieser Option könnt ihr wenn ihr euch entschließt kein eigenes Logo zu verwenden einen globalen Titel einblenden. Dieser nimmt den Wert aus dem ACP Menüpunkt "System->Optionen->Allgemein->Seite->Titel der Seite". Der globale Titel passt sich daher immer an die Endanwendung in der man sich befindet an.
    • Schrift
      Hier könnt ihr die Schrift des globalen Titels anpassen.
      • Schriftart
        Hier könnt ihr aus kleinen Auswahl von Schriftarten euren globalen Titel anpassen (bsp: Arial, Verdana...)
      • Stil
        Hier passt ihr den Stil des globalen Titels an, möglich sind: normal, fett, kursiv und fett kursiv.
      • Größe
        Hier könnt ihr die Größe des globalen Titels definieren (px, pt, %, em).
    • Farbe
      Hier könnt ihr entsprechend dem globalen Titel eine eigene Farbe verpassen, durch aktivieren dieser Option könnt ihr den Farbcode angeben (bsp: #ff0000 für ein kräftiges rot), oder entsprechend den colorPicker benutzen und aus einer vordefinierten Anzahl von Farben eine passende auswählen.
    • Ausrichtung
      Hier könnt ihr die Ausrichtung des Titels ändern, möglich sind links, zentriert und rechts
    • Abstand
      Mit dieser Option könnt ihr entsprechend den Titel positionieren, möglich sind oben, rechts und links mit den Angaben: px, pt, %, em.
Hintergrund:
  • Farbe
    Hier definiert ihr die Farbe des Hintergrunds der Seite, in meinem Beispiel (Bild oben) ist dies ein grau. Ihr könnt hier entsprechend den Farbwert angeben (#d5d5d5), oder den colorPicker nutzen.
  • Hintergrundgrafik verwenden
    • Grafik
      Hier könnt ihr eurer Seite ein Hintergrundbild zuweisen, einfach den Dateinamen angeben (bsp: background.png).
    • Hintergrundgrafik fixieren (bewegt sich nicht mit)
      Hiermit fixiert ihr die Grafik, wenn ihr scrollt bleibt das Bild fest und bewegt sich nicht mit.
    • Ausrichtung
      Hier könnt ihr die Ausrichtung der Hintergrundgrafik festlegen, möglich ist horizontal (links, zentriert, rechts) und vertical (oben, zentriert und unten).
    • Wiederholen
      Hier habt ihr die Möglichkeit die Grafik wiederholbar zu machen, möglich ist horizontal und vertical.
  • Seitenrahmen verwenden *
    Seit dem WCF1.1 (WBB3.1, WBBLite2.1) gibt es die Möglichkeit einen Seitenrahmen dem Stil zuzuweisen.
    • Hintergrundfarbe
      Hier könnt ihr dem Seitenrahmen eine Hintergrundfarbe zuweisen, einfach wie schon einmal erwähnt per Farbcode oder dem colorPicker.
    • Rahmen
      Hier weißt ihr dem Seitenrahmen einen Rahmen (bekannt als border)
      • Stärke
        Hier gebt ihr die Stärke des Rahmens an, mögliche Optionen sind, px, em, % und pt.
      • Stil
        Hier weißt ihr dem Rahmen einen Stil zu wie dottet (gestrichelt), solid (reiner Rahmen) usw.
      • Farbe
        Und hier entsprechend die Farbe des Rahmens
    • Abstand
      • Außenabstand (vertikal) Hiermit schiebt sich der komplette Content von oben runter.
      • Innenabstand (horizontal)
        Hiermit schiebt sich der eigentliche Content im Rahmen zusammen (links und rechts), es entsteht somit eine Lücke zwischen Rahmen und Content.

      • Innenabstand (vertikal)
        Hiermit schiebt sich der eigentliche Content im Rahmen zusammen (oben und unten), es entsteht somit eine Lücke zwischen Rahmen und Content.
      Ein Beispiel wie das ganze aussehen könnte, findet ihr im folgendem Bild.
* WCF1.1 Feature (WBB3.1, WBBLite2.1)
Christoph has attached the following image:
  • StyleEditorGlobalGeneral02.jpg

4

Global->Kästen

Christoph Tuesday, April 5th 2011, 4:58pm

Kasten 1, Kasten 2 und Kasten 3 findet man im Burning Board an vielen Stellen, auf der Forenübersicht, Themenübersicht, im Profil und viele andere Seiten. Kasten 1 wird auch container-1 genannt.



Kasten 1 - Kasten 4:
  • Hintergrundfarbe
    Hier definiert ihr die Farbe des ersten Kastens (container-1)
  • Schriftfarben
    Hier werden die Schriftfarbe des Kasten 1 definiert.
    • Eigene Schriftfarben verwenden
      Hier könnt ihr die Textfarbe und Zweite Textfarbe definieren.
  • Linkfarben
    Hier werden die Linkfarbe des Kasten 1 definiert.
    • Eigene Linkfarben verwenden
      Hier könnt ihr die Linkfarbe und Hover-Linkfarbe definieren.
Kasten 1 und Kasten 2 findet an Stellen Platz wo die Hintergrundfarbe abgewechselt wird. Kasten 3 kommt im Profil in der Sidebar, in der Beitragsansicht (Sidebar) und auch u.A. beim Hovern der Themen in der Übersichtsseite zum Einsatz, es können auch noch an viele andere Stellen auftauchen. Kasten 4 selber wird zum Beispiel in der Zitat Box im Editor, sowie in einem Beitrag verwendet.

5

Global->Rahmen

Christoph Tuesday, April 5th 2011, 5:18pm



Der Rahmenkopf auch containerHead genannt, wird an vielen Stellen benutzt, wie im subTabMenu usw.

Rahmenkopf:
  • Schriftfarben
    • Textfarbe
      Hier definiert ihr die Schriftfarbe des Rahmenkopfes, im Burning Board ist dies Beispiel die Beschreibung von Kategorien uvm..
    • Linkfarben
      Hier werden die Links des Rahmenkopfes definiert.
  • Hintergrundfarbe
    Hier wird die Farbe des Hintergrunds definiert.
  • Hintergrundgrafik verwenden
    • Hintergrundgrafik
      Hier entsprechend den Namen der Grafik angeben die verwendet werden soll.



Gelb ist der Außenrahmen, Pink der Innenrahmen und Grün die Trennlinie (wurde hier auf diesem Bild nicht benutzt).

Rahmen:
  • Außenrahmen
    • Stärke
      Hier wird die Stärke des Rahmens definiert, möglich ist %, em, pt und px.
    • Stil
      Hier wird die Stilart des Rahmens definiert, bsp: solid, dotted usw.
    • Farbe
      Hier wird die Farbe des Außenrahmens definiert.
  • Innenrahmen
    • Farbe
      Hier wird die Farbe des Innenrahmens definiert.
  • Trennlinien
    • Stärke
      Hier wird die Stärke des Rahmens definiert, möglich ist %, em, pt und px.
    • Stil
      Hier wird die Stilart des Rahmens definiert, bsp: solid, dotted usw.
    • Farbe
      Hier wird die Farbe der Trennlinie definiert.

Die Trennlinie wird zum Beispiel im Profil verwendet, Beispiel wäre "Über mich" Feld.

6

Global->Formulare

Christoph Tuesday, April 5th 2011, 5:28pm



Text:
  • Schrift
    • Schriftart
      Hier wird die Schriftart der Formulare definiert, Beispiel Verdana, Arial usw.
    • Größe
      Hier wird die Schriftgröße von Formulartext definiert.
  • Farben
    • Normaler Zustand
      Hier definiert ihr die Textfarbe von Formularen.
    • Focus
      Hier wird die Schriftfarbe des Textes von Formularen definiert, wenn ihr in ein Formular geklickt habt.
Hintergrund:
  • Farben
    • Normaler Zustand
      Hier definiert ihr die Hintergrundfarbe von Formularen.
    • Focus
      Hier wird die Hintergrundfarbe von Formularen definiert, wenn ihr in ein Formular geklickt habt.
Rand:
  • Eigenschaften
    • Stärke
      Hier wird die Stärke des Rahmens definiert, möglich ist %, em, pt und px.
    • Stil
      Hier wird die Stilart des Rahmens definiert, bsp: solid, dotted usw.
  • Farben
    • Normaler Zustand
      Hier definiert ihr die Hintergrundfarbe von Formularen.
    • Focus
      Hier wird die Hintergrundfarbe von Formularen definiert, wenn ihr in ein Formular geklickt habt.

7

Text->Textarten

Christoph Tuesday, April 5th 2011, 5:51pm



Texte:
  • Schrift
    • Schriftart
      Hier wird globale Schriftart definiert, Beispiel Verdana, Arial usw.
    • Normale Größe
      Hier definiert ihr die Größe der normalen Schriftgröße.
    • Kleine Größe
      Hier definiert ihr die Größe der kleinsten Schriftgröße.
    • Zeilenhöhe
      Hier definiert ihr die Zeilenhöhe die zwischen mehrzeiligen Texten ist.
  • Farben
    • Normaler Zustand
      Hier definiert ihr die Schriftfarbe des normalen Zustandes der Schrift, zum Beispiel die Menüpunkte im userPanel (Angemeldet als...), die Brotkrümeln (breadCrumb), Datum/Uhrzeit
    • Zweite Textfarbe
      Hier muss ich passen, habe bis jetzt auf die schnelle keine Stelle gefunden wo diese Zeile verwendet wird.



Überschrift:
  • Schrift
    • Schriftart
      Hier wird globale Schriftart definiert, Beispiel Verdana, Arial usw.
    • Stil
      Hier wird die Stilart der Schrift definiert, bsp: normal, fett usw.
    • Größe
      Hier definiert ihr die Größe der Schrift.
  • Farbe
    • Eigene Farbe verwenden
      Hier definiert ihr die Farbe der Überschrift.

8

Text->Links

Christoph Wednesday, April 6th 2011, 12:14pm



Links:
  • Farben
    • Normalzustand
      Hier könnt ihr die Farbe der Links definieren, hier bitte beachten das sich dies nicht auf alle Links auswirkt, denn z.B. beim Punkt "Kasten", kann man auch eigene Linkfarben definieren.
    • Hover
      Hier definiert ihr die Hover Farbe der Links.

Externe Links:
  • Farben (Eigene Linkfarben verwenden=
    Das selbe wie bei den Links, nur ist diese Option zuständig für externe Links.
    • Normalzustand
      Hier könnt ihr die Farbe der Links definieren, hier bitte beachten das sich dies nicht auf alle Links auswirkt, denn z.B. beim Punkt "Kasten", kann man auch eigene Linkfarben definieren.
    • Hover
      Hier definiert ihr die Hover Farbe der Links.

Aktive Links:
  • Aktive Links verwenden
    • Farbe
      Hier definiert ihr die aktive Link Farbe. Dies wird sichtbar wenn ihr auf einen Link klickt.

9

Buttons->Kleine Buttons

Christoph Wednesday, April 6th 2011, 12:22pm



Beschriftung:
  • Buttonbeschriftung anzeigen -> Linkfarben
    • Normaler Zustand
      Hier definiert ihr die Schriftfarbe der kleinen Buttons, auch smallButtons genannt. Diese sind zum Beispiel in der Themenansicht die kleinen Buttons (Beitrag bearbeiten...).
    • Hover
      Hier definiert ihr die Farbe des Hovers.
Außenrahmen:
  • Eigenschaften
    • Stärke
      Hier definiert ihr die Rahmen dicke der kleinen Buttons, mögliche Werte sind px, em, pt und %.
    • Stil
      Hier definiert ihr die Art des Rahmens, Beispiele sind: dotted, solid usw.
  • Farben
    • Normaler Zustand
      Hier wird die Farbe des Außenrahmens des Buttons definiert.
    • Hover
      Und hier die Hover Farbe des Außenrahmens.
Innenrahmen:
  • Eigenschaften
    • Stärke
      Hier definiert ihr die Rahmen dicke der kleinen Buttons, mögliche Werte sind px, em, pt und %.
    • Stil
      Hier definiert ihr die Art des Rahmens, Beispiele sind: dotted, solid usw.
  • Farben
    • Normaler Zustand
      Hier wird die Farbe des Innenrahmens des Buttons definiert.
    • Hover
      Und hier die Hover Farbe des Innenrahmens.
Hintergrundfarbe:
  • Farben
    • Normaler Zustand
      Hier wird die Farbe des Hintergrundes der Buttons definiert.
    • Hover
      Und hier die Hover Farbe des Hintergrundes.
Hintergrundbild:
  • Hintergrundgrafik verwenden
    • Normale Grafik
      Hier könnt ihr für die Buttons ein Hintergrundbild definieren, hier einfach den Dateinamen eingeben.
    • Hover-Grafik
      Hier könnt ihr für die Buttons ein Hover Hintergrundbild definieren, hier einfach den Dateinamen eingeben.


10

Buttons->Große Buttons

Christoph Wednesday, April 6th 2011, 12:28pm



Beschriftung:
  • Buttonbeschriftung anzeigen -> Linkfarben
    • Normaler Zustand
      Hier definiert ihr die Schriftfarbe der großen Buttons, auch largeButtonsgenannt. Diese sind zum Beispiel in der Themenansicht die großen Buttons (Antworten).
    • Hover
      Hier definiert ihr die Farbe des Hovers.
Außenrahmen:
  • Eigenschaften
    • Stärke
      Hier definiert ihr die Rahmen dicke des großen Buttons, mögliche Werte sind px, em, pt und %.
    • Stil
      Hier definiert ihr die Art des Rahmens, Beispiele sind: dotted, solid usw.
  • Farben
    • Normaler Zustand
      Hier wird die Farbe des Außenrahmens des Buttons definiert.
    • Hover
      Und hier die Hover Farbe des Außenrahmens.
Innenrahmen:
  • Eigenschaften
    • Stärke
      Hier definiert ihr die Rahmen dicke der kleinen Buttons, mögliche Werte sind px, em, pt und %.
    • Stil
      Hier definiert ihr die Art des Rahmens, Beispiele sind: dotted, solid usw.
  • Farben
    • Normaler Zustand
      Hier wird die Farbe des Innenrahmens des Buttons definiert.
    • Hover
      Und hier die Hover Farbe des Innenrahmens.
Hintergrundfarbe:
  • Farben
    • Normaler Zustand
      Hier wird die Farbe des Hintergrundes der Buttons definiert.
    • Hover
      Und hier die Hover Farbe des Hintergrundes.
Hintergrundbild:
  • Hintergrundgrafik verwenden
    • Normale Grafik
      Hier könnt ihr für die Buttons ein Hintergrundbild definieren, hier einfach den Dateinamen eingeben.
    • Hover-Grafik
      Hier könnt ihr für die Buttons ein Hover Hintergrundbild definieren, hier einfach den Dateinamen eingeben.


11

Menüs->Hauptmenü

Christoph Wednesday, April 6th 2011, 12:37pm



Buttons:
  • Ausrichtung
    Hier definiert ihr die Ausrichtung der Buttons, möglich ist: links, zentriert und rechts.
  • Transparenz für Buttonleiste aktivieren
    • Trennlinie anzeigen
      Mit dieser Option wird die Linie zwischen Seitenkopf und Menü deaktiviert.
Beschriftung:
  • Beschriftung verwenden
    • Linkfarben
      • Normaler Zustand
        Hier definiert ihr die Textfarbe der Buttons.
      • Hover
        Hier definiert ihr die Textfarbe des Hovers.
      • Aktiv
        Hier definiert ihr die Textfarbe des aktiven Buttons.
      • Aktiv Hover
        Hier definiert ihr die Textfarbe des aktiven Hover Buttons.
Hintergrundfarbe:
  • Farben
    • Normaler Zustand
      Hier definiert ihr die Hintergrundfarbe der Buttons.
    • Hover
      Hier definiert ihr die Hintergrundfarbe des Hovers.
    • Aktiv
      Hier definiert ihr die Hintergrundfarbe des aktiven Buttons.
    • Aktiv Hover
      Hier definiert ihr die Hintergrundfarbe des aktiven Hover Buttons.
Hintergrundfarbe:
  • Hintergrundgrafik verwenden
    • Normale Grafik
      Hier könnt ihr den Buttons eine Grafik zuweisen.
    • Hover Grafik
      Hier könnt ihr den Buttons eine Hover Grafik zuweisen.


12

Menüs->Tabs

Christoph Wednesday, April 6th 2011, 12:41pm



Beschriftung:
  • Beschriftung verwenden
    • Linkfarben
      • Normaler Zustand
        Hier definiert ihr die Textfarbe der Tabs.
      • Hover
        Hier definiert ihr die Textfarbe des Hovers.
      • Aktiv
        Hier definiert ihr die Textfarbe des aktiven Tabs.
      • Aktiv Hover
        Hier definiert ihr die Textfarbe des aktiven Hover Tabs.
Hintergrundfarbe:
  • Farben
    • Normaler Zustand
      Hier definiert ihr die Hintergrundfarbe der Tabs.
    • Hover
      Hier definiert ihr die Hintergrundfarbe des Hovers.
    • Aktiv
      Hier definiert ihr die Hintergrundfarbe des aktiven Tabs.
    • Aktiv Hover
      Hier definiert ihr die Hintergrundfarbe des aktiven Hover Tabs.
Hintergrundgrafik:
  • Hintergrundgrafik verwenden
    • Normale Grafik
      Hier könnt ihr den Tab eine Grafik zuweisen.
    • Hover Grafik
      Hier könnt ihr den Tab eine Hover Grafik zuweisen.


13

Menüs->Tab-Buttons

Christoph Wednesday, April 6th 2011, 12:45pm



Beschriftung:
  • Beschriftung verwenden
    • Linkfarben
      • Normaler Zustand
        Hier definiert ihr die Textfarbe der Tab-Buttons.
      • Hover
        Hier definiert ihr die Textfarbe des Hovers.
      • Aktiv
        Hier definiert ihr die Textfarbe des aktiven Tab-Buttons.
      • Aktiv Hover
        Hier definiert ihr die Textfarbe des aktiven Hover Tab-Buttons.
Hintergrundfarbe:
  • Farben
    • Normaler Zustand
      Hier definiert ihr die Hintergrundfarbe der Tab-Buttons.
    • Hover
      Hier definiert ihr die Hintergrundfarbe des Hovers.
    • Aktiv
      Hier definiert ihr die Hintergrundfarbe des aktiven Tab-Buttons.
    • Aktiv Hover
      Hier definiert ihr die Hintergrundfarbe des aktiven Hover Tab-Buttons.
Hintergrundgrafik:
  • Hintergrundgrafik verwenden
    • Normale Grafik
      Hier könnt ihr den Tab-Buttons eine Grafik zuweisen.
    • Hover Grafik
      Hier könnt ihr den Tab-Buttons eine Hover Grafik zuweisen.
Außenrahmen:
  • Stil
    Hier definiert ihr den Stil des Rahmens, möglich ist zum Beispiel: dotted, solid usw.
  • Farben
    • Normaler Zustand
      Hier definiert ihr die Hintergrundfarbe des Buttons.
    • Hover
      Hier definiert ihr die Hoverfarbe des Hintergrundes des Buttons.


14

Menüs->Spaltenköpfe

Christoph Wednesday, April 6th 2011, 12:49pm



Beschriftung:
  • Farben
    • Normaler Zustand
      Hier definiert ihr die Textfarbe der Spaltenkopfs.
    • Hover
      Hier definiert ihr die Textfarbe des Hovers.
    • Aktiv
      Hier definiert ihr die Textfarbe des aktiven Spaltenkopfs.
    • Aktiv Hover
      Hier definiert ihr die Textfarbe des aktiven Hover Spaltenkopfs.
Unterstreichung:
  • Stil
    Hier definiert ihr den Stil des Rahmens, möglich ist zum Beispiel: dotted, solid usw.
  • Farben
    • Normaler Zustand
      Hier definiert ihr die Hintergrundfarbe des Buttons.
    • Hover
      Hier definiert ihr die Hoverfarbe des Hintergrundes des Spaltenkopfs.
    • Aktiv
      Hier definiert ihr die Farbe des aktiven Spaltenkopfes.
    • Aktiv Hover
      Hier definiert ihr die Hover Farbe des aktiven Spaltenkopfes.
Hintergrundfarbe:
  • Farben
    • Normaler Zustand
      Hier definiert ihr die Hintergrundfarbe der Spaltenkopfs.
    • Hover
      Hier definiert ihr die Hintergrundfarbe des Hovers.
    • Aktiv
      Hier definiert ihr die Hintergrundfarbe des aktiven Spaltenkopfs.
    • Aktiv Hover
      Hier definiert ihr die Hintergrundfarbe des aktiven Hover Spaltenkopfs.
Hintergrundgrafik
  • Hintergrundgrafik verwenden
    • Normale Grafik
      Hier könnt ihr den Spaltenkopf eine Grafik zuweisen.
    • Hover Grafik
      Hier könnt ihr den Spaltenkopf eine Hover Grafik zuweisen.

15

Menüs->Extras

Christoph Thursday, April 7th 2011, 1:02pm



Dropdown- & Listenmenüs:
  • Linkfarben
    • Eigene Linkfarben verwenden
      • Linkfarbe
        Hier definiert ihr die Linkfarbe der Drowpdown- und Listenmenüs.
      • Hover -Linkfarbe
        Und hier die Hover-Linkfarbe der Dropdown- und Listenmenüs.
  • Hintergrundfarben
    • Eigene Hintergrundfarben verwenden
      • Hintergrundfarbe
        Hier definiert ihr die Hintergrundfarbe des Menüs.
      • Hover-Hintergrundfarbe
        Und hier die Hover-Hintergrundfarbe des Menüs.
  • Hintergrundgrafiken
    • Hintergrundgrafik verwenden
      • Hintergrundgrafik
        Hier definiert ihr die Hintergrundgrafik des Menüs.
      • Hover-Grafik
        Und hier die Hover-Grafik des Menüs.
Ausgewählte Elemente:
  • Schriftfarben
    • Textfarbe
      Hier wird die Textfarbe des ausgewählten Elements definiert.
    • Zweite Textfarbe
      Hier wird die zweite Textfarbe des ausgewählten Elements definiert.
  • Linkfarbe
    Hier definiert ihr die Linkfarbe.
  • Hintergrundfarbe
    Hier definiert ihr die Hintergrundfarbe.
  • Außenrahmen
    • Stärke
      Hier definiert ihr die Rahmen dicke des ausgewählten Elements, mögliche Werte sind px, em, pt und %.
    • Stil
      Hier definiert ihr die Art des Rahmens, Beispiele sind: dotted, solid usw.
    • Farbe
      Hier definiert ihr die Farbe des Außenrahmens.
  • Hintergrundgrafik
    • Hintergrundgrafik verwenden
      • Hintergrundgrafik
        Hier könnt ihr dem ausgewählten Element eine Hintergrundgrafik verpassen.


16

Erweitert->Nachrichtendarstellung

Christoph Thursday, April 7th 2011, 1:16pm



Seitenleisten:
  • Ausrichtung
    Hier könnt ihr die Seitenleiste der Beitragsansicht ändern, möglich ist, links, oben und rechts.
  • Textausrichtung
    Hier könnt ihr die Textausrichtung von den Seitenleisten ändern, möglich ist, links, zentriert und rechts.
  • Gerahmte Avatare verwenden
    Hiermit bekommen die Avatare in Seitenleiste auch Sidebar genannt, einen Rahmen und eine Hintergrundfarbe verpasst.
  • Hintergrundfarbe abwechseln
    Hiermit wechselt sich die Hintergrundfarbe der Seitenleiste mit jedem Beitrag ab. Als Standard ist hier die Farbe von Kasten 3 zu finden. Wenn diese Option aktiviert ist, dann wechselt sich die Farbe von Kasten 2 und Kasten 3 ab.
  • Trennlinien verwenden
    Durch diese Option besteht die Möglichkeit die Trennlinien zu entfernen, diese sind auch in der Seitenleiste zu finden und grenzt die Bereiche ab (Benutzername, Rang usw. zu Avatar usw.).
Nachrichtenfeld:
  • Gerahmte Ansicht verwenden
    Durch diese Option wird der Content des Beitrags in ein Rahmen gepackt.
  • Hintergrundfarbe abwechseln
    Hiermit wechselt sich die Hintergrundfarbe des Contents der Beiträge ab, es wird hier Kasten 1 und Kasten 2 genommen (sofern die Option "Hintergrundfarbe abwechseln" im Punkt "Seitenleisten" nicht aktiviert wurde, ansonsten wird zwar Kasten 1 und Kasten 2 benutzt, aber da durch diese Option die Seitenleiste nicht mehr so vorhanden ist, wie bei deaktivierter Option, verhält sich das ganze so, dass die Seitenleiste Farbe 1 und Content Farbe 2 hat.
  • Buttonleiste
    Mit dieser Option ist es möglich die smallButtons (Beitrag bearbeiten, Verwarnen (bei aktivierten Verwarn Module im WBB3.1), Melden, Zitieren...) zu positionieren.
    • Ausrichtung
      Möglich ist links und rechts.


17

Erweitert->Zusätzliche CSS Deklarationen

Christoph Thursday, April 7th 2011, 1:30pm



Wer einen richtigen Stil machen möchte, wird um diesen subTab im Stil Editor nicht vorbei kommen, dass ist so gesehen das Herzstück. Dort kann alles angepasst werden, was mit den Stil Editor eigenen Optionen nicht möglich ist. Hier muss wie der Name "CSS-Deklarationen" sagt, mit CSS (Cascading Style Sheet) gearbeitet werden. Es wird natürlich empfohlen, dass man sich etwas mit CSS auseinandersetzt und besonders das man CSS Validen Code abliefert, denn jeder unvalide Code kann zu Darstellungsfehlern im Stil führen.

Ich selber benutze immer CSS4You.de und zum validieren der CSS Deklarationen die W3C Validierungsseite.

Mit folgender CSS Deklaration kann man einigen Sachen den Rahmen nehmen.

Cascading style sheet

1
2
3
#header, #logo, .mainMenu, .mainMenu a, #footer {
	border: 0px;
}


Es ist auch immer darauf zu achten, dass man die CSS Deklarationen geordnet hinzufügt und etwas strukturiert, denn folgende CSS Deklaration lässt sich doch besser lesen als die danach.

Variante 1 - Gut leserlich

Cascading style sheet

1
2
3
4
5
6
7
8
#userNote {
	position: absolute;
	left: 47px;
	padding-top:1px;
	font-size:1.2em;
	text-shadow: 0 1px 0 #fff;
	color:#000;
}


Variante 2 - Chaos

Cascading style sheet

1
#userNote { position: absolute; left: 47px; padding-top:1px; font-size:1.2em; text-shadow: 0 1px 0 #fff; color:#000; }


Wie man sieht ist Variante 1 viel besser zum arbeiten, denn da kann man viel schneller sehen was was ist und kann man schneller etwas ändern.

Im Stil Editor gibt es hier 2 Zusätzliche CSS Deklarationen Felder, dass hat den Grund, dass man auch hier etwas Ordnung hineinbringen kann. Ich selber benutze in dem zweiten Feld immer meine Deklarationen für CSS Abrundungen, Schatten usw. (text-shadow füge ich immer direkt ins Feld eins bei den Deklarationen wie ihr oben an dem Beispiel erkennt).

18

Erweitert->Internet Explorer

Christoph Thursday, April 7th 2011, 1:38pm



Im WCF 1.0 (WBBLite2.0 und WBB3.0) gab es diesen subTab noch nicht, da musste man die Internet Explorer spezifischen Anpassungen direkt in Feld eins oder Feld zwei schreiben. Aber seit dem WCF 1.1 (WBBLite2.1 und WBB3.1) hat WoltLab uns einen eigenen subTab dafür spendiert, es ist hier auch nicht mehr notwendig vor der eigentlichen Deklaration das IE Version spezifische zu schreiben, ihr könnt ihr diese Felder für die einzelnen IE Versionen nutzen wie die eigentlichen CSS Deklarationen Felder.

Im folgenden Thema könnt ihr entnehmen wie ihr die IE Versionen anpassen könnt im WCF 1.0.
WCF 1.0 - Internet Explorer eigene Anpassungen

19

Erweitert->Kommentare

Christoph Thursday, April 7th 2011, 1:40pm



Hier könnt ihr einige Kommentare zum Stil hinterlassen, WoltLab hat im Beispiel "Basic Style" hingeschrieben was man mit diesem machen kann, also das man diesen Stil als Basis nehmen kann für einen eigenen Stil und eben auch den Hinweis das wenn man den Stil löscht, einfach einen neuen anlegen kann damit er wieder so wie der Basic aussieht, da das System die Werte des Basics Stil aus der Datenbank holt.