Das phpBB ist ein sehr beliebtes Forum, aber man hat immer ein Problem: Es gibt keinen Style, der auch zur eigenen Website passt. Also warum sollte man sich nicht selber einen bauen? Da das eine relativ aufwendige Arbeit ist und man nirgendwo ein Tutorial dazu findet, habe ich mich entschlossen, euch das Erstellen eines einfachen Templates ein bisschen näher zu bringen. Ich musste mir alles selber beibringen und möchte euch die Arbeit ein wenig erleichtern. Als Grundlage für euren Style könnt ihr eigentlich jeden anderen benutzen, der Einfachheit halber, habe ich aber ein Test-Template online gestellt, unter http://home.arcor.de/thomastischer/web/test.zip könnt ihr es euch runterladen. Er enthält alle wichtigen Dateien und kann leicht angepasst werden.
Als einzigste Vorrausstzung braucht ihr ein bisschen Ahnung von HTML bzw. wie man mit Tabellen umgeht., php-Erfahrung ist eigentlich nicht von nöten, da ja an dem eigentlichen Forum nichts geändert wird.
Also ran an die Arbeit!
Das erste File, welches wir uns vornehmen ist der Header (overall_header.tpl). Öffnet es einfach mit einem beliebigen Text-Editor. Die erste Zeile, die ihr ändern solltet, ist <link rel="stylesheet" href="templates/Test/{T_HEAD_STYLESHEET}" type="text/css">, dort solltet ihr statt „Test“ einen passenden Namen für euer Template einfügen. Überlegt ihn euch gut, denn auch der Ordner und noch weitere Dinge müssen dann so benannt werden.
Der Header ist die Datei, die immer ober zu sehen ist, also solltet ihr ein passendes Logo einbauen. Mehr braucht ihr eigentlich nicht zu ändern. Wer aber den Header noch ein wenig spannender gestalten will, kann z.B. den „Login“ und „Register“ usw. nach rechts oder links verfrachten. Dazu muss man dann die einzelnen Menüpunkte in verschiedene Zeilen und Spalten packen, wer Ahnung von HTML hat, für den sollte das kein Problem darstellen. Auch die Breite des Forums lässt sich anpassen, momentan steht sie auf 100%. Übrigens sind im Header keine Buttons, sondern nur Schrift, aber für ein einfaches Template reicht das allemal.
Die nächste Datei sollte der Footer sein (overall_footer.tpl). Er beinhaltet das Copyright. Ihr solltet hier wieder den Namen eures Templates einfügen und auch euren Nic, vielleicht auch noch eure Page. Auch hier lässt sich noch ein Logo einbinden, aber es sollte dann nicht so auffällig sein, weil das sonst ablenken könnte. Das Copyright vom phpBB solltet ihr einfach so belassen.
Es gibt auch noch die Datei simple_footer.tpl, auch dort solltet ihr diese Einstellungen nochmal vornehmen.
Der cfg-Datei (hier Test.cfg) müsst ihr auch noch den Namen eures Styles verpassen. Am Inhalt müsst ihr nichts ändern.
Nun kommen wir zum eigentlichen Aussehen des Forums. Dazu musst ihr das Stylesheet öffnen (hier Test.css, aber auch das müsst ihr umbennen in den Namen eures Templates), auch hier reicht ein einfacher Texteditor. Wer schon mal mit Stylesheets gearbeitet hat, dem wird die Anpassung an den eigenen WebStyle sicherlich keine Probleme bereiten, für alle anderen werde ich die wichtigsten Optionen erklären. Die Optionen, die eine Feineinstellung des Templates ermöglichen können so belassen werden, bzw. wer Ahnung hat kann sie ja ändern, aber es geht auch so.
body {
background-color: #cccccc; //gibt die Hintergrundfarbe an, wenn kein Bild gewählt ist
background-image: url(images/background.jpg); // Hintergrundbild
color : #ffffff; //Textfarbe
}
a:link {
color: #000044 ; //Farbe für Link
text-decoration: none; // Möglichkeiten: underline, overline oder none
}
a:visited {
color: #000044 ; // Farbe für gesehenen Link
text-decoration: none; // siehe a:link
}
a:hover {
color: #0000cc; //Farbe für Link, auf Mausberührung
text-decoration: underline; // siehe a:link
}
td.row1 { background-color : #999999; background-image: url(images/back01.jpg);}
// Farbe bzw. Hintergrundbild für Tabellenreihe 1
td.row2 { background-color: #999999; background-image: url(images/back02.jpg);}
// Farbe bzw. Hintergrundbild für Tabellenreihe 2
td.row3 { background-color: #999999; background-image: url(images/back03.jpg);}
// Farbe bzw. Hintergrundbild für Tabellenreihe 3
th {
color: #ffffff; font-size: 11px; font-weight : bold; // Schriftfarbe für Tabellenkopf (nicht auf der Hauptseite!)
background-color: #333333; // Farbe für Tabellenkopf, wenn kein Hintergrundbild gewählt ist (nicht auf der Hauptseite!)
background-image: url(images/back03.jpg); // Hintergrundbild für Tabellenkopf (nicht auf der Haupseite!)
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(images/back03.jpg);
background-color: #333333; border: #FFFFFF; border-style: none;
} // die selben Einstellungen wie für th nur diesmal für den Tabellenfuß (nicht auf der Hauptseite!)
/* General text */
verschiedene Einstellungen für den Text auf der Hauptseite, siehe dazu auch a:link
u.a. Farbe, Größe, Schriftart etc.
/* The register, login, search etc links at the top of the page */
ja wie der Name schon sagt, das Hauptmenü im Haeder, Einstellungen siehe auch einen Punkt drüber
/* Forum category titles */
Schrifteinstellungen für die Forumskategorien, siehe dazu auch wieder oben
/* Forum title: Text and link to the forums used in: index.php */
Schrifteinstellungen für die Forumsnamen, siehe dazu auch wieder oben
/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
Wie der Name sagt. Bei mehreren Seiten im Forum die Einstellungen für die Navigation
/* titles for the topics: could specify viewed link colour too */
Themennamen, wenn man in einen Forum ist, Einstellungen siehe auch wieder oben
/* Name of poster in viewmsg.php and viewtopic.php and other places */ und /* Location, number of posts, post date etc */
Farbeinstellungen für die genannten Sachen selbsterklärend *g*
/* The content of the posts (body of text) */
Farbe der Links, die ein User posten kann, Einstellungen siehe auch wieder oben
/* Quote & Code blocks */
Einstellungen für „Quote“ und „Code“, wie Schriftfarbe, Schriftart, Hintergrundfarbe bzw. Bild und den Rand um die Kästen
/* Copyright and bottom info */
Einstellungen für die Copyrightinfo im Footer
/* Form elements */ /* The text input fields background colour */ /* The buttons used for bbCode styling in message post */ /* The main submit button option */ /* None-bold submit button */
Hier kann man diverse kleine Dinge, wie Eingabefelden usw. ändern. Eigentlich kann man es so belassen, für ein besseres Aussehen sollte man es aber Anpassen. Die Optionen sind selbsterklärend bzw. wenn man sich bis hierher durchgeschlagen hat, findet man schnell heraus, was sie bedeuten
/* alternative specific styles */
jetzt kommt das eigentlich tolle :-)
td.maintable // wenn man hier die border bestehen lässt, kann man den Header noch besser unterteilen. Probiert es einfach mal aus
td.mainforumcell // hier kann man noch einen Rahmen um das ganze Forum einstellen, besonders gut ist das, wenn man als width im overall_header.tpl nicht 100% einstellt
td.forumcolumns // Hier kann man einstellen, wie „Forum“, „Themen“, „Beiträge“ und „letzter Beitrag“ aussehen sollen, also Schrifteinstellungen und Hintergrund
td.categorybar // Hintergrund für die Forumskategorie
Nun hat man eigentlich schon einen funktionierenden Style. Wie ihr seht ist es gar nicht so schwer einen Style zu bauen, aber es braucht Zeit bis er fertig ist. Meiner hat z.B. fast 4 Wochen benötigt, bis ich zu frieden war. Zu sehen ist er unter http://www.forum.caesars-page.de.vu
Auch Probieren kann manchmal helfen um die Wirkung von verschiedenen Einstellungen zu erfahren. Vorraussetzung ist dazu allerdings, dass ihr auf eurem Rechner ein funktionierendes phpBB habt, inkl. MySQL und PHP.
Was ihr auf jeden Fall noch machen müsst, ist ein Logo bauen und die verschiedenen Symbole für „Neuer Beitrag“ und „Locked“ usw. erstellen. Für die Feineinstellungen im CSS müsst ihr selber sehen was ihr braucht. Einige Einstellungsmöglichkeiten habe ich auch übersprungen, aber für ein erstes Tutorial soll das genügen.
Um den Style jetzt noch ein zu bauen müsst ihr ihn in das Forumsverzeichnis unter Templates legen. Dann geht ihr in die Administration und klickt auf Styles/Themes erstellen. Im Dropmenü wählt ihr dann euren Style aus, dann müsst ihr noch ein paar Einstellungen dort eintragen, übernehmt sie ambesten aus „SubSilver“. Dann noch auf Einstellungen übernehmen und der Style ist auch im Forum erreichbar. Wenn dem nicht so sein sollte müsst ihr ihn noch Exportieren, aber eigentlich sollte das nicht nötig sein.
Bei Fragen könnt ihr mir eine PM schreiben, ich werde sehen ob ich euch helfen kann.
Viel Spaß mit dem neuen, eigenen Style wünscht euch tct