SCSS und Farben bzw. Darstellung (hier: Demo Template) und Weiteres

Hallo in die Runde,


nach ein paar Installationen bis 3.3.x habe ich gestern die 3.5.2 installiert, inkl offizieller Demo.

Das hilft mir als nicht Profi, die Module besser zu verstehen und dann nach und nach zu ändern.

Es hapert aber schon bei den Farben, da es nun diese SCSS gibt in der Demo. Ich möchte diese einmal anpassen.
Das Handbuch unter https://docs.contao.org/books/manual...ylesheets.html
hilft leider nicht, da hier die SCSS nicht behandelt wird.
Soweit ich herausgefunden habe gestern abend, verweisen die verschiedenen Dateien jeweils auf die diese globalen Variablen (Farben)
in der _variable.scss

Ich habe früher zum besseren Verständnis einen Screenshot gemacht, dann die Farben in Photoshop angeklickt und wusste so, welce Farbe ich wo zu suchen habe
im CSS und welcher Eintrag welche Änderung bewirkt.
Dies funktioniert aber leider nicht.

Und während ich das schreibe: getestet jetzt mit Firefox und Chrome auf OSX 10.11 : Unterschiedliche Ausgabe der Farbe....uff
FF ist mein Standard Browser

Gibt es eine Übersicht / Hilfe für die SCSS?
Ich ändere manuell....dann übertragen, dann bereinigen und Cah aufbauen um zu sehen pas passiert ;)



Danke...

Frank


...und kann das jemand mit den Farben so auch bestätigen? Unterschiedliche Darstellung bei den Browsern?

Du musst nach so einer Änderung evt. das CSS neu generieren lassen, also in den Systemeinstellungen die Assets löschen lassen.

Zitat:

---

Zitat von Spooky

Du musst nach so einer Änderung evt. das CSS neu generieren lassen, also in den Systemeinstellungen die Assets löschen lassen.

---

Hi Spooky,


danke, das meinte ich ja weiter oben...
das ist halt imemr schwierig, werde notfalls mal jeden Punkt in leuchtend Geld ändern und schauen was passiert ;)

Dachte so eine Übersicht gibt es bereits.

was ist denn mit den Globalen Einstellungen in der GUI zum Template? sind die unnütz?


Frank

Zitat:

---

Zitat von supergrobi

danke, das meinte ich ja weiter oben...

---

Achso, was genau ist dann nun das Problem bzgl. SCSS?

es gab in früheren versionen die ganzen CSS, welche gefühlte 25.000.000 Zeilen waren, und diese CSS Dateien konnte ich
in der GUI bearbeiten....

gut, das war nicht sonderlich übersichlicht, aber ich konnte mir so problemlos mit den Entwicklertools des FireFox Container und Stilinformationen anzeigen lassen.
somit war es recht einfach möglich, das zu suchen, die Farbe entsprechend anzupassen.

jetzt mit der 3.5.2 in der Demo Seite z.B: ist es ja so:
die _variables.scss, da habe ich ein paar globale Variablen, in den Verzeichnissen dann die weiteren Dateien, welche von
der theme-styles.min.scss eingebunden werden und welche dann auf die globalen Variablen verweisen.

Das ist jetzt im Moment für mich (oder vielleicht gehts auch anders) unübersichtlicher:
Ich öffne die Datei lokal, ändere die Farben, lade die Datei wieder hoch, löche in den Systemeinstellungen Cache und räume auf
und reloade die Seite.

Der Effekt ist dann, dass die Farben, welche ich eingegeben habe, nicht 1:1 auch dargestellt werden, sondern je nach Browser abweichen,
in keinem Fall aber das sind, was ich eingegeben habe...
ich mach gleich mal einen Screenshot

EDIT:

bgcolor habe ich auf 336699 gesetzt.
im Stylesheet, welches ich mir im FF mit Developer tools anzeigen lassen kann, steht das auch drin

