Es führt kein Weg daran vorbei sich gewisse CSS-Kenntnisse anzueignen, ohne diese, kann man einfach keinen Stil für das WBB3 umsetzen. Ich werde hier im Tutorial auch keinen CSS-Kurs machen, dafür gibt es bei Google genug Wissen das ihr euch aneignen könnt. Eine Seite die man unbedingt kennen muss:
Im Unterschied zu einer eigenen Website editiert ihr bei einem Stil fremden Code, das heisst, ihr müsst erst mal die richtigen Stellen, sprich Klassen und IDs finden dir ihr für eure Zwecke braucht.
Dazu gibt es diverse Hilfsmittel, Firefoxuser werden wohl alle Firebug verwenden, Safariuser können die eingebaute Entwickertoolbar verwenden. Daneben gibt es noch richtige CSS-Editorenin Form einer Anwendung, zum Beispiel CSS-Edit.
Was man verwendet ist Geschmackssache, aber das Prinzip ist immer das selbe, man sucht sich die richtige Deklaration heraus.
Alle Tools bieten auch eine wichtige Eingenschaft, das Live-Editing. Das heisst man kann direkt im Browser Herumprobieren wie sich die Änderungen auswirken.
Aber schauen wir uns das nun mal an einem Beispiel an, hier ist die Startseite des Forum mit dem angelegten Aerostil in Safari geöffnet:
Das Bild zeigt uns auch gleich drei wichtige Container:
#headerContainer
#mainContainer
#footerContainerEin Klick auf den #headerContainer markiert und den betreffenden Bereich blau, wir wissen also gleich mal welcher Bereich das ist. Rechts werden dann auch gleich mal die wichtigsten Infos angezeigt und welche Parameter eingestellt sind.
Wir sehen dort auch zum Beispiel die Deklaration:
text-overflow: ellipsis;Texte die zu Lang sind werden also per CSS gekürzt und mit drei Fortsetzungspunkten... gekennzeichnet.
Jetzt können wir uns man den #headerContainer genauer ansehen und entdecken dort einen Container #header. Ein Klick auf ihn und wir sehen dass er zwischen dem Userpanel und dem Mainmenü liegt. Zusätzlich sehen wir Rechts unter anderem die Information das ihm momentan die Farbe rgb(119, 119, 119); zugewiesen ist:
Um das Live-Editing mal zu Testen können wir den Haken rechts mal deaktivieren, wir wir sehen verschwindet der graue Hintergrund:
Um den Header jetzt noch komplett transparent zu bekommen, muss beispielsweise der Rahmen weg, also schauen wir uns mal an wo der Rahmen definiert wird und sehen das dann auch wenn wir weiter Herunterscrollen, hier sehen wir dass der Rahmen mit border-style: solid; festgelegt ist:
Ändere ich das jetzt mal in border-style: none; verschwindet der Rahmen und wir haben einen transparenten Header:
Also weiss ich das ich diese beiden Eigenschaften brauche um den Header transparent zu bekommen und schreibe mir das in die zusätzlichen CSS-Deklarationen im Stileditor rein und speichere das ab:
Lade ich die Seite nun neu, sehe ich das der Header nun transparent ist und beide Eigenschaften mit den neuen Deklarationen überschrieben worden sind:
So weit mal an dieser Stelle, ich denke es ist nun klargeworden wie das mit dem Suchen und dem Definieren von eigenem Code prinzipiell funktioniert.
Hier noch ein Screenshot von CSS-Edit:
Auch hier kann man den Code direkt manipulieren:
