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 Aufbau - Vom Grafikprogramm bis zum Stil Editor

Christoph Friday, April 22nd 2011, 3:58pm

Hier möchte ich euch zeigen wie ihr einen Stil in einem Grafik Programm erstellen könnt. Ich werde auch hier nicht exakt 100%ig auf alles eingehen, denn das würde alles den Rahmen sehr sprengen.

2

Teil 1 - Grafikprogramm

Christoph Friday, April 22nd 2011, 4:24pm

Als erstes startet ihr ein Grafikprogramm eurer Wahl, in meinem Fall nehme ich Photoshop.
Hier in diesem Tutorial machen wir einen Stil wie der damalige aus meinem Blog Eintrag, dass heißt das dieser eine statische Breite von ca. 990px hat und sich somit nicht an die Auflösung des Benutzers anpasst. Hier ein Bild des alten Stils, das füge ich nur hinzu um euch zu zeigen wie dieser Stil am Ende aussehen könnte.



Als erstes erstellen wir uns ein neues Dokument mit der Auflösung 1200x1200px. Dieses füllen wir mit dem Farbwert "#eeeded". 1200x1200px aus dem Grund, damit wir entsprechend genug Fläche zum arbeiten haben, notwendig ist hier zwar nur knappe 1000px breite, aber wie gesagt ist es angenehmer mit mehr zu arbeiten.

Es ist ratsam hier entsprechend in einem Stil mit verschiedenen Ebenen und Ebenengruppen zu arbeiten, damit man alles etwas ordnen kann. Daher gibt es bei mir immer eine Ebenegruppe für Header/Main/Footer usw. Eine neue Gruppe könnt ihr in Photoshop ganz einfach rechts unten in der Ebenenpalette mit dem "Order" Icon anlegen.

Jetzt erstellen wir uns entsprechend eine Ebenengruppe und benennen diese "Main", dort hinein machen wir dann eine neue Ebene.


Jetzt können wir anfangen und den eigentlichen Main Bereich zu machen. In meinem Fall mache ich einen einfachen Eckigen Rahmen mit ein paar Fülloptionen. Ihr habt hier mehrere Möglichkeiten solch ein Rechteck zu erstellen, entweder regulär mit Auswahlrechteck (mit entsprechend Fläche füllen), oder entsprechend per Option "Rechteck-Werkzeug (U)". Ich mache es aus Gewohnheit meistens immer mit dem reinen Auswahlrechteck, denn da kann man schnell die passende Breite einstellen.



So, wenn ihr meine Variante genommen habt, müsst ihr die Fläche nur noch füllen, dies geht direkt über das Menü "Bearbeiten" -> "Fläche füllen", oder den Shortcut "Umschalt+F5". Ich habe diese Fläche mit dem Farbwert "#dadada" befüllt, dass ist ein etwas dunkleres Grau als der, den wir vorher beim Dokument erstellen genommen haben.



Jetzt verpassen wir dem Main Bereich ein paar Fülloptionen, dass heißt ich werde dem eigentlichen Main Bereich einen leichten Schein nach außen, Schein nach innen und einen Rahmen verpassen. Dazu wählt ihr die entsprechende Ebene einfach an und macht einen rechtsklick auf diese und wählt "Fülloptionen", oder wählt das passende Menü dazu aus: Ebene-> Ebenenstil-> Fülloptionen. Jetzt markiert ist die checkbox vor "Schein nach außen" bzw. klickt direkt auf den Punkt "Schein nach außen", dann wird die checkbox automatisch aktiviert.

Schein nach außen:

Füllmethode -> Hier ändert ihr "Negativ multiplizieren" zu "Normal", dass hat den Grund, damit man die Farbe auch sieht, denn es ist so, dass sich eben alles negativ multipliziert und somit nicht wirklich sichtbar ist. Den genauen Unterschied merkt ihr sofort bei der Eingestellten gelben Farbe. Hier wählen wir ein dunkleres Grau mit dem Farbwert "#c3c3c3" aus. Die "Größe" stellen wir von 5px auf 4px um, dass hat den Grund, dass wir unseren Stil auf Breite 998px machen, der eigentliche Content/Main Bereich aber nur 990px ist. Ansonsten sind die netten Scrollbalken vorhanden ;)

