Buttons: Beschriftung und Farbe anpassen

Hallo zusammen,

wir würden gerne die Beschriftung (Text) und die Farbe des folgenden Buttons in unserem Shop (https://www.pakilia.com/) ändern:

Dieser Button führt bei Klick auf die jeweilige Produktseite.

Ich habe bereits in der Sprachdatei cust.lang nach der Beschriftung geschaut, konnte diese aber dort nicht finden. Falls ihr mir zusätzlich weiterhelfen könntet, wie man dann noch die Farbe des Buttons ändert, wäre ich wirklich sehr happy.

Generell: hat jemanden einen Tipp wie ich ohne aufwendige Internetrecherche/ Foren die richtige Datei auf dem Server finden kann wenn ich eine Änderung vornehmen möchte? Oder ist das einfach “Learning by Doing”.

Vielen lieben Dank für euren Support.

LG, Tobias

CSS: Musst anpassen (Less).

.btn-primary {
background-color: #990000;
border-color: #dc7400;
color: #fff;
}

Konstante der Übersetzungen dürfte folgendes sein:
‘MORE_INFO’ => ‘Mehr Informationen’,
zu finden in lang.php
überschreibst in cust_lang.php

Vielen Dank, bin noch ziemlich neu dabei. Ich habe in der .less Datei folgende Zeile unter //## Brand colors to use across Flow geändert:

@ox-container-wrapper-background-color: #050505;

Anschließend den tmp Ordner geleert und Browser aktualisiert und Cache geleert. Die Farbänderung war nicht erfolgreich. Da habe ich wohl was falsch gemacht.

Des Weiteren ist

‘MORE_INFO’ => ‘Mehr Informationen’,

weder in der .lang noch in der cust.lang Datei zu finden. Aber irgendwo her muss sich unser Shop ja die Daten ziehen.

Wenn man in less bzw scss Dateien etwas ändert muss auch neu kompiliert d.h. die Änderungen in die css Datei übertragen werden.

\source\Application\translations\de\lang.php

1 Like

Wissen Sie ob es hierfür eine detaillierte Anleitung gibt? Also wie das genau vorgehen beim Kompilieren einer Datei ist und wo diese Datei anschließend auf den Server geladen werden muss? (ich sammle gerade meine ersten Erfahrungen mit dem System und habe keinen Background im Bereich IT/ Programmierung)

Hier habe ich eine ganz passable Beschreibung - quasi für Anfänger - gefunden. Das ist übrigens nichts OXID-spezifisches :wink:

2 Likes

Für V6.22 und Wave-Theme:
Ich möchte ebenfalls Text und Farbe der Buttons "Mehr Informationen’ und des Such-Buttons ändern und ggf. weitere kleinere Farbänderungen.

Die Textänderung klappt, aber nur, wenn ich direkt in der (…\source\Application\translations\de) lang.php ändere. Änderungen in (…\source\Application\translations\de) cust_lang.php bleiben ohne sichtbare Wirkung. @marco.steinhaeuser: Ist das ein Bug?

Bei der Farbe möchte ich - da ziemlich neu in dem Metier - möglichst ohne viel Aufwand möglichst direkt in einer .css (im Wave-Child für Update-Festigkeit) ändern können. Ich finde bei mir weder .less noch .scss Dateien, und wie ich die dann noch compiliere… zuviel Einarbeitungs-Aufwand für kleine Änderungen. Aber geht das anders? Wenn ja wie?
Danke für Tipps.

Nicht dass ich wüsste. Den tmp/-Ordner hast Du nach Änderungen geleert? Ansonsten kannst Du das auch in der /Application/views/wave/de/cust_lang.php mal versuchen.

Es geht leider nicht anders bzw. hält nur bis zum nächsten Leeren des Caches. Die scss-Dateien findest Du im build/-Ordner des Wave-Themes: https://github.com/OXID-eSales/wave-theme/tree/master/build

klar, tmp-Ordner immer wieder geleert, bis auf die htaccess.

In der klappt es, aber ich musste sie zuerst erstellen.

Und die muss ich mir herunterladen, ändern, kompilieren und dann die .css in den shop hochladen oder wie sind die richtigen Schritte?
Aber:

Nun habe ich in einer Kopie von …\source\out\wave\src\css\styles.min.css, sprich in …\source\out\wave3R\src\css\styles.min.css einfach per change-all ein paar Farbwerte auf die gewünschten Farben geändert, tmp gelöscht, und schon sind sie da, die gewünschten Farben. Was meintest du mit Leeren des Caches? Leeren des tmp-Ordners kann es ja nicht sein. Sorry, ich probiere eben manches rum und so nach und nach kommt dann auch etwas Verständnis. Allerdings auch eine Frage: worin unterscheiden sich styles.css und styles.min.css in ihrem Verwendungszweck?

Übrigens - vielen herzlichen Dank an Dich und all die anderen Tippgeber hier im Forum!

Leeren des Caches

Das war völlig falsch ausgedrückt, sorry. Ich hatte diese Erfahrung in einem anderen System selbst gemacht, wo ein sog. Grunt-Prozessor lief, der Änderungen in der min.css immer wieder sofort überschrieben hatte. Dieser Prozessor läuft in OXID (Flow & Wave) nicht.

Deine pragmatische Lösung, in der styles.min.css einfach alle entsprechenden Farbwerte zu ändern, funktioniert also und bleibt bestehen, solange keine weiteren CSS-Änderungen anstehen. Allerdings ist die Lösung “dreckig” ^^

Am besten legst Du Dir ein Child-Theme (wave3R) an, wie hier von @indianer3c beschrieben:

Dort hinein kannst Du sowohl Deine Sprachänderungen kopieren wie auch den kompletten Grunt-Ordner mit allen Inhalten. In der _variables.scss brauchst Du nur einen Wert für die Farbe zu ändern. Grunt kompiliert Dir nun die styles.min.css zusammen. Das hilft für bessere Lesbarkeit und falls es später noch einmal zu Änderungen kommen sollte.

Danke auch nochmal an @Mario_Lorenz, der mich auf den richtigen Weg geführt hat :wink:

1 Like

Ich will doch nur ein paar CSS Anpassungen machen… :frowning:

den build ordner hab ich endlich, ist im zip-download des master-branches des wave themes nämlich leider nicht enthalten, was zu enorm großer Verwirrung und langem Suchen bei mir geführt hat.

Und wenn ich nun eine CSS Variable anpassen will, muss ich die passende SCSS-datei im Build-Ordner finden, ändern, alles compilen und die resultierende CSS datei ins Produktivsystem kopieren?

Und wie geht das SCSS compilen? Ja da gibts diverse Programme für, aber was muss ich da eigentlich einstellen? und am Ende soll dann genau eine style.css rauskommen? Genau das passier bei mir nämlich nicht und ich hab keine Ahnugn was ich mit all den CSS dateien anfangen sollt und mit jeder Antwort scheinen sich merh neue Fragen aufzutun als zuvor.
Da müsste es doch irgendwo auch eine SCSS-Anleitung speziell zum Wave Theme geben, damit ich weiß, was wohin muss, oder nicht?

@ploxid, lies doch bitte hier nochmal nach: Buttons: Beschriftung und Farbe anpassen - #8 by marco.steinhaeuser

Ich habe die verlinkte Anleitung nochmal durchgelesen, bin aber leider trotzdem noch nicht weiter

wenn ich den scss-ordner im build-ordner des wave themes mit Scout-App compile bekomme ich jetzt nur noch ‘styles.css’ und ‘variables.css’ im unterordner ‘custom’. Diese sind aber bis auf Kommentare leer, ich hab aber auch keine Fehlermeldung.

Was müsste richtigerweise beim compilen dabei herauskommen?
nur eine styles.css, die dann unter /source/out/wave_child/src/css/ platziert werden muss und sofern ich nichts geändert hab genau gleich aussieht wie die orginal styles.css des Wave Theme?

EDIT: beim compilen mit dart-sass per CLI komm ich nun endlcih zu einer Fehlermeldung:
Error: Can’t find stylesheet to import.
@import ‘…/…/node_modules/bootstrap/scss/bootstrap’;

EDIT2: nach diversen weiteren gescheiterten Versuchen (mit weiteren Tools und auch auf einem anderen System) bleib ich leider weiter dabei, dass mir eine Anleitung, wie SCSS im Wave Theme richtig verwendet wird, fehlt :frowning:
Und was ist eigentlich mit der Struktur der SCSS-Einträge? Wird das irgendwo näher erklärt, oder muss ich da einfach probieren und Erfahrung sammeln, um zu wissen welche Klassen ich z.B. wo finde?

Da stimmt wahrscheinlich nur der Ordner nicht

Die Klassen sind in jeder Datei (CSS/SASS/SCSS) benannt. Danach kannst suchen und Einträge editieren oder ergänzen oder Klassen ganz neu anlegen.

Da stimmt wahrscheinlich nur der Ordner nicht

Und deshalb bräuchte ich eine konkretere Anleitung, ich hab nämlich nichts verändert. Das ‘@import ‘…/…/node_modules/bootstrap/scss/bootstrap’;’ stammt aus dem SCSS des buildordners des wave themes. ich hab nichts daran verändert und leider keine Ahnung worauf sich das beziehen soll, wenn ichs auskommentiere gehts einfach nur mit der nächsten Fehlermeldung, die ich nicht verstehe weiter…

ich scheitere also wirklich schon allein daran, das unveränderte SCSS im Auslieferungszustand zu verstehen und zu compilen.

Hallo ploxid
schau mal hier: OXID6 Child-Themes auf Basis von WAVE-Parent erstellen • OXIDforge

Grüße Steffen Winde

ein Tipp:
lade die Datei styles.min.css in einen Texteditor
ersetze } durch } und Zeilenschaltung
die Datei wird nur ca. 1% größer (unerheblich) aber man kann direkt editieren und spart sich das kompilieren!
Wenn man dann mal Zeit hat können die Änderungen in die scss-Datei übernommem werden …

Wenn man dann mal Zeit hat können die Änderungen in die scss-Datei übernommem werden …

Danke für den Tipp, aber genau das kann ich ja leider eben nicht.

Aber für mein Verständnis, wenn ich es weiterhin nicht schaffe Wave-SCSS zu ändern/compilen, dann kann ich auch kein update des Themes durchführen, weil ich dazu ja wieder alles neu compilen müsste, richtig?