Rahmen des HTML 5 Element in der Einkaufswelt entfernen

Hallo zusammen, ich habe nun etwas mit der neuen Einkaufswelt von Shopware 5 rumgespielt und habe noch ein Problem das ich nicht lösen konnte. Und zwar konnte man bei der alten Einkaufswelt den Rahmen um die html Elemente ganz einfach im .css file entfernen weil es dort folgenden Eintrag gab: emotion.css .html-text-inner-element { border: solid 1px #dfdfdf } Jetzt in Shopware 5 mit der neuen responsive Einkaufswelt (Mansonry Effekt) wird der border in einer im cache gelagerten .css Datei definiert. Als Beispiel: 1429695988_t23_s1.css .panel.has--border { border: solid 1px #dadae5 } Leider habe ich bis jetzt nicht gefunden wo ich diese Einstellung anpassen kann. Kann mir hierzu jemand den entschiedenen Hinweis geben? Gruß Joël

Hallo Joël, schau Dir mal am besten diesen Artikel an. Hier wird beschrieben wie Du mit LESS in Shopware arbeiten kannst um CSS Anpassungen zu machen. https://devdocs.shopware.com/designers-guide/less/ Sonnige Grüße, Phil

Hallo Phil, danke für den schnellen Tipp. Hat funktioniert. :thumbup: Hier die Lösung falls es jemand braucht: EIGENESTHEME/frontend/_public/less/_components/panel.less und dort: .panel { display: block; background: @panel-bg; &.has--shadow { .box-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.1)); } &.has--border { border: 0px solid @panel-border; } } Gruß Joël

2 Likes

[quote=„schnetter“]Hallo Phil, danke für den schnellen Tipp. Hat funktioniert. :thumbup: Hier die Lösung falls es jemand braucht: EIGENESTHEME/frontend/_public/less/_components/panel.less und dort: .panel { display: block; background: @panel-bg; &.has--shadow { .box-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.1)); } &.has--border { border: 0px solid @panel-border; } } Gruß Joël[/quote] Hallo, ich hoffe du kannst mir helfen ich habe die panel.less in mein Theme kopiert und zwar von: /themes/Frontend/Responsive/frontend/_public/src/less/_components nach: /themes/Frontend/meinTheme/frontend/_public/src/less/_components. Ich habe gar kein Less Ordner in _public! Wenn ich die Änderung dann durchgeführt habe ändert sich aber leider nichts, muss ich noch irgendwo angeben das die panel.less aus meinem Theme genommen wird und nicht aus dem responsive Theme? Gruss Maik

Kann mir da keiner helfen?

Hallo Maik, ich habe das Ganze bisher nur in meinem Testsystem durchgeführt und mir hier nicht die Mühe gemacht das ganze in mein eigenes Template zu kopieren. Das es den Ordner vorher nicht gab sollte kein Problem sein, dass gibt es häufiger. Hast du daran gedacht den Cache zu leeren? Gruß Joël

Weiß nicht ob die Frage noch aktuell ist, aber hast du die .less auch importiert? Das heißt in MeinTheme/frontend/_public/src/less/all.less @import "\_components/panel"; Dann noch Theme kompilieren und Cache löschen. Vielleicht hilft das, bei mir hat es funktioniert.

Ist das nicht etwas, was über die Konfig gehen müsste? Aus “panel has–border” schließe ich, dass es eigentlich einen Schalter geben müsste um “panel no–border” zu erzeugen. Würde gerne, sofern möglich, die Settings im Backend nutzen.

[quote=„guna_hubert“]Ist das nicht etwas, was über die Konfig gehen müsste? Aus „panel has–border“ schließe ich, dass es eigentlich einen Schalter geben müsste um „panel no–border“ zu erzeugen. Würde gerne, sofern möglich, die Settings im Backend nutzen.[/quote] Einfach beim HTML Element den Haken bei „Kein weiteres Styling hinzufügen“ setzen, dann wird auch kein Border angezeigt. Gesendet von meinem MX4 mit Tapatalk

1 Like

@trixx schrieb:

guna_hubert schrieb:

Ist das nicht etwas, was über die Konfig gehen müsste? Aus „panel has–border“ schließe ich, dass es eigentlich einen Schalter geben müsste um „panel no–border“ zu erzeugen. Würde gerne, sofern möglich, die Settings im Backend nutzen.

Einfach beim HTML Element den Haken bei „Kein weiteres Styling hinzufügen“ setzen, dann wird auch kein Border angezeigt.

Gesendet von meinem MX4 mit Tapatalk

Hallo,

mal eine Frage dazu … wo finde ich die Einstellung? Unter „Einkaufwelt“ und SW 5,2. habe ich diese nicht gefunden!

Danke schon mal für die Info! 

HMS

@hms schrieb:

@trixx schrieb:

guna_hubert schrieb:

Ist das nicht etwas, was über die Konfig gehen müsste? Aus „panel has–border“ schließe ich, dass es eigentlich einen Schalter geben müsste um „panel no–border“ zu erzeugen. Würde gerne, sofern möglich, die Settings im Backend nutzen.

Einfach beim HTML Element den Haken bei „Kein weiteres Styling hinzufügen“ setzen, dann wird auch kein Border angezeigt.

Gesendet von meinem MX4 mit Tapatalk

Hallo,

mal eine Frage dazu … wo finde ich die Einstellung? Unter „Einkaufwelt“ und SW 5,2. habe ich diese nicht gefunden!

Danke schon mal für die Info! 

HMS

Hallo,

wenn ich mich jetzt Irre habe ich die falsche Frage zu meinem Anliegen hier gestellt, da die Änderungen in der panel.less nicht den gewünschten Erfolg gebracht hat.
Ich möchte den äußeren Rand löschen und wenn möglich den Inneren Abstand nach außen verkleinern. Zur besseren Verständigung füge ich mal ein Bild bei.
Sorry, ich arbeite erst seit Kurzem mit SW5 und habe nichts genaues mit der SUCHE gefunden.

Vielen Dank für Eure Unterstützung
HMS 

Hallo,

hast du die Stelle gefunden? ich suche auch diese Stelle um den “border” u entfernen

 

würde mich sehr freuen.

keiner eine Idee

so ich habe es gefunden für alle die auch gern den Rahmen entfernen wollen

die Werte stehen in der globel.less

@media screen and(min-width: @tabletViewportWidth) {
    .content-main {
        .box-shadow(0 0 4px 1px @border-color);
        .unitize(min-height, 750);

ä ndern in

@media screen and(min-width: @tabletViewportWidth) {
    .content-main {
        .box-shadow(0 0 0px 0px @border-color);
        .unitize(min-height, 750);

viel spaß
 

Bei Textelementen einfach den Haken bei „Kein Styling hinzufügen“ setzen, dann ist der Rahmen auch weg, ohne Less anpassen.