"Flow" Theme Hintergrund per CSS erweitern

Deutsches Forum
1

Hallo, habe mal eine Frage zum Thema “Flow” Theme.
Ich möchte gerne ein etwas anderes Hintergrundbild per CSS einfügen.
Folgenden Code möchte ich verwenden:

body {
   background: #FFFFFF url('images/page.png') bottom left repeat-x fixed;
   background: url('images/pageglare.png') no-repeat, -webkit-linear-gradient(top, rgba(213, 213, 213, 0.09) 0, rgba(255, 255, 255, 0.24) 250px) no-repeat, url('images/page.png') bottom left repeat-x, -webkit-linear-gradient(top, #E3E3E3 0, #FFFFFF 250px) no-repeat;
   background: url('images/pageglare.png') no-repeat, -moz-linear-gradient(top, rgba(213, 213, 213, 0.09) 0, rgba(255, 255, 255, 0.24) 250px) no-repeat, url('images/page.png') bottom left repeat-x, -moz-linear-gradient(top, #E3E3E3 0, #FFFFFF 250px) no-repeat;
   background: url('images/pageglare.png') no-repeat, -o-linear-gradient(top, rgba(213, 213, 213, 0.09) 0, rgba(255, 255, 255, 0.24) 250px) no-repeat, url('images/page.png') bottom left repeat-x, -o-linear-gradient(top, #E3E3E3 0, #FFFFFF 250px) no-repeat;
   background: url('images/pageglare.png') no-repeat, -ms-linear-gradient(top, rgba(213, 213, 213, 0.09) 0, rgba(255, 255, 255, 0.24) 250px) no-repeat, url('images/page.png') bottom left repeat-x, -ms-linear-gradient(top, #E3E3E3 0, #FFFFFF 250px) no-repeat;
   -svg-background: url('images/pageglare.png') no-repeat, linear-gradient(top, rgba(213, 213, 213, 0.09) 0, rgba(255, 255, 255, 0.24) 250px) no-repeat, url('images/page.png') bottom left repeat-x, linear-gradient(top, #E3E3E3 0, #FFFFFF 250px) no-repeat;
   background: url('images/pageglare.png') no-repeat, linear-gradient(to bottom, rgba(213, 213, 213, 0.09) 0, rgba(255, 255, 255, 0.24) 250px) no-repeat, url('images/page.png') bottom left repeat-x, linear-gradient(to bottom, #E3E3E3 0, #FFFFFF 250px) no-repeat;
   background-attachment: fixed, fixed, fixed, fixed !important;
   margin:0 auto;
   position: relative;
   width: 100%;
   min-height: 100%;
   left: 0;
   top: 0;
   cursor:default;
   overflow:hidden;
}

Unter \out\flow\src\css\styles.min.css steht alles in einer Zeile. Und so richtig blick ich da nicht durch, wo genau da etwas hinzugefügt werden soll.
Kann mir jemand helfen?

Besten Dank …

2

Habe nun mal per node.js die less files bearbeitet und kompiliert.
Das funktioniert eigentlich so weit. Auch wenn mich das nicht wirklich weiter bringt, was mein eigentlich Anliegen angeht.

Wenn ich aber mit einem Programm wie Crunch2 oder WinLess (habe auch andere getestet) die less-files umwandeln möchte nach .css, bekomme ich grundsätzliche Fehlermeldungen um die Ohren geschmissen:
“Error “variable @brand-secondary is undefined” while crunching theme.less on line 46”. Ist das ein Bug in den less-files?

3

Wen es interessiert, anbei mal die aufgebröselte css.

4

Die erwähnten Windows Programme benutze ich nicht, aber bei solchen Compilern gibt es sehr oft Kompatibilitätspribleme, daher würde ich bei den mitgelieferten Scripts für nodejs bleiben, da funktioniert ja alles.

Im allgemeinen läuft es so ab, dass alle less Dateien zu einer styles.min.css zusammengefasst werden. Die Änderungen kannst du direkt in der Haupt less Datei machen oder auch eine eigene less Datei erstellen und sie über @import in die Haupt Datei einfügen.
Dann lässt du den grunt Task fürs compilieren von less laufen und schon müsste es drin sein. Ggf. Musst du den Cache im Browser leeren.

5

Kannst du mir das mit dem @import noch mal erklären?
Ich habe also jetzt eine neu less “stroet.less” erstellt und mit Leben gefüllt.
Wo oder wie genau hinterlege ich nun den @import - welche Hauptdatei?
Danke.

Ok - denke habe es gefunden:
In der flow.less ganz unten ergänzen mit [B]@import “stroet”; // stroet.less[/B]
Na, dann bin ich ja mal gespannt und berichte gleich …

6

Hey, es funktioniert. Vielen Dank dafür :smiley:
Aber erst, wenn ich den Wert im Backend unter Themes - Flow - Hintergrundbild - Hintergrundfarbe des Shops - löschen und speicher.
Ist es möglich, die Ausgabe “<body class=“cl-start” style=“background:#CCEBF5;”>” ganz zu entfernen? Ich finde die Stelle nicht. Wäre nur ein Nice To Have um es sauber zu haben.

Danke.

7

Hast du versucht die Einstellung im backend zu leeren?
Sonst wird der Code in base.tpl oder Page.tpl sein.

8

Danke. Es ist nun alles wie gewünscht.