Tutorial zum Style erstellen von Wbb 2.3.6 Foren Index

Tutorial zum Style erstellen von Wbb 2.3.6 Foren
Index
Style für Wbb 2.3.6 erstellen .................................................................................................................. 2
1. Namen der Buttons................................................................................................................................................................................2
2. Buttons für PN Box, Mitglieder, Profil und Team .....................................................................................................4
2a. Buttons für Beiträgen, Mitgliederliste und Team :............................................................................................4
3. Buttons für PN Box................................................................................................................................................................................5
4. Buttons für Kalender............................................................................................................................................................................5
5. Pfeile ..................................................................................................................................................................................................................5
6. Icons/Images ...............................................................................................................................................................................................5
7. Cellpic ..............................................................................................................................................................................................................7
8. Hintergrund .................................................................................................................................................................................................7
9. Logo....................................................................................................................................................................................................................8
10. Styleordner auf Webserver laden ...........................................................................................................................................9
11. Style im ACP erstellen .....................................................................................................................................................................9
11a. Designerpack erstellen ...........................................................................................................................................................9
11b. Hintergrundbild anzeigen lassen .................................................................................................................................10
11c. Cellpic anzeigen lassen ........................................................................................................................................................10
11d. Ordner für Bilder.......................................................................................................................................................................11
12. Templatepack erstellen .................................................................................................................................................................11
13. Style erstellen ........................................................................................................................................................................................12
1
Style für Wbb 2.3.6 erstellen
Um einen eigenen Style für sein Forum zu erstellen benötigt man ein Grafikprogramm
( Paint Shop Pro, Adobe Photoshop, Photo Impact oder ein anderes Grafikproggi) und etwas Fantasie.
Hier findet Ihr die Original Wbb 2.3.6 Images zum Download.
Ladet Euch bitte die .rar Datei herunter und entpackt diese auf Eurem PC.
Jetzt müsstet Ihr einen Ordner auf Eurem PC haben der „images“ heißt.
In diesem Ordner sind alle Original Bilder die für den Style benötigt werden.
Sucht Euch nun einen Namen für Euren Style.
Wenn Ihr einen Namen habt, dann erstellt einen neuen Ordner
und benennt ihn mit dem Style Namen.
Ich nenne meinen Style für dieses Tutorial „nici“ Style.
Mein Ordner heißt also nici. Achtet darauf das Ihr alles klein schreibt keine Freizeichen und keine
außergewöhnlichen Zeichen verwendet.
Öffnet nun Euren entpackten „images“ Ordner und kopiert dort alles,
auch die Unterordner „avatars, filetypes, icons, smilies“,
geht zurück zu Eurem Style(„nici“) Ordner und fügt alles dort ein.
Nun kommen wir zum erstellen der Grafiken.
Öffnet Euer Grafikprogramm. Ich verwende Paint Shop Pro 9,
Hilfestellung zu anderen Grafikproggis kann ich hier leider nicht geben.
Ihr müsst Euch dann schon selbst mit Eurem Programm auskennen.
Wenn Ihr Euer Proggi geöffnet habt,
dann sucht Euch über das Proggi Euren Style (nici) Ordner. Dort seht Ihr nun die Original Images des Wbb
2.3.6 Styles.
Da mir die meisten Original Images überhaupt nicht gefallen,
erstelle oder suche ich mir
immer neue. Im Netz gibt es eine Menge Icons die man verwenden kann...einfach mal ne Runde „googlen“.
Überlegt Euch nun welche Farben Euer Style haben soll.....
„na die richtige Farbe gefunden“? ...dann kann es weiter gehen.
Ich habe für meinen Style (nici) verschiedene Blautöne verwendet.
So nun fangen wir mit den Buttons im Header an.
1. Namen der Buttons
Die Buttons für den Header heißen immer „top_.....gif
Kalender
= top_calendar.gif
Registrieren
= top_register.gif
Profil
= top_usercp.gif
PN Box
= top_pms.gif
2
Suchen
Mitglieder
Mod CP
ACP
FAQ
Team
Forum
Portal
= top_search.gif
= top_members.gif
= top_modcp.gif
= top_acp.gif
= top_faq.gif
= top_team.gif
= top_start.gif
= top_portal.gif
Es gibt noch mehr Buttons die eventuell im Header vorkommen, deshalb sollte immer erst ein Button Rohling
erstellt werden, damit dieser dann später noch beschriftet werden kann.
Die Schriftart und Größe sollte man sich in einer .txt notieren, damit man später noch weiß was man nehmen
muss. Ich benenne die .txt immer mit meinem Style (nici) Namen und pack sie mir in meinen dazu gehörigen
Style (nici) Ordner.
Erstellt nun in Eurem Grafikproggi den Button Rohling:
mein Beispiel Button sieht so aus
.
Speichert Euch den Button mit dem Namen „button-rohling“ in Eurem Style (nici) Ordner.
Sucht Euch nun eine schöne Schrift und die passende Farbe raus und beschriftet den
Button mit:
Kalender
Speichert den Button mit dem Namen top_calendar.gif in Eurem Style (nici) Ordner.
Achtung nicht erschrecken, das Grafikprogramm wird nun meckern das die Datei mit dem
Namen schon vorhanden ist.
Einfach mit ok bestätigen und den Original Button überschreiben.
So könnt geht wenigstens kein Button vergessen.
Und Ihr seht welche Buttons noch die alten sind und welche die neu erstellten.
Weiter geht es mit dem nächsten Button:
PN Box
- mit dem Namen top_pms.gif in Eurem Style (nici) Ordner speichern.
Profil
- mit dem Namen top_usercp.gif in Eurem Style (nici) Ordner speichern.
FAQ
3
- mit dem Namen top_faq.gif in Eurem Style (nici) Ordner speichern.
Forum
- mit dem Namen top_start.gif in Eurem Style (nici) Ordner speichern.
So genug Beispiele für die Header Buttons.
Erstellt nun alle noch alle fehlenden Header Buttons
und speichert sie mit den Namen ab
(siehe ~Namen der Buttons~).
2. Buttons für PN Box, Mitglieder, Profil und Team
Man kann dafür Buttons erstellen mit Umrandung oder man nimmt einfach die Hintergrundfarbe vom Style
öffnet ein neue Datei im Grafikprogramm (die Höhe der Datei nicht höher als 20px, bei der Länge kommt es
dann auf die länge des Wortes an)
Und sucht Euch eine schöne Schrift und Schriftfarbe.
Folgende Buttons werden benötigt:
2a. Buttons für Beiträgen, Mitgliederliste und Team :
Email
WWW
Suchen
Buddy
PN
AIM
YIM
MSN
Antworten
Zitat
Editieren
Melden
IP
Los
>
>
>
>
>
>
>
>
>
>
>
>
>
>
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
email.gif
www.gif
search.gif
homie.gif
pm.gif
aim.gif
yim.gif
msn.gif
replypost.gif
quote.gif
editpost.gif
report.gif
ip.gif
go.gif
Hier meine Beispielbuttons, da seht Ihr auch die unterschiedlichen Längen:
Für die folgenden 3 Buttons habe ich extra Buttons erstellt:
Neues Thema >
speichern mit dem Namen newthread.gif
4
Antworten
Geschlossen
>
>
speichern mit dem Namen reply.gif
speichern mit dem Namen closed.gif
3. Buttons für PN Box
Neue PN
Antworten
Weiterleiten
Download
Drucken
Löschen
>
>
>
>
>
>
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
speichern mit dem Namen
newpm.gif
replypm.gif
forwardpm.gif
downloadpm.gif
printpm.gif
deletepm.gif
4. Buttons für Kalender
Termin
Priv. Termin
>
>
speichern mit dem Namen
speichern mit dem Namen
publicevent.gif
privateevent.gif
5. Pfeile
Nun kommen wir zu den Pfeilen die im Forum vorkommen.
Ich stell Euch als Beispiel meine im Paint Shop Pro erstellten Pfeile für den Style (nici)
Vor und schreib dahinter wie sie benannt werden müssen.
Ihr sucht Euch dafür im Netz Pfeile, oder erstellt sie mit Eurem Grafik Programm selber.
>
speichern mit dem Namen goup.gif
Ihr könnt den Pfeil als gif mit transparenten Hintergrund speichern oder wie ich mit Eurer
Hintergrundfarbe vom Style.
>
speichern mit dem Namen asc.gif
6. Icons/Images
Icons/Images für neue Beiträge, keine neuen Beiträge, Forum ist geschlossen, Forum ist ein
externer Link, Posteingang, Online, User Online, User Offline:
Für diese Icons könnt Ihr Euch Icons im Netz suchen oder selber welche erstellen.
Ich habe mir für den Style (nici) Icons bei http://www.iconarchive.com/ gesucht verwendet.
5
>
speichern mit dem Namen on.gif
Das on.gif habe ich animiert, das blinkt, was hier aber leider nicht dargestellt wird.
>
speichern mit dem Namen off.gif
>
speichern mit dem Namen offclosed.gif
Hier habe ich mir ein Schloss gesucht und es drauf gesetzt.
>
speichern mit dem Namen onclosed.gif
Auch hier ist das gif animiert, wird aber hier nicht dargestellt.
>
speichern mit dem Namen online.gif
>
speichern mit dem Namen stats.gif
>
speichern mit dem Namen user_online.gif
>
speichern mit dem Namen user_offline.gif
Das user_offline.gif ist animiert, wird aber hier nicht dargestellt.
Es gibt noch eine Menge andere Images die man ersetzen kann durch andere.
Wenn ich das jetzt weiter Schritt für Schritt hier aufschreibe wird das Tutorial ein Buch.
Ich denke jetzt müsste jeder verstanden haben wie es funktioniert.
Ihr habt ja in Eurem Style (nici) Ordner ganz am Anfang alle Original Bilder reingeladen.
Holt Euch über Euer Grafikprogramm einfach nach und nach das Original Bild rein,
erstellt oder sucht Euch ein neues und speichert es unter dem gleichen Namen wie das Originalbild in Eurem
Style (nici) Ordner ab.
Hier noch zwei Beispiel:
Original Wbb Image
speichern mit dem Namen usercp_pm.gif
Orginal Wbb Image
Mein Image
Mein Image
6
speichern mit dem Namen usercp_buddy_list.gif
7. Cellpic
Bei dem Cellpic geht Ihr genauso vor. Holt Euch das Orginal Cellpic in Euer Grafigproggi
Und erstellt ein neues in einer Farbe die zum Style passt.
Orginal
Mein Cellpic
speichern mit dem Namen cellpic.gif
Wer möchte kann für seinen Style auch 2 verschiedene Cellpics erstellen.
Das würde dann im eingebauten Style so aussehen wie in meinem Screen:
Oben wo Foren steht ist das cellpic.gif
Unten drunter wo Beispiel Forum steht ist das zweite Cellpic was ich erstellt habe.
Gespeichert wird es mit dem Namen cellpic1.gif.
8. Hintergrund
Für den Hintergrund des Forums erstellt Ihr selbst eine Grafik mit Eurem Programm.
Ihr solltet den Hintergrund immer Nahtlos Kacheln, damit der Hintergrund nicht abgehackt aussieht.
Man kann natürlich auch einen einfarbigen Hintergrund erstellen.
Das ist jedem selbst überlassen.
So sieht mein Hintergrund aus:
7
speichern mit dem Namen hg.jpg
9. Logo
Nun kommen wir zum Logo.
Das Logo sollte nicht Breiter als 810px und nicht Höher als 500px sein.
Was Ihr in Eurem Logo einbaut ist Euch überlassen.
Man sollte nur das © der verwendeten Bilder beachten.
Wer auf Nummer sicher gehen möchte und den Künstler der verwendeten Bilder kennt,
sollte sein © mit im Logo einbringen.
Achtet beim erstellen des Logos das man eine Stelle benötigt wo der Forenname hin muss.
Gespeichert wird das Logo mit dem Namen
logo-stylename.gif oder jpg.
Hier seht Ihr nun mein Logo zum Style:
8
Screen meines Styles:
10. Styleordner auf Webserver laden
Wenn alle Grafiken fertig erstellt sind, dann könnt Ihr den Styleordner auf Euren Webserver laden. Öffnet in
Eurem Wbb Verzeichnis den Ordner images.
In diesen Ordner ladet Ihr nun Euren neuen Styleordner.
11. Style im ACP erstellen
Öffnet in Eurem Forum das ACP.
11a. Designerpack erstellen
Dort erstellt Ihr unter „Designpack erstellen“ ein neues Designpack mit dem Namen Eurer Wahl. Natürlich
müsst Ihr in dem leeren/neuen Designpack auch
9
alles andere ausfüllen. Als Hilfe könnt Ihr Euch in einem 2 Fenster ein vorhandenes Designpack öffnen. Dort
seht Ihr was wo reinkommen muss (natürlich müsst Ihr die Farbcods mit den Farbcods versehen die zu Eurem
Style passen.
Es gibt noch eine zweite Variante ein neues Designpack zu erstellen.
Dafür geht Ihr auf Designpack bearbeiten. Nun müsstet Ihr alle Designpacks
sehen die in Eurem Forum vorhanden sind. Sucht Euch nun ein Designpack aus, geht auf kopieren und schon
habt Ihr eine Kopie von einem Vorhandenen Designpack. Gebt nun dem kopierten Designpack einen neuen
Namen Eurer Wahl. Jetzt könnt Ihr anfangen das Designpack nach Euren Wünschen zu verändern.
11b. Hintergrundbild anzeigen lassen
Wenn Ihr ein Hintergrundbild für den Style erstellt habt, dann müsste Ihr im Designerpack bei
HINTERGRUND folgendes in den CSS Code einfügen.
background-image: url(images/NAMEDESSTYLEORDNER/hg.jpg);
das rot geschriebene muss mit dem Namen des Styleordners ersetzt werden.
Hier seht Ihr einen Screen von meinem Designerpack. Es handelt sich um den oberen Teil im Designerpack.
Das markierte ist der CSS Code der eingefügt werden muss für das hg.jpg
11c. Cellpic anzeigen lassen
Um das Cellpic anzeigen zu lassen muss im Designpack bei Tabellenkopf
folgendes in den CSS Code eingefügt werden:
background-image: url(images/NAMEDESSTYLEORDNER/cellpic.gif);
10
Hat man noch ein zweites Cellpic erstellt wird in der Tabellenkategorienzeile
Folgendes eingefügt:
background-image: url(images/NAMEDESSTYLEORDNER/cellpic1.gif);
11d. Ordner für Bilder
Damit auch alle neu erstellten Grafiken im neuen Style angezeigt muss folgendes im Designpack unter Bilder
angegeben werden:
Ordner für Bilder:
Url zum Logo des Forums
>
>
images/NAMEDESSTYLES
images/NAMEDESSTYLES/logobynici.gif
Das waren nun die wichtigsten Punkte für den Designpack. Es kann natürlich noch viel mehr verändert werden.
Das kann jeder selber durchtesten.
12. Templatepack erstellen
Erstellt am besten für jeden neuen Style ein neues Templatepack.
Dazu müsst Ihr nur auf Templatepack erstellen gehen.
11
Es öffnet sich ein neue Seite > dort gebt Ihr folgendes ein:
Templatepackname: einen Namen Eurer Wahl ein
Templateordner:
Geben Sie hier an, in welchem Ordner die Templates dieses Templatepacks gespeichert werden sollen. Dabei
darf es nicht zu Überschneidungen mit anderen Templatepacks kommen. Eine Angabe des Ordners wird nur
benötigt, wenn Sie Templates exportieren möchten. Wenn benötigt einen Namen Eurer Wahl
Übergeordnetes Templatepack:
Fehlende Templates in diesem Templatepack werden automatisch aus den übergeordneten Templatepacks
bezogen.
Dort stellt Ihr Standardtemplates ein
Das ganze zum Schluss mit Speichern beenden.
In den neuen Templatepack werden alle Templates kopiert die für den Style benötigt werden. Dazu holt man
sich das Orginaltemplate aus den Standarttemplates und fügt es im neuen Templatepack ein.
Dort kann dann auch das Template verändert werden.
Damit jeder sieht das der Style von Euch selbst erstellt wurde, sollte man sich den Orginal Footer Template
kopieren und in sein Templatepack einfügen.
Im Footer kann man dann sein © des Styles einfügen.
13. Style erstellen
Geht im ACP auf Style erstellen, es öffnet sich eine neue Seite >
Dort gebt Ihr folgendes ein:
Stylename:
einen Namen Eurer Wahl ein
Templatepackname:
Wählen Sie hier das Templatepack aus, das von diesem Style verwendet werden soll.
Dort sucht Ihr Euch das eben erstellte Templatepack raus.
Designpackname:
Wählen Sie hier das Designpack aus, das von diesem Style verwendet werden soll.
Dort sucht Ihr Eurer neu erstelltes Designpack.
12
Zum Schluss mit speichern beenden.
Nun seit Ihr fertig mir Eurem eigenen Style.
Ich hoffe das Tutorial ist verständlich geschrieben, ich
habe nichts vergessen und es hat Euch Spaß gemacht.
Liebe Grüße Nici
Email: [email protected]
Das © des Tutorials liegt bei Nici
Das Tutorial darf nur bei www.schnatterkiste.de und www.traumland-city.de angeboten werden.
13