Mache ich einen Screenshot von der Seite und lese diese mit Photoshop aus (anwählen der Farbe) ist das angezeigt #32659c in FF und Chrome, in Safari #336799
Das ist nicht dramatisch.... und kaum sichtbar, die unterschiede können aber auch bei alle Browsern untschiedlich sein.... ich habe so halt früher immer geschaut:
welcher container hat welche infos und wo finde ich den Wert in der CSS...das war recht einfach

Ich muss gestehen: ich nutze OSX El Capitan als Beta...keine Ahnung was der aus Farbeinstellungen macht oder ob das an den Browsern liegt...
Hoffe das war halbwegs verständlich


Kurzfassung also: die Browser geben andere Farben aus, als in der CSS drin steht,
und ich möchte wissen halbwegs übersichtlich oder Dokumentation, welcher Farbwert was verändert,
ohne jede Datei öffnen zu müssen....


Gruß
Frank

Zitat:

---

Zitat von supergrobi

es gab in früheren versionen die ganzen CSS, welche gefühlte 25.000.000 Zeilen waren, und diese CSS Dateien konnte ich
in der GUI bearbeiten....

gut, das war nicht sonderlich übersichlicht, aber ich konnte mir so problemlos mit den Entwicklertools des FireFox Container und Stilinformationen anzeigen lassen.
somit war es recht einfach möglich, das zu suchen, die Farbe entsprechend anzupassen.

jetzt mit der 3.5.2 in der Demo Seite z.B: ist es ja so:
die _variables.scss, da habe ich ein paar globale Variablen, in den Verzeichnissen dann die weiteren Dateien, welche von
der theme-styles.min.scss eingebunden werden und welche dann auf die globalen Variablen verweisen.

Das ist jetzt im Moment für mich (oder vielleicht gehts auch anders) unübersichtlicher:
Ich öffne die Datei lokal, ändere die Farben, lade die Datei wieder hoch, löche in den Systemeinstellungen Cache und räume auf
und reloade die Seite.

ich möchte wissen halbwegs übersichtlich oder Dokumentation, welcher Farbwert was verändert,
ohne jede Datei öffnen zu müssen....

---

Wie du deine Website umsetzt ist komplett dir überlassen, du musst es nicht so machen wie es in der Demo ist.

Zitat:

---

Zitat von supergrobi

Der Effekt ist dann, dass die Farben, welche ich eingegeben habe, nicht 1:1 auch dargestellt werden, sondern je nach Browser abweichen,
in keinem Fall aber das sind, was ich eingegeben habe

EDIT:

bgcolor habe ich auf 336699 gesetzt.
im Stylesheet, welches ich mir im FF mit Developer tools anzeigen lassen kann, steht das auch drin

Mache ich einen Screenshot von der Seite und lese diese mit Photoshop aus (anwählen der Farbe) ist das angezeigt #32659c in FF und Chrome, in Safari #336799
Das ist nicht dramatisch.... und kaum sichtbar, die unterschiede können aber auch bei alle Browsern untschiedlich sein.... ich habe so halt früher immer geschaut:
welcher container hat welche infos und wo finde ich den Wert in der CSS...das war recht einfach

Ich muss gestehen: ich nutze OSX El Capitan als Beta...keine Ahnung was der aus Farbeinstellungen macht oder ob das an den Browsern liegt...
Hoffe das war halbwegs verständlich


Kurzfassung also: die Browser geben andere Farben aus, als in der CSS drin steht,

---

Das hat nichts mit Contao oder SCSS oder sonst was zu tun, das ist ein Client Problem.

Zitat:

---

Zitat von Spooky

Wie du deine Website umsetzt ist komplett dir überlassen, du musst es nicht so machen wie es in der Demo ist.

---

klar....aber ich mache das als Infoseite für meinen Verband "nebenher", also ehrenamtlich...und nebenher bedeutet:
neben Job, Familie, Hobbies ;)

da versuche ich den Wege des geringsten Widerstandes zu gehen und anzupassen

Zitat:

---

