[3.3] Style anpassen auf prosilver-Basis (Logo, Farben, Kleinigkeiten)
Verfasst: 03.01.2021 20:35
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:
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...
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
- entfernt:
und eingefügt:
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
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
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,
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...
- Im Ordner
styles
einen neuen Ordner erstellt, sinnvollerweise mit einem sprechenden Namen (z. B.mein_style
). - Die Datei style.cfg von
styles/prosilver
nachstyles/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!)
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" />
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");
}
Viel Erfolg!
Sepp