So, jetzt setzen wir das ganze im Stil Editor um.
Als erstes fügt ihr im ACP unter dem Punkt "Darstellung->Stile->Stil hinzufügen" einen Stil hinzu. Hier könnt ihr gleich einige Informationen zum Stil angeben, anschließend auf Absenden klicken. Jetzt regulär auf der Übersichtsseite den Stil erneut aufrufen bzw. davor noch als Standard setzen, damit ihr ihn nicht manuell auswählen müsst, jetzt könnt ihr richtig das bearbeiten anfangen. Als wichtige Lektüre lest euch bitte noch folgendes Tutorial durch, dieses erklärt euch den Stil Editor und zeigt euch was XY bewirkt.
WCF Allgemein - Stil Editor und dessen Auswirkungen
Unter dem Punkt "Global->Allgemein" fügt ihr die Einstellungen für Speicherort der Grafiken usw. hinzu. In meinem Beispiel nehme ich "images/WoltTutorialsStyleTutorial". Hier bitte wie im oben verlinkten Thema einen Aussagekräftigen Namen wählen, damit sich nichts mit anderen Stile überschneiden könnte.
Den gewählten Pfad legen wir uns im "wcf\images" Ordner entsprechend an, dort kommen wie der Name der Einstellung sagt, alle Grafik Dateien hinein.
Wenn ihr euch noch erinnert, hat der eigentliche Main Bereich 990px Breite + die Pixel für den Schein nach außen, dass wären in diesem Fall: 990px+4px+4px -> 998px Breite als statischer Stil.
Jetzt fügen wir den Farbcode des Hintergrundes ein: Global->Seite->Hintergrund-Farbe: #eeeded. Die Farbe des Seitenkopfes entfernen wir, dazu löschen wir einfach "#777". Bei Logo wählen wir unter dem Punkt "Einheitliches Logo verwenden" entsprechend die Option aus und schreiben in das Textfeld den Namen der Logo Datei rein, ich nehme hier immer "logo.png". Die Datei selber ist zwar noch nicht vorhanden, aber das ist in dieser Hinsicht egal, da die Datei dann später angezeigt wird, wenn sie im Grafiken Ordner vorhanden ist.
Ihr könnt natürlich den Stil im Forum mal aufrufen, zu sehen ist zwar noch nicht viel, aber ihr seht das sich was tut.
Mit folgenden CSS Deklarationen entfernt ihr bei einigen Containern die Rahmen, diese werden unter "Erweitert->CSS Deklarationen" hinzugefügt.
|
Cascading style sheet
|
1
2
3
4
5
6
|
#header, #logo, .mainMenu, .mainMenu a, #footer {
border: 0px;
}
.mainMenuInner {
border: 0px !important;
}
|
Das ganze sieht dann so aus.
Jetzt bereiten wir mal die Grafiken vor, damit wir gleich richtig im Stil Editor laden können. Ich mache mir hier noch im Programm ein paar Hilfslinien, damit ich schnell passend die Grafiken schneiden kann. Aber das kann jeder so machen wie er es lieber macht.
Ich speichere auch den fertigen Stiles für jede Grafik immer gleich als neue Datei ab. Heißt im Endeffekt das ich den Stil direkt neu abspeichere, dann die Ebenen passend Zusammenfüge, damit sich die Fülloptionen nicht verschieben.
Als erstes heißt diese "main", jetzt blende ich alles aus was ich hierfür nicht brauche und füge alles auf eine Ebene zusammen, dass sieht in meinem Fall so aus.
Jetzt wird die Datei als "main.png" in den richtigen images Ordner gespeichert. Das ganze machen wir jetzt auch für den Footer und den Header. In den Header selber baue ich auch gleich die Grafik fürs mainMenu mit ein und später dann beim mainMenu mit position usw. arbeiten.
Jetzt basteln wir uns das mal im Stil Editor grob zusammen. Mit folgender CSS Deklaration fügt ihr im "mainContainer" die Grafik für den Main Bereich ein, man kann zwar auch das ganze direkt in "main" einbauen, aber "main" formatieren wir anderweitig um, damit sich der eigentliche Content Bereich etwas nach innen schiebt und somit nicht am Rahmen klebt, bzw. über den Rahmen ragt.
|
|
Cascading style sheet
|
1
2
3
4
5
6
7
|
#mainContainer {
background: transparent url('$global.images.location$main.png');
background-repeat: repeat-y;
width: 998px;
margin-left: auto;
margin-right: auto;
}
|
Seit dem WCF1.1 gibt es die Möglichkeit hier mit Code auf bestimmte Bereiche zuzugreifen, oben unter "background" ist einer. "$global.images.location$" zum Beispiel ist für den Pfad der Bilder. Wenn man diesen Code, anstatt den Pfad fest angibt, muss man die CSS Deklarationen nicht immer manuell ändern, wenn man den eigentlichen Grafikpfad ändert. Repeat ist für die "Wiederholung", width ist für die Breite zuständig und margin-left/right dafür da, damit alles schön an passender Stelle ist. Das ganze sieht jetzt so aus.
Daher definieren wir jetzt für "Main" auch noch die Breite damit der Content Bereich nicht aus dem Rahmen ragt.
|
|
Cascading style sheet
|
1
2
3
|
#main {
width: 970px;
}
|
Stil Editor »
WCF Allgemein - Stil Editor und dessen Auswirkungen
(Apr 5th 2011, 2:18pm)
Wednesday, May 22nd 2013, 2:35am
Go to the top of the page
