Beiträge von Tom

Vorher aber noch ein paar Anmerkungen zu den Grafiken:

Formate

Ich verwende gewöhnlich folgende Formate:

PNG 24 - Bei Allen Elementen die keine Transparenz benötigen
PNG 32 - Bei allen Elementen die Transparenz (Alphatransparenz) benötigen

In Ausnahmefällen:

JPEG: Wenn PNG einfach zu gross wird (mein Richtwert liegt bei ca. 150 Kb beim Header)
GIF: Wenn 8 Bit und eine Indextransparenz ausreichen und der Stil dadurch vollständig IE6-kompatibel wird

Der IE6 kann von Haus aus keine Alphatransparenzen anzeigen, stattdessen wird die transparente Fläche grau angezeigt.

Slicen

Ja man kann natürlich alle Flächen kleiner slicen, 1 Pixel Breite würde ja schon reichen da die Hintergründe alle gekachelt werden, ich mache das aber trotzdem nicht weil:

1. Die Dateigrösse meist nicht sonderlich geringer wird.

Beispiel der Posterhintergrund:

In der Grösse 450x550 Pixel ist er als PNG 24 2,0 Kb gross. In der Breite 1 Pixel 0,3 Kb.

2. Wenn ich in den Stilordner schaue, sehe ich meist anhand der Thumbnailvorschau auf den ersten Blick, ohne das ich die Dateinamen lesen brauche, was ich da vor der Nase habe.

3. Ich kann mal so eben was Testen ohne jedes mal in den Quelldateien zu editieren. Hab ich den Hintergrund nur 1 Pixel breit geliced, muss ich ihn erst noch verbreiten usw. -> umständlich.

Darum slice ich die Grafiken immer recht gross.

Hier kommen nun die grossen Buttons und die Threadansicht.

Da es sich bei den grossen Buttons um ein sogenanntes CSS-Sprite handelt, weicht die Form hier von der bekannten Darstellung ab. bei CSS-Sprites wird die Position der Grafik über CSS gesteuert. Der Vorteil an der Sache ist, das nur eine Grafik geladen wird. Der grosse Button besteht also gleichzeitig aus:

• Dem Normalzustand (oben)
• Dem Hoverzustand (unten)
• Dem Endstück (ganz Rechts)

Am besten bleibt man bei dieser Vorlage, dann kann man den CSS-Code aus dem Sunrise-Stil übernehmen und braucht sich darum schon nicht mehr zu kümmern.

Zur Threadansicht braucht man wohl nicht viel sagen, erklärt sich wohl von alleine.

Und dann noch schnell das ganze eben slicen:

Somit wären nun alle Grafiken fertig und wir können uns an die Umsetzung machen.

Ich weiss nicht was du hast? Ich habe dich nur darauf hingewiesen dass:

1. Das hier der Supportbereich für unsere Plugins ist

Für Themen rund um das WBB3 haben wir einen extra Bereich:

https://www.cls-design.com/forum/index.ph…oard&boardID=36

Ebenso wie für Probleme die mit dem WBB3 zusammenhängen:

https://www.cls-design.com/forum/index.ph…oard&boardID=37

2. Dass das Plugin ein eigenes Supportforum hat (was nicht jedes Plugin hat, eigentlich sonst kein anderes).

Also kein Grund sich gleich auf den Schlips getreten zu fühlen.

Vorwort

In diesem Tutorial wird ein Stil für das WBB 3.1 mit einer fester Breite von 960 Pixeln erstellt.

Wie immer, viele Wege führen nach Rom, das ist meine Vorgehensweise bei der Stilerstellung, das heisst natürlich nicht dass man es anders machen kann. Ich werde hier nur auf die Erstellung ausserhalb des Stileditors eingeben, die Optionen und Funktionen innerhalb des Stileditors müsst ihr euch schon selber aneignen. Alles was ich hier schreibe ist meine persönliche Meinung und natürlich kann man auch anderer Ansicht sein.

Teil 1: Erstellung des Designs

Zu einem vollständigen WBB3.1-Stil gehören meiner Meinung nach folgende Grafiken:

• Header (960x284)
• Logo
• Mainhintergrund (960x20)
• Footer (960x156)

Damit hat man schonmal das Grundgerüst des Stiles und man kann sich den Hintergründen widmen:

• Seitenhintergrund
• Footerhintergrund

Anschliessend kann man sich um das Kleinzeug kümmern:

• Kategorien- und Editorhintergrund
• Kleine Buttons (50x50)
• Grosse Buttons (900x120)
• Tabs (250x35)
• Spaltenköpfe (160x24)
• Forenhintergrund (900x100)

Und für die Threadansicht werden noch benötigt:

• Hintergrund Themenstarter (225x500)
• Hintergrund normaler Poster (225x500)
• Hintergrund Beiträge (400x500)

Nun wo klar ist was alles an Grafiken benötig wird, kann man sich an die Designerstellung machen. Gewöhnlich packe ich alle Elemente bis auf die grossen Buttons und die Grafiken der Threadansicht in eine Datei, das kann dann zum Beispiel so aussehen:

Und gesliced sieht das dann so aus:

Um die bisherigen Zusammenhänge zu verstehen hier ein Überblick wo die Grafiken zum Einsatz kommen:

Hier geht es eigentlich um unsere Plugins, wenn du Fragen zum Headermenü hast, stellst du die am besten dort im Supportforum:

-> http://plugins.wbuilder.de/

Ich würde sagen:

#userPanel{
position: absolute;
top:200px;
left:20px;
}

3.0 oder 3.1?

Ne ich steh total auf Sonne aber nicht auf im Haus schwitzen

Ein Eis und eine Rundfahrt später, hab euch mal ein paar Bilder gemacht, da könnt ihr bischen mit der Google-Map Rumspielen:

Rundfahrt

Das Eis hab ich mal weggelassen

Na du markierst alle Objekte die die verzerren willst gleichzeitig und verzerrst sie dann. Dann bleiben die Verhältnisse und die Perspektive erhalten. Oder du reduzierst alles auf eine Ebene wenn du mit der Gestaltung fertig bist, oder, oder, oder... Es führen so viele Wege nach Rom

Da hat man ja gar keine Lust auf gar nix Ich werde mein Rad zur Eisdiele ausführen

Warum ist den hier zu

Komische Fragen habt ihr immer:

ACP -> Benutzer -> Benutzerprofilfelder -> Hinzufügen