Erlebniswelten Abstände zwischen den Elementen

EDIT:

habs hinbekommen. WIe bekomme ich jetzt die Rahmen da weg??

Moin,

gibt es einen Weg, die einzelnen Komponenten der Erlebniswelten so zusammenzufassen, das der Abstand wie im Bild nicht zu sehen ist??

Grüße

Hat irgendjemand den Ansatz einer Idee??

Über z.B. Chrome Developer Console das entsprechende HTML-Element untersuchen/herausfinden und per CSS über ein Plugin (z.B. Custom JavaScript/CSS Manager für Shopware 6 | Shopware Store) oder im eigenen Theme den „margin“ und/oder „border“ entfernen.

@area-net-gmbh

Danke. Ich weiss zwar jetzt, welcher Block das ist, und wo genau das passiert. Weiss aber nicht, wie ich das ändern kann?? Finde die CSS Geschichte nicht.

Was heißt genau: Finde die CSS Geschichte nicht?

Frage: Kennst du dich mit HTML und CSS aus?

@area-net-gmbh

ein wenig. Mehr HTML, weniger CSS.

Über die Chrome Developer Console habe ich den Abschnitt gefunden, der den Rahmen ausgibt.

Wie es jetzt weiter geht, bekomme ich beim besten Willen nicht hin. Am liebsten möchte ich in der Erlebniswelt nur eine bestimmte Sektion ohne Rahmen machen.

EDIT: es geht konkret um die Blockkategorie „Text“ aus dem Standard der SW6

Dann musst du nach einer Klasse des übergeordneten Blocks schauen, der für dich passt - z.B. sollten alle Blockkategorien „Text“ auch eine eindeutige CSS-Klasse (in dem Fall „cms-block-text“) haben. Dann kannst du im CSS folgendes schreiben:

.cms-block-text .dein-block-mit-rahmen{
  border: 0 !important;
}

Das mit dem „important“ ist nicht ganz sauber, garantiert aber in der Regel, dass deine Änderungen auch gezogen wird. Den CSS-Code trägst du dann über obiges Plugin - oder dein eigenes Theme - ein. Vermutlich bei dir eher über das Plugin.

Alternativ kannst du im Admin (Layout Designer) dem gewünschten Block auch eine eigene Klasse geben, z.B. „no-border“ und obige Anweisung entsprechend anpassen.

@area-net-gmbh

Danke!!

Das hier müsste es sein:

.cms-section-default.boxed .cms-block:not(.twt-cms-block-reset) {

  1. border: 1px solid #eee;
  2. border-radius: 2px;
  3. margin-bottom: 20px;

}

… wie muss ich das dann im CSS Eintragen?? Und vor allem, wo kommt das in der Erlebniswelt rein??

.cms-section-default.boxed .cms-block:not(.twt-cms-block-reset) { border: 0; }

Mehr Hilfe geht jetzt aber fast wirklich nicht mehr.

1 „Gefällt mir“

@area-net-gmbh

Das hat funktioniert!!

Vielen Danke!!!

1 „Gefällt mir“

@area-net-gmbh

OK, einen hab ich noch. Gibt es eine Möglichkeit einzelne Blöcke wie eben den Textblock zu kopieren, einen anderen Namen zu vergeben und darauf einen eigenen CSS Eintrag zu setzen??

Kopieren geht leider nicht. Musst den Block neu im Designer anlegen. Dürfte aber bei einem reinen Textblock nicht der ganz große Aufwand sein.

PS: Einzelne Blöcke lassen sich über die „element-id“ ansprechen. Beispiel:

  [data-cms-element-id="e702a98ffc074949b37c076553f166ab"] { 
    .cms-element-text {
      margin: 50px 0;
    }
  }
1 „Gefällt mir“