[3.2] [BETA] Sassysilver

[Melmac]

Name des Styles: Sassysilver
Autor: Melmac
Ideengeber: Artys Styles
Danke an: alle, die Ideen, Kritik & Verbesserungsvorschläge einbringen und sich die Mühe des Testens machen! (Talk19zehn, Joyce&Luna, Kirk ...)

Beschreibung des Styles:

• Sassysilver ist eine Ableitung von und basiert auf prosilver (Template-Inheritance; neu: weitestgehende Style-"Inheritance").
• Anpassungen an den Template-Dateien sind auf ein Minimum beschränkt: vorhandener Code wird stellenweise aus funktionalen Gründen gesplittet oder in neue HTML-Dateien "ausgelagert", bleibt aber in sich soweit als möglich unverändert.
• Im Bereich der Stylesheets, insbesondere in den neuen Konfigurationsdateien, wird SASS/SCSS eingesetzt.
• Für den Anwender vereinfachte Anpassungs- und Gestaltungsmöglichkeiten durch "Konfigurationsschalter".
  Soweit sinnvoll umsetzbar erfolgt das Umschalten zwischen den einzelnen Layoutoptionen rein über CSS/SCSS, um die Anpassungen der Templatedateien so gering als möglich zu halten

Wichtig: Sassysilver befindet sich aktuell noch in Entwicklung!
Die bisher implementierten Features sind zwar funktional, es können sich aber noch Ergänzungen und/oder Umcodierungen als erforderlich erweisen.

Style-Version: [BETA] 0.5.0
phpBB-Version: 3.2.3
Basierend auf: prosilver, Template-Inheritance, SASS
Sprache: de, en

Screenshots:
*** demnächst gibt es neue - bitte noch etwas Geduld haben ***


Demo: => die gibt es hier

Downloads: https://github.com/DistantSun/sassysilver/releases

Issues:
Fehlermeldungen, Änderungswünsche etc.: https://github.com/DistantSun/sassysilver/issues oder hier im Topic.


Zusätzliche Anforderungen: SASS-Compiler (Vorschläge hierfür sie hier), Alternativ Artys SASS Compiler Extension.
Damit Änderungen an den Stylesheets wirksam werden, muss die Datei stylesheet.css neu erstellt werden. Diese Datei enthält nach dem Kompilieren sämtlichen aufbereiteten und in reguläre CSS-Syntax "übersetzten" Code der einzelnen *.scss-Files, auf den dann beim Formatieren zugegriffen wird.

Wichtig: Die Datei stylesheet.css darf nicht editiert werden, da ansonsten im nächsten Compilerlauf die vorgenommenen Änderungen überschrieben werden!]
Für eigene Codeanpassungen sind entsprechende Konfigurationsdateien vorgesehen und vorbereitet.


-------------------------------------

Changelog:

