[3.3] Style anpassen auf prosilver-Basis (Logo, Farben, Kleinigkeiten)

[sepp71]

Hallo in die Runde,
ich stand nach einem Update auf 3.3. vor der Aufgabe, meinen geringfügig im Aussehen angepassten Style vernünftig zu organisieren.
In der Knowledge Base gibt es einen Referenz-Artikel auf Basis der beiden Vorgängerversionen..
Mein Kernproblem:

• in der Hauptsache geht es mir um andere Farben,
• mein eigenes Logo anstelle dessen von phpBB und
• ich habe aber einzelne Anpassungen in der overall_header.html und der navbar_footer.html vorgenommen,

Im Sinne des oben ziterten Artikels sind diese Änderungen dann schon nicht mehr geringfügig, weil sie sich sowohl auf die Templates als auch auf die CSS-Dateien beziehen. Ich habe mich daher dazu entschieden, einen sehr kleinen sog Child-Style zu erstellen. Er soll soweit wie möglich auf prosilver zurückgreifen und nur für meine wenigen Anpassungen eben auf meinen neuen Code.
Die Kombination aus CSS und HTML-Änderungen war für mich in der Anleitung nicht so ganz eindeutig, daher beschreibe ich hier meine Vorgehensweise, vielleicht hilft es ja noch jemandem...

1. Im Ordner styles einen neuen Ordner erstellt, sinnvollerweise mit einem sprechenden Namen (z. B. mein_style).
2. Die Datei style.cfg von styles/prosilver nach styles/mein_style kopieren, mit einem Editor öffnen (ich benutze Notepad++) und folgende Zeilen anpassen bzw. kontrollieren:
   name = mein_style und
   parent = prosilver (es darf kein # davor stehen, denn hier wird der Verweis auf den Eltern-Style "prosilver" gesetzt!)

HTML-Dateien
In der Folge dann (nur) die HTML-Dateien, an denen ich etwas geändert habe (z.B. "overall_header.html") aus dem prosilver-Ordner an die entsprechende Stelle in mein_style/template kopiert.

Eine notwendige Änderung betrifft dabei die Einbindung der CSS-Dateien in der Datei overall_header.html: Da ich nur - im Vergleich zur Gesamtzahl der CSS-Definitionen - einzelne Änderungen, v.a. an den Farben vornehmen wollte, binde ich erst sämtliche Original-CSS ein und nehme dann in einer weiteren CSS-Datei "nachträglich" meine persönlichen Änderungen vor. Das ist in der Anleitung "Methode 3".
In styles/mein_style/templates/overall_headerhtml wird hinter
<!-- EVENT overall_header_head_append -->
- entfernt:

Code: Alles auswählen

{$STYLESHEETS}

und eingefügt:

Code: Alles auswählen

<!-- Einbindung grds prosilver zusaetzlich eigene css -->
<link href="{ROOT_PATH}styles/prosilver/theme/stylesheet.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" />

CSS-Dateien
im Ordner styles/mein_style/theme wird eine Textdatei mit dem Namen stylesheet.css erstellt bzw. kopiert.
In diesem Stylesheet werden per CSS-Befehl die Sachen notiert, die gegenüber dem Original geändert werden sollen.

Die Grafikdatei mit dem eigenen Logo gehört dann in den Ordner styles/mein_style/theme/images.
Eingebunden wird sie in der stylesheet.css mit der Anweisung

Code: Alles auswählen

.site_logo {
	background-image: url("./images/logo.png");
}

Wenn sie dieselben Abmessungen hat, wie die Originaldatei von phpbb, dann reicht das schon - ansonsten müssen evtl. auch noch ein paar weitere Formatierungen rund um das Logo angepasst werden.

Viel Erfolg!

Sepp

[Tommy Herrmann]

... sehr schön