Zitat von supergrobi

Ich öffne die Datei lokal, ändere die Farben, lade die Datei wieder hoch, löche in den Systemeinstellungen Cache und räume auf
und reloade die Seite.

---

Du solltest deinen Workflow optimierten. Hole dir erstmal einen Editor mit dem du direkt auf dem Server die Dateien bearbeiten kannst. Z.B. "RJ TextEd" http://www.rj-texted.se/

SCSS hat Vorteile, aber auch Nachteile. Ein Nachteil ist z.B., dass du die Herkunft der Werte nicht mehr so einfach ermitteln kannst. Und mit Contao auch, dass du zuerst den Cache löschen musst, was glaube ich nicht mehr nötig ist, wenn du im BE den Debug-Modus einschaltest.

Die Variablen im Theme sind nur für von Contao verwaltete CSS-Dateien, nicht für Dateien, welche du vom Server einbindest.

Zitat:

---

Zitat von supergrobi

bgcolor habe ich auf 336699 gesetzt.

Mache ich einen Screenshot von der Seite und lese diese mit Photoshop aus (anwählen der Farbe) ist das angezeigt #32659c

---

Dass Photoshop dir andere Farben anzeigt als im CSS gesetzt, kann auch an den Farbeinstellungen von PS liegen. Ich hatte da auch mal große Probleme mit, bis ich es irgendwie hinbekommen hatte. Hole dir auch diesen IMHO besten Colorpicker den es gibt. pkColorPicker http://www.color-picker.de/

Ich selber binde nur eigene CSS-Dateien ein, welche ich direkt auf dem Server bearbeite. Keine Cache-Probleme.

Man kann übrigens auch eine PHP-Datei für CSS einbinden

HTML-Code:

---

<link href="files/css/style.php" rel="stylesheet">

---

In der PHP muss man aber dann den Ausgabeheader programmieren, sodass die Datei als Mime-Type CSS ausgeliefert wird. Dann kann man oben Variablen belegen, welche man dann im CSS ausgibt z.B.

PHP-Code:

---

<?php
  header("Content-type: text/css");

  // Variables
  $baseColor = '#f00';
?>

body {
  background-color: <?= $baseColor ?>;
}

---

Oder besser:
style.php

PHP-Code:

---

<?php
  header("Content-type: text/css");

  // Variables
  $baseColor = '#f00';

  include 'style.css';
?>

---

style.css

HTML-Code:

---

body {
  background-color: <?= $baseColor ?>;
}

---

Besten Dank...

ich muss nochmal schauen, was mein Espresso macht, welchen ich als Editor nutze....das ging eigenlich direkt aus FireFTP einmal, die Dateien zu bearbeiten.

auch die Developer Tools waren einfacher zu bedienen...


da ich Mac Nutzer bin helden die Tools leider nicht...aber die Infos sind schon brauchbar für micht...danke dafür

Gruß
Frank

Hallo Frank,

Zitat:

---

Zitat von supergrobi

ich muss nochmal schauen, was mein Espresso macht, welchen ich als Editor nutze....das ging eigenlich direkt aus FireFTP einmal, die Dateien zu bearbeiten.

---

für den Mac kann ich dir Brackets wärmstens empfehlen, damit arbeite ich sehr gerne.
Es gibt reichlich Extensions dafür.
Meine Favoriten:

• https://github.com/kooohei/brackets-synapse
  Du kannst deine Dateien direkt auf dem Server bearbeiten
• https://github.com/martypenner/brack...on-window-blur
  Du sparst dir das Speichern der Dateien, geschieht automatisch wenn du im Browserfenster das Ergebnis deiner geänderten Dateien kontrollierst
• https://github.com/drewhamlett/brackets-beautify
  Macht dein CSS "schöner"
• https://github.com/Jacse/themes-for-brackets
  Themes für Brackets

Um Farben aufzunehmen verwende ich Color Picker, damit kannst du auch ganze Projekte speichern.

Gruß Michael

Zitat:

---

