Farben der Contao Official Demo (globale Variablen)

Hallo,

wie geht man theoretisch vor, wenn man die Farben der Contao Official Demo ändern will?

In der Übergangszeit von Versionen und Demos sprachen wir entsprechend von Übergangslösungen.
Aber die dürfte ja nun vorbei sein.

Ich hab also eine neue 3.5.2 LTS installiert, die COD über die Extension geholt und via install.php installiert.
Die Web läuft.

Nun will ich aber, wie letztes Mal, wieder das Gleiche in Grün haben.

Macht man das nicht über die globalen Variablen im Theme (selbst wenn an der einen oder anderen Stelle, eine alte Farbe hängen bleibt)?

Caches sind deaktiviert, via Systemwartung Daten bereinigt, CSS-Dateien aus dem assets-Ordner gelöscht ...
Keine Farbe hat sich geändert.

Fehlt mir da ein Schritt?

Was mich übrigens wundert: Während es früher unter Theme/Stylesheets um die 20 CSS-Einträge gab, hab ich aktuell gar keinen. Ist das normal?

Zitat:

---

Zitat von Contaona

Macht man das nicht über die globalen Variablen im Theme (selbst wenn an der einen oder anderen Stelle, eine alte Farbe hängen bleibt)?
Caches sind deaktiviert, via Systemwartung Daten bereinigt, CSS-Dateien aus dem assets-Ordner gelöscht ...
Keine Farbe hat sich geändert.

---

Durch Einführung von SCSS sind die Variabeln im Theme (Eigenschaften) nicht mehr gültig. Die wurden lediglich vergessen zu entfernen. Wird in einer neueren Version nachgeholt
Die Variablen kannst Du in der .scss datei anpassen:
official-demo/src/files/contaodemo/theme/scss/_variables.scss

Zitat:

---

Zitat von Contaona

Fehlt mir da ein Schritt?
Was mich übrigens wundert: Während es früher unter Theme/Stylesheets um die 20 CSS-Einträge gab, hab ich aktuell gar keinen. Ist das normal?

---

Ja wie gesagt mit SCSS wurden die entfernt. Damit Du mit der SCSS klar kommst solltest Du dich da auch noch ein bisschen einarbeiten.

Darauf muss man erst mal kommen! Ja, damit klappt es jetzt - auf Anhieb. Danke dir - auch für die schnelle Antwort.

Eigentlich müsste ich mich jetzt richtig freuen, zumal ich eine solche Textdatei an sich viel besser finde. Aber irgendwie sitzt der Frust der verplemperten Stunden noch zu tief und das Gefühl, dass ich nicht eine Contao-Installation ohne solche Scherze über die Bühne kriege.

Wo soll man denn als Mensch, der sich nicht den ganzen Tag mit Contao und seinem Forum beschäftigt, denn nachsehen vor einer Installation?

Im Changelog? In dem zur Version 3.5. kommt das Wort CSS nicht einmal vor.

Das gesamte Forum durchsehen, um aufzuspüren, wo sich was getan haben könnte? "Wichtige Tipps und Tricks zum Update auf Contao 3.5" im Forum: Installation / Update hab ich jedenfalls keine gefunden. Und ich komm doch grad erst von einer 3.4.4. (die ich mitsamt Farbwechsel problemlos geupdatet hab).

*seufz*

(Natürlich weiß ich, dass es "irgend jemand machen muss". Es soll auch kein Vorwurf sein. Ich frage mich halt nur, wie ich in Zukunft weiter vorgehen soll ...)

Der Changelog ist immer Gut. Ist aber normal dass du beim Contao Change Log nichts findest wegen der Umstellung auf SCSS, das wurde schon früher möglich gemacht.

Wenn Du mit der Demo arbeiten willst dann ist es gut dass Du vor der Installation dich mal informierst was da neu ist. Am besten machst das auf Github.

Wenn Du dich da registrierst und einloggst, kannst Du da Sachen beobachten und Dich informieren lassen. Das hier > https://github.com/contao/official-demo ist das Repo von der Official-Demo. Da kannst beobachten anklicken und Du kriegst per Mail Infos welche dann auf Github nachlesen kannst.

Wenn Dir dan was auffällt was Du findest das sollte man ändern und das richtig begründest machst das auch bei github.

