Moinmoin,
ich brauche mal eure Hilfe.
wie passe ich den Balken des Kategorie Teasers im Frontend farblich an?
Ich bin mittlerweile fast am verzweifeln. :-/
Grüße aus Hamburg
Daniel
Diesbezüglich hab ich mir ein plugin aus dem store geleistet.
Gruss
Matthias
Allgemein?
Im Theme
shopware/emotions.less at 5.2 · shopware/shopware · GitHub
Zeile
shopware/emotions.less at 5.2 · shopware/shopware · GitHub
könnte die Stelle sein.
Über die LESS Datei
.emotion–category-teaser .category-teaser–title {
background: rgba(WERT.TIEFE)
}
Wenn du noch 1-2 Tage wartest kommt im Plugin Store ein neues Plugin von uns raus, wo du aus verschiedenen Vorlagen wählen kannst. Da kannst du dann mehr als nur den farblichen Strich ändern und sogar komplett unterschiedliche Design abrufen 
Moinmoin und vielen Dank für eure Antworten!
Die Less Dateien gibt es bei uns leider nicht.
Den Shop haben wir von einer Agentur fertig übernommen.
In einem nicht aktiven Theme finde ich auch alle Werte.
Nur in dem von uns verwendetem nicht 
Gibt es mehr Infos zu eurem PlugIn benjaminbergau?
Moinmoin und vielen Dank für eure Antworten!
Die Less Dateien gibt es bei uns leider nicht.
Den Shop haben wir von einer Agentur fertig übernommen.In einem nicht aktiven Theme finde ich auch alle Werte.
Nur in dem von uns verwendetem nichtGibt es mehr Infos zu eurem PlugIn benjaminbergau?
Hallo,
für solch eine Anpassung benötigst du kein Plugin, Shopware stellt dir ab Shopware 5.2 schon alle Möglichkeiten über die Einkaufswelten dazu bereit.
Du hast ja bei jedem Einkaufswelten - Element ein Eingabefeld namens „CSS Klasse“ (im Bereich „Gobale Element-Einstellungen“). Dort kannst du beispielsweise für dieses Element (Kategorie Teaser) eine eigene CSS-Klasse festlegen, zum Beispiel „category-teaser-balken“ (ohne Anführungszeichen). Über das Einkaufswelten - Element „Code Element“ kannst du jetzt beispielsweise diese CSS-Klasse nutzen, um das Element anzupassen, indem du dort bei „HTML Code“ folgenden Code hinterlegst (am Beispiel der Farbe rot):
.category-teaser-balken .category-teaser--title {
background-color: red;
}
Und das ganze updatesicher, ohne jegliches Plugin und sogar ohne Eingriffe über FTP.
Wenn du alle Kategorie - Teaser auf dieser Einkaufswelt entsprechend anpassen möchtest, könntest du folgendes nutzen und müsstest keine eigene CSS-Klasse anlegen:
.emotion--category-teaser .category-teaser--title {
background-color: red;
}
Diesen CSS-Code könntest du natürlich bei deinem eigenen Theme („Einstellungen“ -> „Theme Manager“ siehst du das aktive Theme und dort kannst du auch ein eigenes Theme erstellen, falls noch keins vorhanden ist, dies sollte vom Responsiven Theme von Shopware ableiten) auch in einer LESS-Datei ablegen. Eine eigene LESS-Datei müsstest du auf dem FTP im folgenden Verzeichnis ablegen: „/themes/Frontend/DEIN_EIGENES_THEME/frontend/_public/src/less“. Sollte dort noch keine „all.less“ liegen, musst du eine Datei namens „all.less“ mit folgendem Inhalt anlegen:
@import 'style';
Die zweite Datei im gleichen Verzeichnis müsste dann „style.less“ heißen und könnte dann deinen Inhalt enthalten:
.emotion--category-teaser .category-teaser--title {
background-color: red;
}
Beste Grüße
Sebastian
Moin Sebastian,
ich habe es mittels der LESS Dateien nun probiert.
Im Verzeichnis “/themes/Frontend/DEIN_EIGENES_THEME/frontend/_public/src/less” sind bei mir weitere Ordner angelegt Components, mixin, modules und variables.
Alle sind leer.
Ich habe die beiden LESS Dateien wie von dir beschrieben angelegt und den Cache im Backend geleert.
Leider hat sich die Farbe nicht wie erhofft angepasst. Hast du noch eine Idee?
Gruß Daniel
Moin Sebastian,
ich habe es mittels der LESS Dateien nun probiert.
Im Verzeichnis „/themes/Frontend/DEIN_EIGENES_THEME/frontend/_public/src/less“ sind bei mir weitere Ordner angelegt Components, mixin, modules und variables.
Alle sind leer.Ich habe die beiden LESS Dateien wie von dir beschrieben angelegt und den Cache im Backend geleert.
Leider hat sich die Farbe nicht wie erhofft angepasst. Hast du noch eine Idee?Gruß Daniel
Hallo,
das ist auch richtig so, das alle Ordner dort leer sind. Du hast also die all.less - Datei im less - Verzeichnis abgelegt (und nicht in einem der Unterordner)?
Hat die all.less - Datei auch den Inhalt:
@import 'style';
und heisst die andere Datei (im gleichen Verzeichnis wie die all.less) auch style.less?
Ist in der style.less als Inhalt auch:
.emotion--category-teaser .category-teaser--title {
background-color: red !important;
}
drin? Du kannst einmal hinter die Farbe !important setzen und es dann prüfen.
Ist dein eigenes Theme auch aktiv und hast du auch den kompletten Shop Cache (also inklusive Theme- und Backend - Cache) geleert?
Beste Grüße
Sebastian
Die LESS Datein liegen im less Ordner des aktiven Theme.
Inhalte habe ich 1zu1 übernommen. Auch die Variante mit !important.
Den Cache habe ich Manuell über den FTP gelöscht (produktion Ordner im Cache Ordner) und zusätlich im Backend unter STRG+ALT+X.
Leider kein Erfolg 
Die Balken sind nach wie vor Dunkelgrau.
Auch das Theme neu compiliert?
Die LESS Datein liegen im less Ordner des aktiven Theme.
Inhalte habe ich 1zu1 übernommen. Auch die Variante mit !important.
Den Cache habe ich Manuell über den FTP gelöscht (produktion Ordner im Cache Ordner) und zusätlich im Backend unter STRG+ALT+X.Leider kein Erfolg
Die Balken sind nach wie vor Dunkelgrau.
Hallo,
mit dieser Tastenkombination leerst du aber nicht den kompletten Shop Cache - dazu musst du unter „Einstellungen“ -> „Cache / Performance“ anklicken, im nun öffnenden Fenster das Tab „Cache“ anklicken, dann noch „Alle Auswählen“ und „Leeren“ anklicken - dann hast du wirklich den kompletten Shop Cache geleert (und das Theme kompiliert).
Ich habe das selbst gerade einmal probiert - klappt problemlos. Irgendwo hast du also noch einen Fehler drin. Hast du einen Link zum Shop etc?
Beste Grüße
Sebastian
1 „Gefällt mir“
Du musst nicht den ganzen Cache leeren, aus dem Theme-manager eine Neucompilierung anstossen (z.b. durch speichern oder zuweisen) reicht, dabei wird das Theme compiliert und der http-cache gelöscht. Die Daten zum compiliertem theme liegen auch nicht in /var/cache sondern in /web/cache - also ein Löschen vom cache via FTP würde eh nicht helfen.
Nach Änderungen am Less einfach “zuweisen” oder “reingehen ins theme und speichern”
1 „Gefällt mir“
Es lag an der Neucompilierung!
Vielen vielen lieben Dank! Nun läuft alles.
Der Shop ist unter www.camtec24.de zu finden.
Grüße aus Hamburg
Daniel
Es lag an der Neucompilierung!
Vielen vielen lieben Dank! Nun läuft alles.
Der Shop ist unter www.camtec24.de zu finden.Grüße aus Hamburg
Daniel
Hallo,
alles andere hätte mich auch gewundert 
.
Und nun weisst du auch, wie man problemlos Anpassungen updatesicher vornimmt - und das ganz ohne irgendein Plugin und vorallem recht schnell selbst nach eigenen Wünschen anpassbar. Über „CSS Klasse“ beim entsprechenden Einkaufswelten - Element kannst du das ganze dann sogar noch soweit individualisieren, das deine Anpassung nur bei bestimmten Elementen greift, wenn dies nötig ist.
Beste Grüße
Sebastian
Ich fuchse mich langsam erst ein.
Leider habe ich bis Dato keinerlei Vorkenntnisse.
Der Shop ist noch auf 5.1.6 aufgebaut. Die CSS Klasse kann ich in der Einkaufswelt scheinbar noch nicht definieren?!
Es sind auch alle Individuellen Einstellungen der Einkaufswelt in der style.css abgelegt.
Da der Kategorie Teaser allerdings neu ist, fehlt die Einstellung.
Wenn ich es jetzt richtig verstanden habe, macht es dann ja Sinn nach und nach alles über die LESS Dateien aufzubauen um eine Updatesicherheit herzustellen oder?
Ich fuchse mich langsam erst ein.
Leider habe ich bis Dato keinerlei Vorkenntnisse.
Der Shop ist noch auf 5.1.6 aufgebaut. Die CSS Klasse kann ich in der Einkaufswelt scheinbar noch nicht definieren?!Es sind auch alle Individuellen Einstellungen der Einkaufswelt in der style.css abgelegt.
Da der Kategorie Teaser allerdings neu ist, fehlt die Einstellung.Wenn ich es jetzt richtig verstanden habe, macht es dann ja Sinn nach und nach alles über die LESS Dateien aufzubauen um eine Updatesicherheit herzustellen oder?
Hallo,
ja die angesprochenen Eingabefelder gibt es erst ab Shopware Version 5.2 .
CSS - Anpassungen gehören natürlich immer in eine eigene LESS -Datei, damit diese auch mit kompiliert werden und den Shop nicht verlangsamen (und updatesicher sind). Ich würde dir abraten, die CSS-Datei weiter zu nutzen (auch wegen der Performance) und einfach die Änderungen aus der CSS-Datei alle in die LESS-Datei einpflegen (dort gehören Sie ansich auch hin). Im LESS - Bereich hast du auch ganz andere Möglichkeiten als im CSS-Bereich.
Beste Grüße
Sebastian
Da werde ich mich mal in einer ruhigen Minute in einer Demoumgebung ran machen.
Mit meinen ersten versuchen habe ich schon das ein oder andere zerschossen
Läuft nun aber zum Glück wieder.
Grüße aus Hamburg
Daniel
.emotion--catgeory-teaser .category-teaser--title {
background:rgba(255,255,255,1);
color:#333;
}
.emotion--catgeory-teaser:hover .category-teaser--title {
background:rgba(255,239,217,1);
color:#333;
}
.emotion--category-teaser .category-teaser--link {
border-radius:70;
}
Hallo liebe Shopware Gemeinde
Ich bin genau auf dieses Problem gestossen.
Ich möchte gerne den Einkaufswelten Teaser ein bischen bearbeiten.
Mein Vorstellungen wären oben abgerundete Ecken und unten die Farbe jetzt Standard schwarz anpassen.
Ich habe es hingebracht das die Farbe unten bei dem Link auf die Kategorie Transparent ist.
Mit diesem Code:
.emotion–category-teaser .category-teaser–title {
background-color: transparent !important;
}
Gerne würde ich jedoch die Ecken abrunden und die Farbe anpassen. Wie bei einem User der hier dies so ungefähr angepasst hat. https://www.cardiozone.de/ (Danke für Deine super Idee @cardiozone
Habe den obengennanten Code verwendet zum versuchen. Jedoch spricht dieser nicht an. Theme kann ich kompilieren läuft alles durch.
Aber keine Aenderungen am Teaser?
In der all.less die Verknüpfung erstellt
Was ist hier falsch? Wir irgendein kleines Detail sein?
Danke für eure Hilfe
Chrigi
.emotion–category-teaser .category-teaser–title {
background:rgba(255,255,255,1);
color:#333;
}.emotion–category-teaser:hover .category-teaser–title {
background:rgba(255,239,217,1);
color:#333;
}
.emotion–category-teaser .category-teaser–link {
border-radius:70px;
}
schon bisschen länger her, aber weil es mir aufgefallen ist: Tippfehler bei „category“ (2x) und „border-radius:70px“ korrigiert, und dann klappt es bei mir…
lg
Doogie