[3.2] Child Style erstellen

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.1/3.2, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Benutzeravatar
vfrblue
Junior Supporter
Beiträge: 1100
Registriert: 22.11.2016 18:46
Wohnort: Niedersachsen-West
Kontaktdaten:

[3.2] Child Style erstellen

Beitragvon vfrblue » 14.05.2017 21:23

Ich stelle meine Frage mal in diesem Thema, ist aber für phpBB 3.2,
Ich möchte einen Style auf prosilver basierend erstellen, wo nur die Farben und einige wenige Darstellungsoptionen verändert werden sollen.
Eine eigene .css-Datei habe ich dafür schon vorliegen. Muss ich jetzt auch die kompletten template- und .css-Dateien mit in diesen Style hinterlegen, oder kann man das wie bei den Extensions lösen? Der Style soll von den Usern über die persönlichen Einstellungen gewählt werden.
Gruß Hermann

Forum VFR-OC

Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 2997
Registriert: 15.10.2012 03:27

Re: [3.2] Child Style erstellen

Beitragvon Melmac » 15.05.2017 01:12

Hi,

kurz vorweg: ich habe mir mal erlaubt, dies hier vom ursprünglichen Thema abzutrennen und in ein eigenes zu verlagern - Deine Fragen dürften auch für andere Forenbetreiber interessant sein. Vielleicht ganz gut, wenn man dieses Themenfeld dann "gebündelt" angehen kann.

Zu Deinen Fragen:
Der KB-Artikel [3.1/3.2] Einen Style für phpBB 3.1/3.2 modifizieren und erstellen hat sich zwar ursprünglich auf phpBB 3.1.x bezogen, lässt sich aber prinzipiell auch auf Styles für 3.2.0 noch anwenden.

Normalerweise ist es immer sinnvoll, in solchen Fällen einen "richtigen" Child Style zu erstellen, selbst wenn die Benutzer keine persönliche Styleauswahl vornehmen können sollen.
[Ich gehe im Folgenden einfach mal davon aus, dass der Basisstyle, von dem Du ausgehst, prosilver ist.]

Was die HTML-Files im /template Verzeichnis betrifft, ist es relativ einfach: wenn Du in der style.cfg des neuen Styles den Parent Style auf prosilver setzt =>

Code: Alles auswählen

# Parent style
# Set value to empty or to this style's name if this style does not have a parent style
parent = prosilver

dann brauchst Du nur diejenigen ins template Verzeichnis Deines neuen Styles aufzunehmen, die sich gegenüber den Originalen bei prosilver geändert haben. Alle anderen werden dann vom Basisstyle prosilver "ausgeliehen" und mitbenutzt.
(Im günstigsten Fall, wenn keine HTML-Anpassungen vorgenommen wurden, kann das template Verzeichnis also auch komplett weggelassen werden.)

Bei den CSS-Files gibt es, wie im Artikel ausgeführt, mehrere Möglichkeiten. Welche Du wählst, hängt letztendlich auch vom Umfang Deiner Anpassungen ab.
Zu empfehlen sind die Methoden 3 oder 4 des Artikels, weil so auf @import-Regeln mit relativem Pfad verzichtet werden kann; in Deinem Fall (alle CSS-Anpassungen liegen ohnehin bereits in einer neuen (= eigenen) Datei vor, ist vielleicht auch die Methode 3 schon ausreichend.

Öffne hierzu die overall_header.html Deines neuen Styles und füge vor

Code: Alles auswählen

<link href="{T_STYLESHEET_LINK}" rel="stylesheet">

folgendes ein:

Code: Alles auswählen

<link href="{ROOT_PATH}styles/prosilver/theme/stylesheet.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />

Damit lädst Du zuerst die stylesheet.css von prosilver (und damit quasi alle prosilver CSS-Files, die in ihr importiert werden) vor der Deines Styles.

Da noch einige CSS-Files über die overall_header.html direkt eingebunden werden:
suche

Code: Alles auswählen

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
   <link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_PLUPLOAD -->
   <link href="{T_THEME_PATH}/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_COOKIE_NOTICE -->
   <link href="{T_ASSETS_PATH}/cookieconsent/cookieconsent.min.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!--[if lte IE 9]>
   <link href="{T_THEME_PATH}/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<![endif]-->

und ersetze durch

Code: Alles auswählen

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
   <link href="{ROOT_PATH}styles/prosilver/theme/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_PLUPLOAD -->
   <link href="{ROOT_PATH}styles/prosilver/theme/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_COOKIE_NOTICE -->
   <link href="{T_ASSETS_PATH}/cookieconsent/cookieconsent.min.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!--[if lte IE 9]>
   <link href="{ROOT_PATH}styles/prosilver/theme/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<![endif]-->

Auf diese Weise werden auch alle nicht in der stylesheet.css angezogenen CSS-Files von prosilver ebenfalls mitverwendet.

Öffne danach die stylesheet.css Deines Styles und lösche dort alle @import-Regeln.
Danach gibt es jetzt zwei Möglichkeiten: entweder
- Du kopierst dort alles modifizierte CSS rein, oder
- Du importierst dort nur noch Deine CSS-Datei, in der Du die Änderungen gesammelt hast =>

Code: Alles auswählen

@import url("meine_anpassungen.css");


Alle so von prosilver "geerbten" CSS-Files kannst Du dann aus dem theme Verzeichnis Deines Styles rausnehmen
Die Verzeichnis-/Dateistruktur Deines Styles sähen danach so aus:
  • /template
    • overall_header.html
  • /theme
    • meine_anpassungen.css (nur wenn Du mit dieser Datei arbeiten willst - s.o.)
    • stylesheet.css
  • style.cfg
  • license.txt
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

Benutzeravatar
vfrblue
Junior Supporter
Beiträge: 1100
Registriert: 22.11.2016 18:46
Wohnort: Niedersachsen-West
Kontaktdaten:

Re: [3.2] Child Style erstellen

Beitragvon vfrblue » 15.05.2017 01:22

Besten dank für deine Mühe, Melmac.
Damit kann ich arbeiten. ;-)
Gruß Hermann

Forum VFR-OC

Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 2997
Registriert: 15.10.2012 03:27

Re: [3.2] Child Style erstellen

Beitragvon Melmac » 15.05.2017 01:31

Es liest sich schlimmer und komplizierter als es dann am Ende auch wirklich ist :wink:
Spätestens bei einem Update des Basisstyles macht sich die Mühe der Vorarbeit dann bezahlt.

Viel Spaß beim Basteln :)
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

Annika
Mitglied
Beiträge: 21
Registriert: 11.05.2017 17:50

Re: [3.2] Child Style erstellen

Beitragvon Annika » 16.05.2017 16:21

@melmac:

Ist das immer so? Unser Forum ist noch 3.1. ... Dann speicher ich mir das hier nämlich gleich mal. Hatte ja neulich auch Fragen zu CSS und da wurde mir ebenfalls gesagt, dass sich so ein Childtheme lohnt... Glaube warst sogar du. :grin:

Lehrling
Supporter
Supporter
Beiträge: 3115
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: [3.2] Child Style erstellen

Beitragvon Lehrling » 16.05.2017 16:52

die Angaben treffen auch auf 3.1.x zu.

A.B.
Mitglied
Beiträge: 1
Registriert: 10.06.2018 10:43

Re: [3.2] Child Style erstellen

Beitragvon A.B. » 10.06.2018 22:30

Echt super-gute Anleitung - und echt verständlich ... ganz lieben Dank, hat mir sehr geholfen! :grin:


Zurück zu „Styles, Templates und Grafiken“