Zitat von scroll

Hallo Frank,

für den Mac kann ich dir Brackets wärmstens empfehlen, damit arbeite ich sehr gerne.
Es gibt reichlich Extensions dafür.
Meine Favoriten:

• https://github.com/kooohei/brackets-synapse
  Du kannst deine Dateien direkt auf dem Server bearbeiten
• https://github.com/martypenner/brack...on-window-blur
  Du sparst dir das Speichern der Dateien, geschieht automatisch wenn du im Browserfenster das Ergebnis deiner geänderten Dateien kontrollierst
• https://github.com/drewhamlett/brackets-beautify
  Macht dein CSS "schöner"
• https://github.com/Jacse/themes-for-brackets
  Themes für Brackets

Um Farben aufzunehmen verwende ich Color Picker, damit kannst du auch ganze Projekte speichern.

Gruß Michael

---

Brackets hatte ich mal angetestet....muss ich dann mit den Extensions vielleicht noch mal anschauen...danke Dir

Gruß
Frank

Hallo supergrobi,
Du kannst die SCSS-Dateien auch einfach in Contao über die Dateiverwaltung editieren, wenn Du es möchtest.
Das ist nicht so komfortable wie via IDE oder richtigem Editor, kann aber durchaus mal nützlich sein.

Um das ständige Löschen des Caches bei einer Entwicklungsseite zu umgehen bietet sich folgendes Vorgehen an:
In den Einstellungen die Option "internen Cache umgehen" aktivieren, einmal den Cache löschen und dann in Ruhe arbeiten.
Contao generiert aus den SCSS-Dateien bei jedem Speichern neue CSS-Dateien, die es in dem Ordner assets/css ablegt.

Ich bin mir nicht sicher ob es für die Mehrheit sinnig ist hinter jede Farbe zu schreiben an welchen Orten diese überall eingesetzt wird.

Bisher reichte es mir durchaus im Browser über [ rechte Maustaste ] -> "Element untersuchen" zu schauen welche Farbe das Element hat und diese Farbe dann in der Datei "_variables.scss" zu suchen.
Sollte diese Farbe mehrfach vorkommen, so hilft oft der Variablenname für eine genaue Identifikation.

Danke Samuell.


ich habe mir selber einmal jeden Wert aufgeschrieben und notizen gemacht, was er bewirkt.
Damit komme ich soweit zurecht.....bevor ich an den Content gehe sollte das stehen....ich mache es mal andersherum.
Es wir eine Seite mit vielen Sportergebnissen aus einem Programm, welches bis zu 600 html seiten generiert...
hier habe ich noch keine vernünftige Idee, wie ich die Einbinden werde.
Dann noch eine Möglichkeit, im Frontend Beiträge zu verfassen und ich bin Glücklich.

Gruß
Frank

Moin,
wenn Du schon rausgesucht hast an welcher Stelle die Farben eingesetzt werden, dann wäre es schön wenn Du das hier im Forum teilst, damit andere auch von Deinen Erkenntnissen profitieren können.

Zitat:

---

Zitat von Samuell

Moin,
wenn Du schon rausgesucht hast an welcher Stelle die Farben eingesetzt werden, dann wäre es schön wenn Du das hier im Forum teilst, damit andere auch von Deinen Erkenntnissen profitieren können.

---

mache ich auf jeden Fall....ich habe es nur in Stichworten aufgeschrieben - und das ist so nicht repräsentativ ;)
dazu wollte ich es noch mit einer Grafik versehen

Und 3 oder 4 Werte fehlen mir noch....da konnte ich keine Änderung feststellen

Frank

Zitat:

---

Zitat von supergrobi

Gibt es eine Übersicht / Hilfe für die SCSS?

---

Natürlich auf der eigentlichen Projekt-Site: http://sass-lang.com/

Zum Lernen -> hervorragende Video-Tutorial-Serie (sofern man des englischen mächtig ist): https://www.youtube.com/playlist?lis...B1F80266E986EA