Ergebnis 1 bis 16 von 16

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

  1. #1
    Contao-Nutzer
    Registriert seit
    04.11.2009.
    Beiträge
    101

    Standard 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?

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.114
    Partner-ID
    10107

    Standard

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

  3. #3
    Contao-Nutzer
    Registriert seit
    04.11.2009.
    Beiträge
    101

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.114
    Partner-ID
    10107

    Standard

    Zitat Zitat von supergrobi Beitrag anzeigen
    danke, das meinte ich ja weiter oben...
    Achso, was genau ist dann nun das Problem bzgl. SCSS?

  5. #5
    Contao-Nutzer
    Registriert seit
    04.11.2009.
    Beiträge
    101

    Standard

    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
    Geändert von supergrobi (26.09.2015 um 09:58 Uhr)

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.114
    Partner-ID
    10107

    Standard

    Zitat Zitat von supergrobi Beitrag anzeigen
    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 Beitrag anzeigen
    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.
    Geändert von Spooky (26.09.2015 um 10:33 Uhr)

  7. #7
    Contao-Nutzer
    Registriert seit
    04.11.2009.
    Beiträge
    101

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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

  8. #8
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von supergrobi Beitrag anzeigen
    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 Beitrag anzeigen
    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 ?>;
    }
    Geändert von Andreas (26.09.2015 um 21:37 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  9. #9
    Contao-Nutzer
    Registriert seit
    04.11.2009.
    Beiträge
    101

    Standard

    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

  10. #10
    Contao-Nutzer
    Registriert seit
    25.09.2010.
    Ort
    Dortmund
    Beiträge
    166

    Standard

    Hallo Frank,
    Zitat Zitat von supergrobi Beitrag anzeigen
    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:

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

    Gruß Michael

  11. #11
    Contao-Nutzer
    Registriert seit
    04.11.2009.
    Beiträge
    101

    Standard

    Zitat Zitat von scroll Beitrag anzeigen
    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:

    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

  12. #12
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    HTML

    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.

  13. #13
    Contao-Nutzer
    Registriert seit
    04.11.2009.
    Beiträge
    101

    Standard

    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

  14. #14
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    Staunendes Gesicht

    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.

  15. #15
    Contao-Nutzer
    Registriert seit
    04.11.2009.
    Beiträge
    101

    Standard

    Zitat Zitat von Samuell Beitrag anzeigen
    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

  16. #16
    Contao-Fan Avatar von Bas
    Registriert seit
    03.12.2009.
    Ort
    Hamburg
    Beiträge
    555

    Standard

    Zitat Zitat von supergrobi Beitrag anzeigen
    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •