[3.2] Neues Child-Style basierend auf prosilver erstellt, aber ...

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.3, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
Benutzeravatar
donsenilo
Mitglied
Beiträge: 155
Registriert: 13.12.2011 18:44
Wohnort: Wien
Kontaktdaten:

[3.2] Neues Child-Style basierend auf prosilver erstellt, aber ...

Beitrag von donsenilo »

Hallo

ich habe mir die Anleitung durchgelesen und (soweit ich es verstanden habe) durchgeführt, jedoch passen einige optische Dinge nicht.
Da ich nur die 5 css-Dateien brauche, übernehme ich die Restlichen vom Original-prosilver.

In der stylesheet.css habe ich folgendes drin:

Code: Alles auswählen

@import url("colours.css?v=3.2");
@import url("common.css?v=3.2");
@import url("content.css?v=3.2");
@import url("icons.css?v=3.2");
@import url("links.css?v=3.2");

<link href="{ROOT_PATH}styles/prosilver/theme/normalize.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />
<link href="{ROOT_PATH}styles/prosilver/theme/base.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />
<link href="{ROOT_PATH}styles/prosilver/theme/utilities.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />
<link href="{ROOT_PATH}styles/prosilver/theme/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />
<link href="{ROOT_PATH}styles/prosilver/theme/buttons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />
<link href="{ROOT_PATH}styles/prosilver/theme/cp.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />
<link href="{ROOT_PATH}styles/prosilver/theme/forms.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />
Habe ich etwas übersehen, vergessen, falsch verstanden oder alles komplett falsch verstanden ?
Und welche Dateien muss man für ein neues, auf prosilver basierendes Style hochladen ?

Vielen Dank im voraus.
vfrblue
Ehemaliges Teammitglied
Beiträge: 1993
Registriert: 22.11.2016 18:46

Re: [3.2] Neues Child-Style basierend auf prosilver erstellt, aber ...

Beitrag von vfrblue »

Bist du nach dieser Anleitung vorgegangen? https://www.phpbb.de/kb/create31style

In einer css kannst du andere css-dateien nur mit @import einbinden. Das Einbinden mit <link ... geschieht im Template.
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: [3.2] Neues Child-Style basierend auf prosilver erstellt, aber ...

Beitrag von Melmac »

Welche der im verlinkten Artikel aufgeführten Möglichkeiten Du nutzt, hängt auch davon ab, wie umfangreich Deine Änderungen am ursprünglichen Code ausfallen werden und wie viel oder wie wenig Aufwand Du bei zukünftigen Styleupdates haben möchtest.
Von daher, in Ergänzung zu dem, was vfrblue bereits zum Importieren der prosilver Stylesheets geschrieben hat, vielleicht noch ein paar weitere Infos:

Die Reihenfolge, in der die einzelnen Stylesheets importiert oder in Deinem Style anderweitig eingebunden werden, ist wichtig, ansonsten bringst Du das Konzept der Cascading Stylesheets durcheinander.
Vereinfacht gesagt: sie bauen aufeinander auf und die Reihenfolge der einzelnen Dateien hat, wenn Eigenschaften einer Klasse/eines Selektors in mehr als nur einem Stylesheet definiert sind, einen Einfluss darauf, welche der Definition sich am Ende "durchsetzen" wird.

Deine momentane stylesheet.css wird also nicht nur alleine deswegen bereits zu Problemen führen, weil Du Stylesheets dort nicht verlinken, sondern, generell, nur importieren kannst, sondern eben auch, weil deren Reihenfolge jetzt komplett durcheinander geraten ist.