Opensource funktioniert so ;)

Hier noch die Diskussion wo es darum ging dass man SASS/SCSS in die Demo aufnimmt:
https://github.com/contao/official-demo/issues/2

Ich kann schon gut verstehen, dass sowas ziemlich frustig sein kann, wenn man stunden an der falschen Stelle experimentiert.

Entsprechend seh ich zu, dass ich den Dump mal Zeitnah neu erstelle und die Variablen rauswerfe.

Da das hier das Forum zur Erweiterung ist, wärst Du bei Fragen natürlich hier an der richtigen Stelle.

Danke für die Tips.

Zitat:

---

Zitat von ciaobello

Opensource funktioniert so ;)

---

Seit vielen Jahren bin ich Opensourcelerin. Aber man kann sich nun mal nicht immer und überall in gleicher Weise reinknien - allein, weil es dazu zum Glück inzwischen zuviel Opensource-Software gibt ;-)

Deshalb mach ich auch keine Vorwürfe, aber wünschen würde ich mir dennoch manchmal bessere Orientierung. Auch wenn ich momentan nicht einmal Zeit hab, dies genauer auszuführen.

An dieser Stelle möchte ich übrigens ausdrücklich Nina danken, die unheimlich viel in dieser Richtung macht. Vielleicht können die Entwickler öfter mal dran denken, dort Hinweise hinzufügen, wenn sich etwas im Umgang mit dem CMS und ihren Erweiterungen tut. Ideal wäre ... nein, heute nicht.

Zitat:

---

Zitat von Samuell

Ich kann schon gut verstehen, dass sowas ziemlich frustig sein kann, wenn man stunden an der falschen Stelle experimentiert.

---

Einer, der mich versteht! :-)

Zitat:

---

Zitat von Samuell

Entsprechend seh ich zu, dass ich den Dump mal Zeitnah neu erstelle und die Variablen rauswerfe.

---

Da hab ich nichts dagegen, danke. Allerdings würde ich mich trotzdem weiterhin über einen Hinweis freuen, dass sich da was im Umgang mit CSS getan hat.

Sonst gibt der nächste zwar nicht umsonst irgendwelche wirkungslose Variablen ein, sucht sich aber dumm und dämlich, wo denn diese globalen Variablen waren, die er zuletzt noch verwendet hatte ... Ein paar besonders markierte Kommentare in dem ChangeLog wären doch was.

Zitat:

---

Zitat von Samuell

Da das hier das Forum zur Erweiterung ist, wärst Du bei Fragen natürlich hier an der richtigen Stelle.

---

Na, immerhin etwas richtig gemacht ;-)

Zitat:

---

Zitat von Contaona

Ein paar besonders markierte Kommentare in dem ChangeLog wären doch was.

---

Die Demo selber hat so wie ich das gesehen habe noch gar kein Changelog ... oder ich habe ihn einfach nicht gesehen. Im Changelog von Contao war bei 3.3? SCSS hinzugefügt worden, da gab es schon ein Hinweis.
Habe mal hier nach einem gefragt:
https://github.com/contao/official-demo/issues/67

Richte gerade eine Contao 4.7 Installation mit dem Theme der aktuellen Contao Demo ein.
Wenn ich die Farben in der _variables.scss ändere, ändern sich an der Seite allerdings gar nichts. Auch das Leeren des Cache hat nichts gebracht.

Was kann ich machen, um die Farben zu ändern?

Zitat:

---

Zitat von LutzWinkler

Richte gerade eine Contao 4.7 Installation mit dem Theme der aktuellen Contao Demo ein.
Wenn ich die Farben in der _variables.scss ändere, ändern sich an der Seite allerdings gar nichts. Auch das Leeren des Cache hat nichts gebracht.
Was kann ich machen, um die Farben zu ändern?

---

Da war mal was bezüglich des Caching bzw. das neu schreiben der .scss wenn etwas in einem includierten Partial geändert wird.
Das wurde mal eingebunden und ich glaube dann irgendwann wieder entfernt ...

Ich denke Du mußt hierzu aktuell entweder die .scss Datei einmalig speicherm die die @imports enthält oder im debug Modus ( app_dev.php ) arbeiten.

