(v 3.1.10) unterschiedliche Breiten bei Styles

[LuMaReMa]

Wir bieten im Portal unterschiedliche Styles an. Mir ist aufgefallen, dass die Styles auf dem Bildschirm unterschiedliche Breiten haben:

http://up.picr.de/27764622or.jpg

http://up.picr.de/27764624ri.jpg

Ausserdem fehlt bei anderen Styles unser Logo oben links:

http://up.picr.de/27764636bf.jpg

Woran liegt das und kann ich das einstellen, dass alles gleich aussieht?

LG Ludger

[Melmac]

Hi,

die Vorgabewerte der die Breite des jeweiligen Styles definierende Klasse unterschieden sich bei den einzelnen Styles:

1. Prosilver SE: max-width: 850px;
2. Orange_BBEs: max-width: 1152px; => da dieser Style die stylesheet.css von Prosilver komplett importiert und nutzt, wird auch dies von Prosilver übernommen.
3. Elegance: max-width: 1152px;

Die Sidebars der Board3-Extension werden innerhalb dieser zur Verfügung stehenden Maximalen Gesamtbreite angezeigt.

Um es einheitlich zu machen, kannst Du das zuständige CSS der Styles jeweils auf einen einheitlichen Wert setzen..

1. Prosilver SE:
   stylesheet.css (~ Zeile 21):

   Code: Alles auswählen

   #wrap {
   	max-width: 850px;
   	margin: 0 auto;
   	padding: 13px 23px;
   	border: 2px solid #FFF;
   	border-radius: 15px;
   	box-shadow: 0 0 5px 2px #9D9A93, inset 0 3px 18px rgba(100, 100, 100, .25);
   }

   Hier den Wert für max-width: anpassen
2. Orange_BBEs:
   öffne orange_bbes.css und füge ganz am Ende in einer neuen Zeile ein

   Code: Alles auswählen

   /* Own stuff */
   #wrap {
   	max-width: 1450px;
   }

   Die "1450px" sind jetzt nur ein Beispiel
3. Elegance:
   Das wird etwas komplizierter ...
   Das liefere ich in einem neuen Post nach - zusammen mit der Anleitung für die Sache mit dem Logo.

btw: Wie bist Du beim Style Elegance vorgegangen?

[Melmac]

Der zweite Teil ...

Der Style Elegance, wie alle Styles von Arty für phpBB 3.1.x,, weist einige Besonderheiten im Vergleich zu "normalen" Styles auf, weswegen bei Styleanpassungen oft einiges etwas anders läuft als gewohnt.
Ein Punkt ist: bei den Stylesheets wird SASS eingesetzt.
Damit Änderungen an den Stylesheets (= den ".scss"-Files im Theme-Verzeichnis) wirksam werden, müssen sie erst noch neu kompiliert werden (sie verwenden kein "normales" SCSS sondern SASS - beim Kompilieren wird dann SASS in "normales" CSS übersetzt).

Damit dies nicht zu kompliziert wird, gibt es hierfür von Arty auch eine entsprechende Extension, die Du zuerst installieren solltest: => Sass compiler for phpBB 3.1

- das ZIP runterladen und entpacken
- den so erhaltenen Ordner "arty" ins Verzeichnis /ext/ Deines Forums hochladen
- danach ganz normal wie jede andere Extension auch im ACP > Anpassen > "Erweiterungen verwalten" aktivieren

Danach gibt es unter dem Menüpunkt "Styles-Verwaltung einen neuen Eintrag: "Compile Themes"
=> [ externes Bild ]

Nach Änderungen an den Stylesheets diesen dann anwählen und in der neuen Maske beim Eintrag des Styles "Recompile theme" anklicken.
(Der Screenshot zeigt jetzt Latte statt Elegance, aber das Prinzip geht ja daraus hervor)
=> [ externes Bild ]
Sobald die Rekompilierung erfolgreich abgeschlossen ist, erhälts Du eine entsprechende Bestätigung.
Danach noch den Board-Cache leeren.


Zu Deinen Fragen:

1) Das Logo:
Schritt für Schritt

1. Speichere Deine Logo-Grafik unter dem Namen logo.gif im Verzeichnis /styles/elegance/theme/images/
2. öffne /styles/elegance/template/overall_header.html und suche (~ Zeile 82)

   Code: Alles auswählen

   <a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><img src="{T_THEME_PATH}/images/logo.png" data-src-hd="{T_THEME_PATH}/images/logo_hd.png" /></a>

   ersetze dies durch

   Code: Alles auswählen

   <a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><img src="{T_THEME_PATH}/images/logo.gif" data-src-hd="{T_THEME_PATH}/images/logo.gif" /></a>

3. öffne /styles/elegance/theme/_custom.scss und füge am Ende in einer neuen Zeile ein

   Code: Alles auswählen

   .logo img {
       width: 300px;
       height: auto;
   }