Schein nach innen:

Hier wählen wir bei "Füllmethode" auch normal aus, aus dem selben Grund wie bei "Schein nach außen". Als Farbe nehmen wir hier ein helleres Grau mit dem Farbwert "#ededed". Die restlichen Einstellungen lassen wir so wie sie sind.

Kontur:

Jetzt kommt die Kontur, oder auch Rahmen genannt. Die Größe stellen wir auf "1px" und bei Position auf "Innen". Als Farbe nehme ich in meinem Fall ein sehr helles Grau mit dem Farbwert "#f1f1f1".

Und so sieht das ganze jetzt aus.


Der Mainbereich ist jetzt im Endeffekt fertig. Jetzt machen wir uns an den Header.

3

Teil 1 - Grafikprogramm -> Kopfbereich

Christoph Friday, April 22nd 2011, 4:56pm

So, jetzt machen wir uns an den Kopfbereich. Hier werden wir solch einen wie aus dem Blue Sunrise stil machen, also dieser geht über die komplette Seite von links nach rechts. Ihr erstellt einfach eine neue Gruppe und darin eine neue Ebene für den eigentlichen Kopfbereich. In meinem Beispiel mache ich das ganze nach Augenmaß und erstelle somit wieder eine Auswahl und fülle diese mit irgend einer Farbe, denn wir machen später einen Verlauf darüber, weshalb es jetzt egal ist welche Farbe diese Auswahl hat. In meinem Fall ist es noch die Farbe vom Main Bereich.



Jetzt öffnen wir auch hier wieder die Fülloptionen und verpassen dieser Ebene "Schein nach innen/Schein nach außen/Verlauf und Kontur".
Als erstes fangen wir mit dem Verlauf an, denn der Header bekommt jetzt eine andere Farbe als Grau und daher orientiert sich der Schein und die Kontur an diese Farbe. In meinem Beispiel nehme ich ein Lila.



Farbwert oben: #a388b6
Farbwert unten: #644f73

Beim "Schein nach außen" wählen wir bei Füllmethode entsprechend wieder normal aus und verpassen diesen Schein ein dunkelgrau mit dem Farbwert #6e6e6e.
Der Schein nach innen hat auch wieder die normale Füllmethode und den Farbwert #4c4054. Wie ihr jetzt sieht ist am Rand (links und rechts) auch der Schein nach innen, aber dazu kann man das Rechteck entsprechend nach außen ziehen, dass wird auch notwendig wenn ihr mit der Kontur arbeitet.

Die Einstellungen der Kontur sind auch wie beim Main Bereich: Größe 1px, Position innen und die Farbe #755e86.


Hier seht ihr das vorhin angesprochene Problem mit der Kontur und dem Schein, dass diese da auftauchen wo sie nicht sein sollten. Aber wir ziehen die Ebene entsprechend Größer und somit schiebt sich etwas links und rechts aus dem Arbeitsbereich heraus. Dazu einfach STRG+T oder "Bearbeiten->Frei transformieren" anwählen und die linke Auswahl nach links außen ziehen und die rechte nach rechts außen.



Der Header selber ist jetzt fertig, jetzt machen wir uns an das Logo. Einfach wieder eine neue Gruppe und Ebene erstellen. Die Schrift bekommt von mir jetzt einen Schlagschatten (Fülloptionen) mit den Werten: Abstand 1px und Größe 1px.



Das Logo selber ist jetzt für mein Beispiel auch schon fertig. Wie man sieht ist es wirklich nicht all zu schwer einen Stil zu machen :)


Jetzt muss man sich natürlich nur noch die Frage stellen, wo setzen wir das userPanel, mainMenu usw. hin?
Nun, am besten ist es natürlich sich bevor man anfängt sich darüber Gedanken zu machen, aber oft ist das leichter gesagt als getan. Ich selber vergesse irgend wie immer komplett das mainMenu :D

Das userPanel (Angemeldet als XY. ...) können wir wie beim Blue Sunrise Stil direkt oben am Header hinmachen, dazu können wir einfach so wie beim eigentlichen Header vorgehen, aber hier machen wir einem hellgrauen Verlauf.
Das userPanel machen wir so 25-30px hoch, wenn ihr wie ich in meinem Fall den Header zu klein gemacht habt, einfach mit "STRG+T" oder "Bearbeiten->Frei transformieren" entsprechend erhöhen.

