FROM CACHE - de_header

Trennlinien Fußleiste entfernen

BlackBird030
Neues Mitglied
8 0 0

Hallo,

kann mir jemand verraten wie ich diese Trennlinien entfernen kann, so dass es aussieht als wäre die Fußleiste ein schöner Container? Der Bild-Banner darüber hat zum angrenzenden Element keine Trennlinie. (better-naps.de)

 

Bildschirmfoto 2024-04-05 um 16.25.42.png

3 ANTWORTEN 3

Gabe
Shopify Staff
17313 2743 4049

Hey @BlackBird030 

 

Es kann sein das diese Trennlinie Browser-bedingt ist aber um die Trennlinien im Footer-Bereich deines Shopify Dawn-Themes zu entfernen, musst du CSS verwenden, um die entsprechenden Stile anzupassen oder zu überschreiben. Die Linien könnten durch Border-Eigenschaften oder Pseudo-Elemente (:before, :after) erzeugt werden. Um genauere Anweisungen zu geben, benötige ich Details zu den spezifischen Trennlinien. Wenn es jedoch eine direkte Border-Eigenschaft ist, kannst du sie mit CSS entfernen. Probiere mal diesen CSS-Code, um die Borders im Footer zu entfernen:

 

.footer__content-top, .footer__content-bottom {
  border: none;
}

.footer__content-top .footer-block, .footer__content-bottom-wrapper {
  border: none;
}

.footer__content-bottom-wrapper .footer__column {
  border: none;
}

 

Dieser CSS Code hat in meinem Dawn Footer gefunzt und nimmt an, dass die Trennlinien als Border-Eigenschaften gesetzt sind. Wenn die Trennlinien anders erzeugt werden, zum Beispiel über Pseudo-Elemente oder Hintergrundbilder, musst du den spezifischen CSS-Code identifizieren, der sie erzeugt, und diesen überschreiben.

 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

BlackBird030
Neues Mitglied
8 0 0

Die Trennlinie in der Mitte konnte so beseitigt werden, leider nicht die obige zum Bild-Banner. Liegt es vielleicht an dem obigen Container? Ich nutze refresh

Gabe
Shopify Staff
17313 2743 4049

Hey @BlackBird030 

 

Das ::after Pseudo-Element in deinem Code mit opacity: 0.0; scheint keinen sichtbaren Inhalt zu haben, der eine Trennlinie verursachen würde. Es könnte jedoch sein, dass die Trennlinie von einem anderen Element erzeugt wird oder durch vorhergehende oder nachfolgende Sektionen im Layout deiner Seite.

 

image.png

 

Hier sind ein paar allgemeine Schritte, die du durchführen kannst:

  1. Untersuche die Seite im Browser mit Entwicklerwerkzeugen (Rechtsklick auf die Seite und "Untersuchen" oder F12 drücken), um herauszufinden, welches Element die Trennlinie erzeugt.

  2. Suche nach CSS-Eigenschaften wie border, outline, box-shadow, oder nach einem Pseudo-Element ::before oder ::after, das für die Linie verantwortlich sein könnte.

  3. Wenn du das Element gefunden hast, das die Linie erzeugt, füge dem entsprechenden CSS-Selektor border: none !important;, outline: none !important; oder box-shadow: none !important; hinzu, je nachdem, was zutrifft.

Hier ist ein allgemeines Beispiel, wie der CSS-Code aussehen könnte, um eine mögliche Trennlinie zu entfernen:

 

.banner__content, .banner__content::after, .banner__content::before,
.section::after, .section::before {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

 

Oh und Vorsicht:

 

image.png

 

Wenn das ein Video im benutzerdefinierten Liquid Abschnitt sein soll dann haben wir das Thema schon oft hier besprochen.

 

Hoffe das hilft dir weiter! Und noch ein schönes W-Ende! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog