 |
 |
 |
|
Stand: 30.12.2008 04:56 aktuelle Version auf phpBB.de |
|
 |
|
 |
|
 |
|
|
 |
Knowledge Base Offline -> Templates und Mods -> Ein Template für mehrere Styles einrichten
Ein Template für mehrere Styles einrichten |
Autor: miccom |
Stand: 30.12.2008 04:56 |
Neuste Version unter: http://www.phpbb.de/doku/kb/mehrere_styles |
 |
Ein Template für mehrere Styles einrichten
Beschreibt, wie man mehrere Styles erstellt, die auf dem gleichen Template basieren.
1. Terminologie
phpBB bietet neben der Möglichkeit unterschiedliche Templates zu installieren, auch die Option an, in einem Template Untertemplates, sogenannte Styles, anzulegen. Ein Template fungiert dabei als Menge von Styles. Der Vorteil hierbei liegt klar auf der Hand, anstatt mehrerer Templates, muss man nur ein einziges Template aktualisieren, wenn man Änderungen in Form von Modifikationen, Updates, etc. durchführen möchte, da es nur einen einziger Ordner mit tpl-Dateien existiert.
2. Technisches zum Templatenamen
Jedes Template hat einen eindeutigen Namen und liegt als eigener Unterordner im Templates-Verzeichnis von phpBB. In diesem Ordner befinden sich zwei Dateien mit der Endung cfg, was für "configuration" steht, namens "theme_info.cfg" und "templatename.cfg" - "templatename" steht hierbei für den eindeutigen Namen eines Templates. Der Einfachheit halber, beziehe ich mich von nun an immer auf das Standard Template subSilver. Dementsprechend heißt die zweite cfg-Datei "subSilver.cfg".
Außerdem gibt es eine "subSilver.css", welche ihr vorab aktivieren solltet.
3. Die theme_info.cfg
Hier werden die unterschiedlichen Styles separiert, im subSilver sieht die Datei wie folgt aus (verkürzte Darstellung!):
Code: |
<?php
//
// phpBB 2.x auto-generated theme config file for subSilver
// Do not change anything in this file!
//
$subSilver[0]['template_name'] = "subSilver";
$subSilver[0]['style_name'] = "subSilver";
$subSilver[0]['head_stylesheet'] = "subSilver.css";
$subSilver[0]['body_background'] = "";
$subSilver[0]['body_bgcolor'] = "E5E5E5";
.
.
.
$subSilver[0]['img_size_privmsg'] = "0";
|
Interessant sind vor allem die ersten 3 Zeilen nach dem Kommentar, sowie alle Bezeichner die "subSilver" heißen und die Zahl in den eckigen Klammern. Will man einen Style für dieses Template anlegen, wird der komplette Block aus Zeilen die mit "$subSilver[0]" beginnen dupliziert. Anschließend wird die Zahl in den eckigen Klammern um 1 erhöht. Der Bezeichner für "template_name" bleibt gleich, nur im Bezeichner von "style_name" wird der Templatename in den neuen Stylenamen geändert - gleiches gilt für das Sytlesheet unter "head_stylesheet". Das ganze könnte z.B. so aussehen:
Code: |
<?php
//
// phpBB 2.x auto-generated theme config file for subSilver
// Do not change anything in this file!
//
$subSilver[1]['template_name'] = "subSilver";
$subSilver[1]['style_name'] = "subGreen";
$subSilver[1]['head_stylesheet'] = "subGreen.css";
$subSilver[1]['body_background'] = "";
$subSilver[1]['body_bgcolor'] = "E5E5E5";
.
.
.
$subSilver[1]['img_size_privmsg'] = "0";
|
Wie man sieht, heißt der neue Style nun "subGreen" und benutzt eine "subGreen.css" als Stylesheet. Diese legt man am einfachsten durch kopieren und umbenennen der "subSilver.css" an. Die nun neue "subGreen.css" kann nach belieben angepasst werden und bestimmt das Aussehen des neuen Styles subGreen. Ganz Faule, laden sich einfach von ktauber.com subGreen herunter und benutzen die darin enthaltene css-Datei.
4. subSilver.cfg
Im wesentlichen ist man damit fertig, man kann aber noch einen Schritt weitergehen und nicht nur die Farben ändern, sondern auch sämtliche Bilder an den neuen Style anpassen. Ein grüner subGreen, schaut mit blauen subSilver Icons ja auch nicht so prickelnd aus!
Von Haus aus, befinden sich alle Bilder eines Templates im Unterordner "images" und dessen Unterordner für die sprachbezogenen Bilder "lang_german", "lang_english", usw.
Will man nun jedem Style eigene Bilder verpassen, muss man die "subSilver.cfg" etwas modifizieren.
Suche nach:
Code: |
$current_template_images = $current_template_path . "/images";
|
Füge danach ein:
Code: |
$current_style_images = $row['style_name'];
|
Damit holt man sich den Stylenamen aus der Datenbank und kann ihn fortan in den darunterliegenden Bildpfaden verwenden.
Beispiel:
Aus:
Code: |
$images['forum'] = "$current_template_images/folder_big.gif";
|
wird:
Code: |
$images['forum'] = "$current_template_images/$current_style_images/folder_big.gif";
|
Das Bild "folder_big.gif" liegt nun also nicht mehr unter:
Code: | /templates/subSilver/images/ |
Sondern unter:
Code: | /templates/subSilver/images/subGreen/ |
Vorsicht bei den Pfaden die sprachbezogen sind! Hier wird der neue Unterordner nicht nach "$current_template_images/" eingefügt, sondern nach "$current_template_images/{LANG}/".
Beispiel:
Aus:
Code: |
$images['reply_new'] = "$current_template_images/{LANG}/reply.gif";
|
wird:
Code: |
$images['reply_new'] = "$current_template_images/{LANG}/$current_style_images/reply.gif";
|
Das Bild "reply.gif" liegt nun also nicht mehr unter:
Code: | /templates/subSilver/images/lang_german/ |
Sondern unter:
Code: | /templates/subSilver/images/lang_german/subGreen/ |
Wer noch weiter gehen will, kann in der "subSilver.cfg" auch eigene Bilder einbauen, welche nachher über Variablen in den Templatedateien angesprochen werden können. Dies braucht man vor allem dann, wenn sich die neuen Bilder von Style zu Style unterscheiden sollen.
So hat die phpBB Group etwas geschlampt und hat das "whosonline.gif" des subSilvers einfach als Image-Tag in die "index_body.tpl" geknallt. Ich zeige euch nun wie man das ändert und ihr lernt dabei beispielhaft auch eigene Bilder auf diesen Weg einzubinden.
In der subSilver.cfg suche:
Code: |
$images['voting_graphic'][4] = "$current_template_images/$current_style_images/voting_bar.gif";
|
Füge danach ein:
Code: |
$images['whosonline'] = "$current_template_images/$current_style_images/whosonline.gif";
|
Suche:
Füge darüber ein:
Code: |
$template->assign_vars(array(
'WHOSONLINE_IMG' => $images['whosonline'],
));
|
In der index_body.tpl suche:
Code: |
<img src="templates/subSilver/images/whosonline.gif" alt="{L_WHO_IS_ONLINE}" />
|
ersetze mit:
Code: |
<img src="{WHOSONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
|
Nun wird das "whosonline.gif" nicht mehr über die tpl-Datei direkt referenziert, sondern über die "subSilver.cfg" - dadurch kann man nun jedem Style ein eigenes "whosonline.gif" zuordnen.
|
Knowledge Base Offline -> Templates und Mods -> Ein Template für mehrere Styles einrichten
 |
Das Kopieren von Artikeln (auch auszugsweise) ist nur nach ausdrücklicher Genehmigung erlaubt!
|
 |
|