Der Verlauf ist bei mir mit folgenden Farbwerten.
Farbwert oben: #eeeded
Farbwert unten: #dadada

Dann habe ich noch eine Kontur hinzugefügt, mit 1px Größe, die Position ist dieses mal "außen" und die Farbe eine helles Grau bzw. eher ein weiß mit dem Farbwert #f7f5f5. Und so sieht das ganze dann aus. Ich habe hier auch noch entsprechend die eigentliche Header Ebene runter geschoben, damit der Schein nach Innen noch sichtbar ist.


Der Header selber ist jetzt auch fertig, jetzt stellt sich dann nur noch die Frage, wo packen wir das mainMenu und die Suche hin? Die packen wir am besten direkt in den Main Bereich rein, dazu erstellen wir uns dann noch einen Bereich damit es nach etwas schönem aussieht.

4

Teil 1 - Grafikprogramm -> mainMenu

Christoph Friday, April 22nd 2011, 5:21pm

In meinem Fall packe ich das mainMenu direkt in den eigentlichen Main Bereich und grenze das ganze durch eine Trennlinie ab. Das ganz könnte so aussehen.



Ich habe hier einfach nur eine 988px breite und 30px hohe Auswahl erstellt (988px aus dem Grund, da an der Seite der Innenrahmen ist und ich diesen gleich mitbenutzt habe) und die gleichen Fülloptionen wie beim Main Bereich benutzt, außer das ich den Schein nach außen deaktiviert habe und die Hintergrundfarbe etwas dunkler gemacht habe.

5

Teil 1 - Grafikprogramm -> Text/Icons als "Vorschau"

Christoph Sunday, April 24th 2011, 9:53pm

Wenn ihr viel Wert darauf legt ob und wie das ganze jetzt im Stil aussieht, könnt ihr die Zeit investieren und die Icons, sowie Texte hinzufügen, damit ihr eine ungefähre Vorstellung habt, wie der Stil aussieht. Ich selber mache dies meistens nicht, da mir die Arbeit hier zu schade ist, die man für anderes nutzen könnte, aber wer natürlich darauf wert legt, kann entsprechend die Texte, sowie Icons hinzufügen um etwas "Gefühl" zu bekommen wie der Stil letzt endlich aussehen könnte. Das ganze würde bzw. könnte dann so aussehen.

PS: Das "nach oben" Icon nicht beachten, hatte ich nicht verschoben :whistling:
Christoph has attached the following image:
  • WoltTutorialsTutorial.jpg

6

Teil 2 - Stil Editor -> Stil hinzufügen/bearbeiten

Christoph Sunday, April 24th 2011, 10:01pm

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;
}


7

Teil 2 - Stil Editor -> Stil hinzufügen/bearbeiten

Christoph Sunday, April 24th 2011, 10:40pm

Das selbe machen wir jetzt auch im Footer Bereich. Hier verwende ich nicht footerContainer, sondern direkt footer und mache dann den Inneren Bereich mit einer anderen Deklaration passend.

Cascading style sheet

1
2
3
4
5
6
7
8
9
10
11
12
#footer {
background:  url('$global.images.location$footer.png');
background-repeat: no-repeat;
background-position: top;
}
#footerMenu {
margin-left:10px;
}

#footerOptions {
margin-right: 10px;
}




Jetzt für den Header und zusätzlich machen wir die Hintergrundfarbe des mainMenus noch transparent mit der Option "Transparenz für Buttonleiste aktivieren", sowie machen wir die Hintergrundfarbe der Buttons weg, im folgenden Bild ist es noch drinnen.



Jetzt machen wir das mainMenu passend, dazu verwende ich folgende CSS Deklaration.

Cascading style sheet

1
2
3
4
5
6
7
.mainMenu {
position: relative;
z-index: 95;
top: -35px;
padding-left: 30px;
margin-left:31px;
}




