[3.2] [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: 1894
Registriert: 15.10.2012 03:27

[3.2] [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 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".
    (Siehe hierzu auch die laufend ergänzte Feature-/ToDo-Liste)

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.
In einigen Bereichen ist Sassysilver mehr Konzept- denn Produktivstyle :wink:


[b]Style-Version:
0.2.1.1
phpBB-Version: 3.2.1
Basierend auf: prosilver, Template-Inheritance, SASS
Sprache: de, en

Screenshots:
sassy_01.png
Blue - Standard Headerbar

sassy_10.png
Blue - Headerbar separat

sassy_02.png
Red

sassy_03.png
Green

sassy_04.png
Black

sassy_05.png
Blue - Footer-Bereich

sassy_08.png
Blue - Forum-/Topicansicht, Fußbereich

sassy_06.png
Mini-Profil in Beiträgen - rechts

sassy_07.png
Mini-Profil in Beiträgen - links

sassy_09.png
Konfigurationsfile (mit aktuellem Testcode)


Demo URL: hier (Styleauswahl "SassySilver => v0.2.1.1 | "SassySilver Colortest" => Preview auf die kommende v0.3.0)

Style Download (Master Branch): https://github.com/DistantSun/sassysilv ... master.zip
Style Download (aktuelle Release): https://github.com/DistantSun/sassysilv ... .2.1.1.zip
GitHub Repository: https://github.com/DistantSun/sassysilver (der develop Brach wird häufiger aktualisiert :wink: )

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.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 28.08.2017 20:39, insgesamt 8-mal geändert.
Grund: Link zur Demo ergänzt
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: 1894
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):
      SassySilver importiert die stylesheet.css und somit die dort angezogenen Stylesheets von prosilver bzw. bindet die restlichen über die overall_header.html direkt ein.
      Das Theme-Verzeichnis enthält somit nur noch stylespezifische Dateien, die das originale "geerbte" prosilver-CSS ergänzen oder überschreiben.
    Dies ermöglicht zum einen die erweiterte Funktionalität bzw. optische Gestaltung des Styles, zum anderen vereinfacht es stark das manuelle Nacharbeiten bei zukünftigen Style-Updates.
  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:
      • _import_prosilver.scss:
        Über diese Datei wird die stylesheet.css von prosilver so importiert, dass sie beim Kompilieren mit abgearbeitet werden kann
      • _transition.scss:
        SassySilver verwendet für wiederkehrende identische Formatierungen Variablen und Mixiins. In dieser Datei werden alle originalen prosilver Klassen konzentriert, bei denen ursprünglich fixe eingenschfts-Werte-Zuweisungen inner halb der Klassen durch diese vordefinierten Variablen bzw. Mixins ersetzt werden sollen. Die Originalklassen werden somit überschrieben, ohne deswegen die Originaldateien ändern zu müssen.
      • _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 verwendeten Variablen, eigenen Funktionen und Mixins 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.
      • 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 29.07.2017 01:04, insgesamt 1-mal geändert.
Grund: FAQs gestrafft und neu formuliert ...
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: 1313
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

Es kommt nicht darauf an, mit dem Kopf durch die Wand zu gehen, sondern mit den Augen die Tür zu finden.
Support zu meinen Styles, bitte die Fragen im Forum stellen und nicht per PN. Danke!

Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 1894
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: 1313
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

Es kommt nicht darauf an, mit dem Kopf durch die Wand zu gehen, sondern mit den Augen die Tür zu finden.
Support zu meinen Styles, bitte die Fragen im Forum stellen und nicht per PN. Danke!

Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 1894
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: 1894
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: 1894
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: 1313
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

Es kommt nicht darauf an, mit dem Kopf durch die Wand zu gehen, sondern mit den Augen die Tür zu finden.
Support zu meinen Styles, bitte die Fragen im Forum stellen und nicht per PN. Danke!

Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 1894
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“