[3.2] Child Style erstellen

[vfrblue]

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.

[Melmac]

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

[vfrblue]

Besten dank für deine Mühe, Melmac.
Damit kann ich arbeiten.

[Melmac]

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

Viel Spaß beim Basteln

[Annika]

@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.

[Lehrling]

die Angaben treffen auch auf 3.1.x zu.

[A.B.]

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