Mit Blick auf möglichst einfache Styleupdates wäre es vielleicht eine Überlegung wert, hier jetzt erst einmal alle prosilver Stylesheets einzubinden und danach nur noch den Code in Deinem Style aufzuführen, den Du brauchst,um Deine Anpassungen umzusetzen
Ein paar Ansätze, die mir aus dem Stegreif dazu einfallen:
  • Der einfachste Weg:
    1. Lege im /theme Verzeichnis Deines Styles eine neue leere Datei custom.css an
      (Alternativ: benenne z.B. die colours.css entsprechend um und entferne deren Inhalt)
    2. Öffne Deine stylesheet.css und ersetze deren Inhalt durch

      Code: Alles auswählen

      /*  phpBB3 Style Sheet
          --------------------------------------------------------------
      	Style name:	   *Name Deines Styles*
      	Based on style:     prosilver (the default phpBB 3.1.x style)
      	Original author:    Tom Beddard ( http://www.subblue.com/ )
      	Modified by:	   *Dein Name*
          --------------------------------------------------------------
      */
      
      @import url("../../prosilver/theme/stylesheet.css");
      @import url("custom.css?v=3.2");
      
      (Dieses @import url("../../prosilver/theme/stylesheet.css"); entspricht zwar nicht ganz dem "hehren Ideal", ist aber auch nicht falsch :wink: )
    3. Öffne die overall_header.html
      suche

      Code: Alles auswählen

      <link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
      ersetze durch

      Code: Alles auswählen

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

      Code: Alles auswählen

      <link href="{T_THEME_PATH}/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
      ersetze durch

      Code: Alles auswählen

      {ROOT_PATH}styles/prosilver/theme/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
      suche

      Code: Alles auswählen

      <link href="{T_THEME_PATH}/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
      ersetze durch

      Code: Alles auswählen

      {ROOT_PATH}styles/prosilver/theme/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
    4. Öffne das /theme Verzeichnis Deines Styles und lösche alle Dateien außer index.htm, stylesheet.css und custom.css
Alle Anpassungen am CSS, die Du vornehmen willst, setzt Du jetzt in die custom.css ein. Von dort überschreiben sie dann den von prosilver "geerbten" originalen Code.

Solltest Du keine HTML-Dateien anpassen bzw. bisher angepasst haben (mit Ausnahme der overall_header.html, wenn Du so vorgehst, wie oben beschrieben), dann kannst Du außerdem das Potenzial der Template Inheritance nurtzen, um Deinen Style noch mehr zu vereinfachen:
Lösche hierfür alle HTML-Dateien im /template Verzeichnis Deines Styles außer denjenigen, die Du verändert hast - im Idealfall also alle außer der overall_header.html.
Zuletzt geändert von Melmac am 04.09.2017 04:11, insgesamt 1-mal geändert.
Grund: Vertipper im Code korrigiert
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Lehrling
Ehemaliges Teammitglied
Beiträge: 3833
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: [3.2] Neues Child-Style basierend auf prosilver erstellt, aber ...

Beitrag von Lehrling »

Der aktuelle offizielle Stand der Dinge sieht so aus:
du kopierst prosilver und benennst den Ordner um. In der style.cfg passt du den Namen an. Aus dem Ordner template löschst du alles außer die index.htm, die overall_header.html und die simple_header.html.
Du öffnest die Datei overall_header.html und löschst alles, was zwischen

Code: Alles auswählen

s.parentNode.insertBefore(wf, s);
	})(document);
	</script>
<!-- ENDIF -->
und

Code: Alles auswählen

{$STYLESHEETS}
steht.
Dann fügst du dort folgendes ein:

Code: Alles auswählen

<link href="{ROOT_PATH}styles/prosilver/theme/normalize.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/base.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/utilities.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/common.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/links.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/content.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/buttons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/cp.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/forms.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/icons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/colours.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">

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

<!-- 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]-->

<!-- EVENT overall_header_head_append -->
Dasselbe machst du mit der simple_header.html.
Dann löschst du alle Stylesheets aus dem Ordner theme außer stylesheet.css! Die Ordner images und de etc. bleiben natürlich stehen.
Du öffnest das stylesheet.css und passt oben den Namen an und löscht dann diesen Teil heraus:

Code: Alles auswählen

@import url("normalize.css");
@import url("base.css");
@import url("utilities.css");
@import url("common.css");
@import url("links.css");
@import url("content.css");
@import url("buttons.css");
@import url("cp.css");
@import url("forms.css");
@import url("icons.css");
@import url("colours.css");
@import url("responsive.css");
Deine Styleänderungen fügst du ins stylesheet.css ein. Du brauchst also kein eigenes Stylesheet dafür anzulegen.
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: [3.2] Neues Child-Style basierend auf prosilver erstellt, aber ...

Beitrag von Melmac »