4. Wie oben beschrieben das Stylesheet re-kompilieren
5. sicherheitshalber den Board- und den Browser-Cache leeren.

2) Falls Du die Breite des Styles ändern willst

1. öffne /styles/elegance/theme/_style_config.scss
2. suche (~ Zeile 21)

   Code: Alles auswählen

   $max-width:								1152px !default;

3. kopiere diesen Code, öffne /styles/elegance/theme/_custom_config.scss und füge den kopierten Code dort in einer neuen Zeile ein.
4. Jetzt kannst Du dort den Wert entsprechend anpassen; Beispiel:

   Code: Alles auswählen

   $max-width:								1450px;

5. danach wieder neu kompilieren, Caches löschen - ferddisch

[LuMaReMa]

Uff, das muss ich erst mal verdauen und in einem ruhigen Moment abarbeiten.

Erst mal danke - ich werde mich dann melden, wenn ich das durch habe.

LG Ludger

[LuMaReMa]

Also dass mit dem Style elgance hat schon mal geklappt.

Jetzt haeb ich gerade beim durchlesen entdeckt, dass ich gestern etwas überlesen habe. Was meinst du mit:

btw: Wie bist Du beim Style Elegance vorgegangen?

Achso, noch ne Frage: Es gibt ja jede Menge unterschiedliche Bildschirmbreiten. Kann man das eigentlich auch so eisntellen, dass die Styles automatisch der max verfügbaren Breite angepasst werden?

LG Ludger

[Melmac]

Das mit meiner noch offenen Frage hat sich jetzt eigentlich erledigt - ich war mir eingangs nicht sicher, ob Du bereits an Elegance etwas angepasst hast und daher vertraut mit dem "speziellen Procedere" bist.

Klar, die Styles kannst Du entsprechend anpassen. Bei Prosilver-basierten Styles wird dies meist im Selektor #wrap gesteuert. In welchem File dieser zu finden ist, kann sich aber von Style zu Style unterscheiden.
In Prosilver selbst ist er in der common.css ... bei den drei von Dir eingesetzten Styles weicht das jetzt ab.

Wenn Du bei ihnen keine festen Maximalbreiten sondern die komplette Breite verwenden willst, dann mache am besten die von mir oben vorgeschlagenen Codeanpassungen erst einmal wieder rückgängig.
Stattdessen dann:

1. Orange_BBEs:
   Dieser Style importiert, wie schon erwähnt, die stylesheet.css von Prosilver und benutzt somit dessen kompletten Satz an CSS-Files mit.
   Alle stylespezifischen Anpassungen und Abweichungen gegenüber dem originalen CSS sind in der orange_bbes.css hinterlegt und "überschreiben" dann quasi ihre jeweiligen Pendants in Prosilver.
   Füge daher am Ende dieser Datei in einer neuen Zeile folgendes ein:

   Code: Alles auswählen

   #wrap {
   	max-width: none;
   	margin: 0 24px;
   }

   max-width: none; "deaktiviert" die durch Prosilver eigentlich vorgegebene maximale Darstellungsbreite: es wird jetzt 100% der verfügbaren Breite genutzt.
   margin: 0 24px fügt links und rechts einen kleinen Abstand ein - sieht, IMHO, etwas besser aus.
2. Prosilver SE:
   Öffne die stylesheet.css und suche (ab ~ Zeile 21)

   Code: Alles auswählen

   #wrap {
   	max-width: 850px;
   	margin: 0 auto;

   ersetze dies durch

   Code: Alles auswählen

   #wrap {
   	max-width: none;
   	margin: 0 24px;

   Hierzu gilt im Prinzip das gleiche wie bei Orange_BBEs.
3. Elegance:
   Öffne _custom_config.scss und füge am Ende in einer neuen Zeile ein:

   Code: Alles auswählen

   $max-width:								none;

   Speichern, neu kompilieren.

[LuMaReMa]

Toll danke. werde ich morgen erst mal in der Testumgebung ausprobieren und danach in das Originalforum einfügen. Gibt es eigentlich irgendwo eine Liste, welcher Style welchen Ursprung hat bzw. auf welchenStyle er basiert?

LG Ludger

[Kirk]

Gibt es eigentlich irgendwo eine Liste, welcher Style welchen Ursprung hat bzw. auf welchenStyle er basiert?

Eine Liste gibt es nicht aber in der Beschreibung steht es meistens dort auf was der Style basiert, die meisten Styles basieren auf prosilver.
Es gibt unter 3.1.x nur 2 Standard Styles nämlich prosilver und subsilver2

[LuMaReMa]

Danke für die Info

LG Ludger

[canonknipser]

Unter phpBB 3.1 werden die Vererbungen der installierten Styles auch im ACP in der Styleverwaltung dargestellt.