Ich selber nutze die .scss nur lokal und binde in Contao nur die .css Datei ein. Mit watch Modus und Source Maps kann man dann auch bequem z.B. mit den Chrome DevTools arbeiten:
https://thoughtbot.com/blog/sass-sou...s-chrome-magic
https://www.sitepoint.com/using-sour...g-sass-chrome/

Während der lokalen Entwicklung deaktiviere ich dabei Server/Client-Cache und im Theme/Seitenlayout auch "Skripte zusammenfassen".

Zitat:

---

Zitat von Franko

Ich denke Du mußt hierzu aktuell entweder die .scss Datei einmalig speicherm die die @imports enthält oder im debug Modus ( app_dev.php ) arbeiten.

---

Hallo Franko,
ich weiß nicht so recht, was du damit meinst. Wo soll ich die .scss speichern?
Das Verzeichnis files/contaodemo/theme/scss enthält die Dateien _variables.scss und theme-styles.min.scss sowie die Ordner content, layout und modules, die alle .scss Dateien enthalten
In der theme-styles.min.scss sind die ganzen @imports. Die erste Zeile lautet @import '_variables';
In der _variables.scss sind die Variablen, wie z.B. $basecolor: #60584D;

Eigentlich will ich nur die Basecolor und die Farbe der Buttons ändern. Doch egal, welche Einstellungen ich in der _variables.scss ändere - im Frontend bewirkt das gar nichts.
Ich hab mir jetzt erst Mal mit einem eigenen Stylesheet beholfen, dass ich in die Contao Official Demo importiert habe. Ich dachte allerdings, mit der _variables.scss könnte ich das eleganter lösen.

Viele Grüße,
Lutz

Zitat:

---

Zitat von LutzWinkler

Hallo Franko,
ich weiß nicht so recht, was du damit meinst. Wo soll ich die .scss speichern?

---

Zur Zeit ist es wohl so, das Du Deine Änderungen in der "_variables.scss" machst und anschließend die "theme-styles.min.scss" aufrufst und diese speichern mußt
damit Contao die Änderungen in dem Partial "_variables.scss" mitbekommt ...

siehe auch: https://github.com/contao/core-bundle/issues/1158

@LutzWinkler

Ich habe das eben mal in einer 4.7.7 ausprobiert:

1. - Im Partial "_vars.scss" einen Farbwert geändert
2. - In der "main.scss", die "_vars.scss" importiert, eine Leerzeile eingefügt und gespeichert
3. - Den Browser aktualisiert - der geänderte Farbwert wurde übernommen

Ich weiß nicht ob Schritt 2 evtl. in kommenden Contao Version nicht mehr notwendig sein wird.
Da ich bisher meine .css lokal erstelle brauchte ich dies so auch noch nie ...

Zitat:

---

Zitat von Franko

Ich denke Du mußt hierzu aktuell entweder die .scss Datei einmalig speicherm

---

Das hat funktioniert!
Ich habe die Änderungen in der _variables.scss gemacht und dann die theme-styles.min.scss nochmal neu gespeichert. Danach wurden die Änderungen ohne Leeren des Browsercaches direkt angezeigt.
Offenbar kompiliert Contao die SASS-Dateien erst wieder neu, wenn sich die Timestamp der theme-styles.min.scss geändert hat. Darauf muss man erst mal kommen!

Herzlichen Dank,
Lutz

Zitat:

---

Zitat von LutzWinkler

... Darauf muss man erst mal kommen!

---

Na, ja wie in https://github.com/contao/core-bundle/issues/1158 beschrieben ...

Es gibt ein package von Erdmann&Freunde die diese "Limitierung" umgeht - geschrieben für Ihre eigenen Themes, kann aber in diesem Kontext auch so benutzt werden:
( Habe dies selbst nur mal mit einer 4.4er getestet - mit der 4.7 mußt Du es ausprobieren )

https://packagist.org/packages/erdma.../theme-toolbox
https://github.com/ErdmannFreunde/theme-toolbox

Ob es sich lohnt dafür eine Erweiterung zu installieren bleibt jedem selbst überlassen - ist aber EIN Lösungsweg - solange der Core es nicht unterstützt ...
Ich bleibe dabei: lokaler sass/scss -> css Workflow ist für mich der bessere Weg ...