Jetzt fehlt natürlich eine Grafik in eigentlichen mainMenu. Man kann das ganze zwar anders lösen als ich, aber so spart man sich etwas Zeit :D Hier auch beachten, dass mit dieser Stil Variante kein mehrzeiliges mainMenu möglich ist.
Ich selber "fixe" das ganze jetzt, indem ich mainContainer etwas mit einem negativen margin-top nach oben schiebe. In diesem Fall "margin-top: -28px;" bei mainContainer. Jetzt muss man nur noch bei "main" mit padding-top trixen, in meinem Fall "padding-top: 15px;". Mir ist natürlich bewusst das dies nicht die eleganteste Variante ist, aber man sollte halt so arbeiten, wie man es am besten machen möchte, natürlich valide arbeiten ;)
Dann sieht das ganze so aus.


So sieht der Stil doch schon ganz brauchbar aus. Jetzt machen wir mal den restlichen Header, dazu wieder ins Grafikprogramm und die Grafik passend abspeichern, wenn nicht schon geschehen ;) Dazu verwende ich diese CSS Deklaration.

Cascading style sheet

1
2
3
4
5
#headerContainer {
background:  url('$global.images.location$headerContainer.png');
background-repeat: repeat-x;
background-position: top;
}




Wie man sieht ist der Content Bereich noch zu sehr nach oben, dass ändern wir, indem wir den eigentlichen Kopfbereich höher machen, ich nehme hier 150px.


Wie ihr seht hatte ich Glück und muss vom mainMenu die Werte nicht mehr anpassen :D

Jetzt geht es ans userPanel, dazu auch einfach die Grafik im Grafikprogramm passend abspeichern. Und dazu verwende ich folgende CSS Deklaration.

Cascading style sheet

1
2
3
4
5
6
7
8
9
10
11
12
13
#userPanel {
background-image: url("$global.images.location$userPanel.png"); 
background-repeat: repeat-x; 
background-position: left top; 
max-width: 100%;
min-width: 100%;
width: 100%;
}

.userPanelInner {
width: 980px; 
margin: 0 auto;
}


#userPanel, dort wird die Grafik eingebaut, diese geht über die ganze Seite und .userPanelInner wird der Bereich "Angemeldet als..." mit der passenden Breite wie der Content Bereich definiert.


Jetzt speichern wir das logo noch entsprechend unter logo.png ab, wird dann natürlich sofort angezeigt, da wir natürlich vorhin die Datei fürs logo definiert haben.



Jetzt ist der Stil grob fertig und man müsste nur noch die Details ausarbeiten wie zum Beispiel eben die CSS Rundungen und eben dann für den containerHead (Rahmenkopf) entsprechend eine Farbe bzw. Grafik.

Das Tutorial ist von meiner Seite jetzt fertig, denn alles weitere würde den Rahmen sehr sprengen, denn dann müsste ich im Endeffekt alles detailierter Beschreiben. Hier nochmal zum Abschluss meine verwendeten CSS Deklarationen.

Cascading style sheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
#header, #logo, .mainMenu, .mainMenu a, #footer {
	border: 0px;
}
#userPanel {
	background-image: url("$global.images.location$userPanel.png"); 
	background-repeat: repeat-x; 
	background-position: left top; 
	max-width: 100%;
	min-width: 100%;
	width: 100%;
}

.userPanelInner {
	width: 980px; 
	margin: 0 auto;
}
.mainMenuInner {
	border: 0px !important;
}

.mainMenu {
	position: relative;
	z-index: 95;
	top: -35px;
	padding-left: 30px;
	margin-left:31px;
}

#header {
	background:  url('$global.images.location$header.png');
	background-repeat: no-repeat;
	background-position: bottom;
}

#headerContainer {
	background:  url('$global.images.location$headerContainer.png');
	background-repeat: repeat-x;
	background-position: top;
}

#mainContainer {
	margin-top: -28px;
	background: transparent url('$global.images.location$main.png');
	background-repeat: repeat-y;
	width: 998px;
	margin-left: auto;
	margin-right: auto;
}
#main {
	padding-top: 15px;
	width: 970px;
}

#footer {
	background:  url('$global.images.location$footer.png');
	background-repeat: no-repeat;
	background-position: top;
}

#footerMenu {
	margin-left:10px;
}

#footerOptions {
	margin-right: 10px;
}