Die nächste der einfachen Möglichkeiten:
  1. Diesen Schritt aus dem obigen Ansatz weglassen
  2. Wie oben, nur mit dem Unterschied, dass Du dabei

    entweder
    1. die Zeilen

      Code: Alles auswählen

      @import url("../../prosilver/theme/stylesheet.css");
      @import url("custom.css?v=3.2");
      weglässt und Deinen eigenen Code direkt in diese Datei reinschreibst

      oder
    2. nur die Zeile

      Code: Alles auswählen

      @import url("../../prosilver/theme/stylesheet.css");
      weglässt => Dein eigener Code commt dann weiterhin in die custom.css
      (Die Du dann trotzdem erstellen müsstest)
  3. Wie oben, nur dass Du noch zusätzlich eine zusätzliche Anpassungen an der overall_header.html vornimmst:

    suche

    Code: Alles auswählen

    <link href="{T_STYLESHEET_LINK}" rel="stylesheet">
    und füge davor in einer neuen Zeile ein

    Code: Alles auswählen

    <link href="{ROOT_PATH}styles/prosilver/theme/stylesheet.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
    Dies bewirkt das gleiche wie das jetzt entfallene @import url("../../prosilver/theme/stylesheet.css"); in der stylesheet.css: es wird jetzt zuerst die stylesheet.css von prosilver geladen (und damit alle dort angezogenen Stylesheets) bzw. abgearbeitet und danach dann erst die Deines Styles, die Deine Anpassungen reinbringt.
  4. Wieder wie oben - diese Dateien sind ja weiterhin "überflüssig"

Beide Ansätze, der aus meiner ersten Antwort wie auch dieser hier, funktionieren in aller Regel bei den meisten der "üblichen" Anpassungen des originalen CSS von prosilver: immer dann, wenn es reicht (eigentlich: wenn die Mittel von CSS es hergeben ...), neue Klassen/Selektoren hinzuzufügen bzw. bestehende zu "deaktivieren" oder Eingeschaften originaler prosilver Klassen zu überschreiben bzw. zu ergänzen.

Sollte dies doch mal der Fall sein, dann ist Lehrlings Ansatz derjenige, der genommen werden müsste.
Zuletzt geändert von Melmac am 04.09.2017 04:10, insgesamt 1-mal geändert.
Grund: Vertipper im Code korrigiert
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Benutzeravatar
donsenilo
Mitglied
Beiträge: 155
Registriert: 13.12.2011 18:44
Wohnort: Wien
Kontaktdaten:

Re: [3.2] Neues Child-Style basierend auf prosilver erstellt, aber ...

Beitrag von donsenilo »

Hallo

ich habe mich an die Variante von Lehrling gehalten und ... tataaaa ... es funktioniert ! :grin:

Vielen Dank an Lehrling und Melmac für die schnelle und (sogar für mich :oops: ) verständliche Unterstützung !
Benutzeravatar
Joyce&Luna
Mitglied
Beiträge: 2470
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: [3.2] Neues Child-Style basierend auf prosilver erstellt, aber ...

Beitrag von Joyce&Luna »

Melmac hat geschrieben:Die nächste der einfachen Möglichkeiten:

entweder
  1. die Zeilen

    Code: Alles auswählen

    @import url("../../prosilver/theme/stylesheet.css");
    @import url("custom.cssv=3.2");
    weglässt und Deinen eigenen Code direkt in diese Datei reinschreibst
Dir ist ein kleiner Fehler unterlaufen.
Damit funktioniert das aber nicht, weil du hinter custom.css ein ? vergessen hast.
Das muss heißen custom.css?v=3.2

Anke
phpBB-Style-Design.de

Keine Antwort ist die eindeutigste Antwort, die man kriegen kann.
Bitte stellt die Fragen im Forum und nicht per PN. Danke!
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: [3.2] Neues Child-Style basierend auf prosilver erstellt, aber ...

Beitrag von Melmac »

Yo, da habe ich mich wohl mal vertippt :wink:
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Benutzeravatar
Joyce&Luna
Mitglied
Beiträge: 2470
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: [3.2] Neues Child-Style basierend auf prosilver erstellt, aber ...

Beitrag von Joyce&Luna »

Das kann ja mal passieren, wir sind ja alle nur Menschen.
Aber ich würde es oben korrigieren, wenn da einer Schritt für Schritt das ab arbeitet das es auch auf Anhieb klappt.
Denn ihr habt das ja schön verständlich beschrieben.

Anke
phpBB-Style-Design.de

Keine Antwort ist die eindeutigste Antwort, die man kriegen kann.
Bitte stellt die Fragen im Forum und nicht per PN. Danke!
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: [3.2] Neues Child-Style basierend auf prosilver erstellt, aber ...

Beitrag von Melmac »

Done - in beiden Posts.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Antworten

Zurück zu „Styles, Templates und Grafiken“