• 0.5.0 (09.10.2018 -- Erste BETA ( ) & Update auf phpBB 3.2.3
  Details siehe =>
• 0.4.1 (28.03.2018 -- u.a. Wahlmöglichkeit zwischen verschiedenen Iconsets, neue Headerbar mit neuem Default-Logo (Positionierung umschaltbar: link / mittig /rechts), Bugfixes; weitere Details siehe hier => viewtopic.php?f=154&t=239773&p=1381155#p1381155
• 0.4.0 (08.01.18) -- Update auf phpBB 3.2.2
• 0.3.0 (19.12.17) -- Umbau der Dateistruktur =>
  • Neue Unterordner im /theme-Verzeichnis
    • /assets: enthält die für den Basisstyle erforderlichen Komponenten, aufgeteilt in weitere Unterordner:
    • /assets/parent: enthält alle Stylesheets, die in prosilver via stylesheet.css werden im Original (einziger Unterschied: die Namen wurden gemäß der SASS Konvention umbenannt, um sie in den Kompilierungslauf mit einbeziehen zu können).
    • assets/bourbon: enthält die Files der Bourbon-Bibliothek
    • assets/functions: enthält zusätzliche SASS-Funktionen in separaten Dateien
    • assets/mixins: enthält zusätzliche SASS-Mixins in separaten Dateien
    • assets/modules: enthält die Formatierungsregeln für die einzelnen "Modulblöcke", getrennt nach den jeweiligen Objekten (z.B. eine Datei mit den Formatierungen für Beiträge)
  • stylesheet.scss an die neue Dateistruktur angepasst; eine dedizierte _assets_base.scss hinzugefügt, die die Dateien im /assets-Verzeichnis einbindet
  • SASS-Funktionen und -Mixins aus den bisherigen Stylesheets herausgezogen und auf die o.g. Ordner/Dateien verteilt
  • Code für die Anzeige der Beiträge und die Anzeige des Postprofiles rechts/links bzw. der optionalen getrennten Anzeige von Postprofile und Postbody neu geschrieben
  • Fehler in der responsiven Ansicht korrigiert
  • Code aufgräumt und vereinfacht
  • Für Koala-Benutzer: eine angepasste Konfigurationsdatei für Koala => koala-config.json ist im Archiv enthalten.
• 0.2.1.1 (02.08.17) -- Bugfix => Reihenfolge der @import Regeln geändert
• 0.2.1 (29.07.17) -- Aktualisiert für phpBB 3.2.1; Bereinigungen und Bugfixes
• 0.2.0 (23.07.17) -- Erste ALPHA Version des Styles
  Kompletter Umbau der Stylesheet Struktur; Codebereinigungen; Bugfixes;
• 0.1.4.1 (25.06.17) -- Layout-Anpassungen, Code-Bereinigungen, Bug Fixes
• 0.1.3 (25.06.17) -- Mini-Profil in Beiträgen umschaltbar rechts <-> links; Begrenzung der Anzeigebreite des Mini-Profils bei Auflösungen >= 1100px; Codebereinigungen; Bug Fixes
• 0.1.2 (18.06.17) -- Headerbar "klassisch"/eigener Block u. Postprofile rechts/links jeweils umschaltbar; Codebereinigungen
• 0.1.1 (07.06.17) -- Mapping erweitert auf Navbar und Headerbar, Farbkorrekturen in den Maps
• 0.1.0 (05.06.17) -- erste DEV-Version

[/list][/list]

-------------------------------------

Da es sich um einen Konzeptstyle handelt, bin ich für jede Anregung und Kritik (Meckern über vorhandene Fehler eingeschlossen ) dankbar - Tester sind immer willkommen!

[Melmac]

Infos & How To's

1. Warum wird ein SASS-Compiler benötigt?
   In den stylespezifischen Stylesheets kommt SASS/SCSS zum Einsatz. SASS stellt eine (Syntax-)Erweiterung für CSS dar, die die Möglichkeiten beim Schreiben von CSS-Code stark erweitert.
   Ein SASS-Compiler übersetzt diese Syntax beim Kompilieren wieder zurück in "herkömmliches" CSS, das von jedem Browser verarbeitet werden kann.
2. Eigenes (Farb-)Schema erstellen und einbinden
   Im Verzeichnis /theme/core/schemes/ liegt eine Musterdatei _sample.scss => diese kopieren und unter einem neuen Namen im Verzeichnis /theme/custom_files/colour_schemes/ speichern. Beispiel: unter _meins.scss.
   
   Die Datei danach öffnen und alle Vorkommen von $sample durch $meins ersetzen - dies ist erforderlich, um später die Variablen in ihr gezielt ansprechen zu können.
   
   In der /theme/_framework.scss unter dem Abschnitt 5.2 Import custom colour schemes die Datei importieren =>
   @import 'custom_files/colour_schemes/meins;
   
   Ein letzter Schritt noch: sie muss dem die Umschaltung zwischen den Schemadateien steuernden Code "bekanntgemacht" werden =>
   In der /theme/core/configuration/_scheme_configuration.scss nach der Map suchen, die alle auswählbaren Schemadateien mit ihren jeweils spezifischen/eindeutigen Variablen-"Vornamen" verknüft =>

   Code: Alles auswählen

   $colour-maps: (

   Dort am Ende der Liste der vorhandenen Einträgen für die enthaltenen Beispielschemata einen neuen hinzufügen, am Beispiel hier also meins: $meins,
   
   Das neue Schema ist damit rein technisch "betriebsbereit", was noch fehlt sind die eigenen Farbanpassungen.
   
   Das Schema-Stylesheet enthält zwei Abschnitte:
   • 1. Basic colours:
     Hier werden die Werte für einige Basisvariablen definiert, die dann im folgenden Abschnitt dazu weiterverwendet werden können, um z.B. Abhängigkeiten ableiten zu lassen.
   • 2. Map of secondary colour definitions
     Eine Map ist imgrunde genommen eine Art Tabelle, die eine Liste von Schlüssel->Wert Paaren enthält, nach denen dann gezielt selektiert werden kann.
     ("Nehme aus der Map mit dem Namen X den Wert, der beim Schlüssel Y steht")
     
     Hier sind alle Variablen aufgeführt, deren Werte dann am Ende des Prozesses im Style zum Tragen kommen können.
     Die Werte können beliebig angepasst werden: es funktionieren "feste" Werte (z.B. #123456, Variablen, die im Abschnitt (1) definiert wurden und auch Funktionen, mit denen diese manipuliert werden können.
     
     Wichtig: nur die Werte anpassen, nicht den Namen der Variablen (z.B. button-icon-hover) ändern! Die Variablennamen werden als Auswahlschlüssel verwendet und müssen daher in allen Schemadateien identisch sein!
     Variablen. deren Werte nicht angepasst werden müssen/sollen: einfach so stehen lassen, wie sie vordefiniert sind.
   Zum Abschluss wieder alles neu kompilieren
   
   Zum Umschalten zwischen den vorhandenen Schematas: in der theme/custom_files/_custom_configuration.scss nach

   Code: Alles auswählen

   $switch-col-scheme:               default;

   suchen und default durch den Namen des gewünschten Schemas ersetzen, z.B.

   Code: Alles auswählen

   $switch-col-scheme:               meins;

   und neu kompilieren.
   Danach wird der Style im neuen Schema-Design angezeigt.

[Joyce&Luna]

Hi Melmac

Ich habe mir das mal installiert http://phpbb-testforum.bergkatzen.com/index.php ich sehe aber nur ein reines Prosilver.
Forabg hat nur eine dunklere Farbe.

Anke

[Melmac]

Das ging aber jetzt schnell ... ich bin noch gar nicht dazu gekommen, die Anleitung fürs Wechseln des Farbschemas zu posten

Dass erst einmal alles wie bei prosilver aussieht ist normal - dies ist die Default-Konfiguration des Styles.

Um zwischen den Schemata zu wechseln:

• öffne _style_configuration.scss
• kopiere die Zeile

  Code: Alles auswählen

  $col_scheme:                                0 !default;

  und füge sie in _custom_configuration.scss ein
• dort (nicht die _style_configuration.scss editieren!) kannst Du dann den Vorgabewert von 0 auf 1, 2 oder 3 ändern
• speichern und neu kompilieren

Wenn Du danach die Seite im Board neu lädst, sollten body und Foren- bzw. Kategoriehintergründe die Farbe wechseln.

----------------------------

Als Erläuterung - wie funktioniert das ganze:

$col_scheme ist eine Variable, deren Rückgabewert (=> 0/1/2/3) Du hier gerade festlegst.
Dieser Rückgabewert wird im nächsten Schritt als Schlüssel verwendet, um aus einer sogenannten Map den zugehörigen Farbcode zu identifizieren.
Das geschieht hier:

Code: Alles auswählen

$col_body:  map_get((0: #f5f7fa, 1: #360300, 2: #002515, 3: #151818), $col_scheme);
$col_category: map_get((0:#0076b1, 1: #6B0500, 2: #00492A, 3: #1A2626), $col_scheme);

(Die erste Zeile steuert letztendlich die Hintergrundfarbe des Boards, die zweite die der Klassen forabg und forumbg.)

Die jeweils ermittelten Farbcodes werden dann als Rückgabewerte für die Variablen $col_body und $col_category verwendet, die in den betreffenden Stylesheets als Werte der Eigenschaft background-color einer Klasse anstelle der bisherigen "fixen" Farbcodes eingefügt sind.
Z.B. so:

Code: Alles auswählen

html, body {
  color: #536482;
  background-color: $col_body;

[Joyce&Luna]

Was kann ich dafür, das du so langsam bist
Werde ich gleich mal testen, dauert noch was.

Anke

[Melmac]

Ich werde halt auch nicht jünger ...
Außerdem tippsele ich nach dem basisdemokratischen Zehnfingersystem: alle kommen mal ran, schön der Reihe nach und keiner wird bevorzugt ...

[Melmac]

Update auf 0.1.1 - Infos siehe Eröffnungsbeitrag

[Melmac]

Kleines Update ohne Änderung der Versionsnummer - Downloadlink siehe erster Beitrag.

• Änderungen:
  • Innerhalb der Farbschemata werden die Farbwerte der einzelnen Elemente in Abhängigkeit des jeweiligen Basisfarbwertes automatisch berechnet => jetzt über das Hinzufügen von Weiß- (=> Farbaufhellung) oder Schwarzanteilen (=> Abdunkeln der Farben) zum Basiswert des Schemas.
    Übergabe der errechneten Frabwerte an die betroffenen Klassen in den Stylesheets über Variablen.
    Vorteil: Es reicht, bei Bedarf den Basisfarbwert zu ändern - alle sekundären Farbwerte werden automatisch angepasst und übergeben.
  • Bourbon (eine Sammlung von fertigen Funktionen und Mixins) wurde eingebunden (man muss ja nicht jedes Rad neu erfinden ...
• Neu
  • Die Headerbar (= der Container, der u.a. das Logo enthält) kann über Setzen einer einzigen Variablen abgetrennt und oberhalb des eigentlichen Boardbereichs platziert werden.
    Die Breite ist dann in der Defaulteinstellung an den Wert der Boardbreite gekoppelt, kann aber bei Bedarf separat im Konfigurationsfile angepasst werden.
    (Momentan betrifft das nur die Anzeigebreite der abgetrennten Headerbar, der Rest kommt aber noch ... )

[Joyce&Luna]

Warst ja wieder sehr fleißig, bis jetzt bin ich selber noch gar nicht weiter gekommen.
Heute ist wieder einiges dazwischen gekommen.
Man nimmt sich immer viel vor und klappen tut nichts.

Werde mir das mal von dir herunter laden und mir anschauen.
Eins hatte ich ja mal eingebaut, die Info hattest du ja von mir da bekommen.
Hast du diese übernommen?

Anke

[Melmac]

Schrittchen für Schrittchen - bis zur Rente sollte das doch zu schaffen sein

Es wäre vielleicht angebracht, dass ich mal ein paar Infos hier einstelle, wie und wo bestimmte Werte bzw. Steuerelemente angepasst werden können ( ), um den Style nach eigenen Vorstellen zu modifizieren.
Es ist ja Teil des "Plans" gewesen, bei den wichtigsten oder am häufigsten vorkommenden Änderungswünschen als Anwender möglichst wenig Code in die Hand nehmen zu müssen.