[3.2] [3.2.1] [ALPHA] Sassysilver

In diesem Forum können Style Autoren ihre Styles vorstellen, welche sich in der Entwicklung befinden. Beachtet bitte, dass solche Styles noch Fehler enthalten könnten.
Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 2846
Registriert: 15.10.2012 03:27

[3.2] [3.2.1] [ALPHA] Sassysilver

Beitragvon Melmac » 05.06.2017 17:34

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 einem relativ frühen Entwicklungsstadium - die bisher implementierten Features sind zwar funktional, es können sich aber noch Ergänzungen und/oder Umcodierungen als erforderlich erweisen.

    Style-Version: [ALPHA] 0.4.1
    phpBB-Version: 3.2.2
    Basierend auf: prosilver, Template-Inheritance, SASS
    Sprache: de, en

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


    Demo: => die gibt es hier :wink:

    Downloads:

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


    Zusätzliche Anforderungen: SASS-Pre-Compiler (Vorschläge hierfür sie hier)
    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.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 :grin:
      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

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

Da es sich um einen Konzeptstyle handelt, bin ich für jede Anregung und Kritik (Meckern über vorhandene Fehler eingeschlossen :wink: ) dankbar - Tester sind immer willkommen!
Zuletzt geändert von Melmac am 01.04.2018 13:14, insgesamt 14-mal geändert.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

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

Re: [3.2] [DEV] Sassysilver

Beitragvon Melmac » 05.06.2017 17:34

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. Worin unterscheidet sich die Dateistruktur von SassySilver gegenüber prosilver?
    • Template-Dateien:
      SassySilver enthält nur diejenigen HTML-Dateien, die gegenüber ihren Pendants in prosilver angepasst/modifiziert wurden (=> Template Inheritance).
    • Stylesheets (CSS-Dateien):
      SassySilvers Pendant zur stylesheet.css von prosilver mit angepasster Struktur.
  3. Stylespezifische Dateien und ihre Funktion:
    • hinzugefügte Templatedateien:
      _style_config.html:
      Enthält die Definitionen und Optionswerte der eingebauten Template-Switches, die zur Anpassung des strukturellen Erscheinungsbildes des Styles dienen.
      Durch einfaches Ändern der Werte können Elemente (je nach Codierung) ein- bzw. ausgeblendet oder ihre Anzeigeorte verändert werden.
    • stylespezifische Stylesheets:
      • _assets_base.scss:
        Bindet alle SCSS-Files in den Verzeichnissen /theme/assets/functions/, /theme/assets/mixins/ und /theme/assets/modules/ ein.
      • _bourbon.scss:
        Bindet die Bourbon-Bibliothek mit vordefinierten Funktionen und Mixins für SASS ein (erspart das erneute Erfinden des Rads ;) )
      • _style_configuration.scss:
        Hier werden sämtliche später in den Stylesheets weiter verarbeiteten Basis-Variablen definiert, ebenso die zur individuellen Anpassung des Erscheinungsbildes vorgesehenen "Switches".
        Der Code in dieser Datei sollte nicht geändert werden - hierfür gibt es die
      • _custom_configuration.scss:
        Dient der Aufnahme der vom Anwender gegenüber den Vorgabewerten anzupassenden Werte der Switches (Code vie Copy & Paste aus der _style_configuration.scss hier einfügen und anschließend die Werte ändern), eigener SASS-Funktionen und Mixins.
      • _sassysilver.scss:
        Das SassySilver-spezifische CSS. Den Code dieser Datei ebenfalls nicht ändern.
        Auch hierfür gibt es wieder eine eigene Datei =>
      • _custom.scss:
        Zusätzliche CSS-Anpassungen seitens des Anwenders werden in dieser Datei zentral eingetragen und gehen somit bei einem Styleupdate nicht verloren.
      • stylesheet.scss:
        Das Pendant zur stylesheet.css von prosilver: die hier gelisteten Stylesheets werden beim Kompilieren in der Reihenfolge ihrer Import-Anweisungen abgearbeitet. Ebenfalls hier eingebunden werden die umbenannten originalen prosilver-Stylesheets im Verzeichnis /theme/assets/parent/.
      • stylesheet.css:
        Im Gegensatz zu prosilver stellt die stylesheet.css von SassySilver (wie bei allen Styles, die SASS verwenden) das Ergebnis des Kompilierungslaufs dar: sie enthält anschließend das komplette zur Formatierung der Seiten erforderliche CSS - es wird nur noch diese Seite geladen.
        Es dürfen hier keine manuellen Änderungen vorgenommen werden, da sie bei jedem Kompilieren neu erzeugt wird und dadurch die Anpassungen wieder verloren gingen.

... wird fortgesetzt ...
Zuletzt geändert von Melmac am 01.01.2018 17:16, insgesamt 2-mal geändert.
Grund: Überarbeitet => neue Dateistruktur
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: 1766
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: [3.2] [DEV] Sassysilver

Beitragvon Joyce&Luna » 05.06.2017 19:39

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
phpBB-Style-Design.de

Keine Antwort ist die eindeutigste Antwort, die man kriegen kann.
Support zu meinen Styles, bitte die Fragen im Forum stellen und nicht per PN. Danke!

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

Re: [3.2] [DEV] Sassysilver

Beitragvon Melmac » 05.06.2017 20:42

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

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;
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: 1766
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: [3.2] [DEV] Sassysilver

Beitragvon Joyce&Luna » 05.06.2017 20:52

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

Anke
phpBB-Style-Design.de

Keine Antwort ist die eindeutigste Antwort, die man kriegen kann.
Support zu meinen Styles, bitte die Fragen im Forum stellen und nicht per PN. Danke!

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

Re: [3.2] [DEV] Sassysilver

Beitragvon Melmac » 05.06.2017 21:30

Ich werde halt auch nicht jünger ... :D
Außerdem tippsele ich nach dem basisdemokratischen Zehnfingersystem: alle kommen mal ran, schön der Reihe nach und keiner wird bevorzugt ... :grin:
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

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

Re: [3.2] [DEV] Sassysilver

Beitragvon Melmac » 07.06.2017 01:28

Update auf 0.1.1 - Infos siehe Eröffnungsbeitrag
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

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

Re: [3.2] [DEV] Sassysilver

Beitragvon Melmac » 13.06.2017 19:27

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 ... :wink:
  • 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 ... :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: 1766
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: [3.2] [DEV] Sassysilver

Beitragvon Joyce&Luna » 13.06.2017 20:32

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
phpBB-Style-Design.de

Keine Antwort ist die eindeutigste Antwort, die man kriegen kann.
Support zu meinen Styles, bitte die Fragen im Forum stellen und nicht per PN. Danke!

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

Re: [3.2] [DEV] Sassysilver

Beitragvon Melmac » 13.06.2017 21:06

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

Es wäre vielleicht angebracht, dass ich mal ein paar Infos hier einstelle, wie und wo bestimmte Werte bzw. Steuerelemente angepasst werden können ( :oops: ), 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.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)


Zurück zu „Styles in Entwicklung“