Remove grey line around images on Dawn theme

Deutsch Diskussion Shopify Design
1

Hi, i have grey lines around my white images. I would like to remove the lines. Pls Help

2

Hey @Lennardb19

We would need some more details, like, are you talking about the hero banner, the slide show, the Image and text sections, the collection hero, the collection Images, the product page Images etc. Each of these have a different code and are found in a different place in the theme.liquid. You didn’t provide us with any details and so am awaiting your reply. :wink:

Please test the following in a theme copy, not in the live theme first:

For the slideshow, for example, you can add code by following these steps to remove border

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid theme file

  3. Paste the below code before </head>

Or is it here that you mean:

image.png
image.png1428Ă—1121 211 KB

Then there’s the divider line for product images:

image.png
image.png1525Ă—516 93.8 KB

Paste this code on top of the section-main-product.css file.

modal-opener.product__modal-opener.product__modal-opener--image.no-js-hidden {
    border: 0px !important;
}

Hope that helps! :wink:

3

Hi, both options dont work. Its not a product. Just a normal image on the Homepage.

1 Like
4

Hallo.
Identisches Problem bei uns (Dawn-Theme) - ich schlieĂźe mich also mal dem Thema hier an.

Bei uns “stören” die hellgrauen Rahmen um (alle) Bilder vor allem auf den Seiten, die mit dem Editor erstellt sind; also Blog und Seiten. Ganz nebenbei: ein besserer Editor wäre toll :cry: .

Ich gehe davon aus, dass dieser Bereich

.rte img {
height: auto;
max-width: 100%;
border: var(–media-border-width) solid rgba(var(–color-foreground),var(–media-border-opacity));
border-radius: var(–media-radius);
box-shadow: var(–media-shadow-horizontal-offset) var(–media-shadow-vertical-offset) var(–media-shadow-blur-radius) rgba(var(–color-shadow),var(–media-shadow-opacity));
margin-bottom: var(–media-shadow-vertical-offset)
}

in der component-rte.css?v=Usernummer durch bspw. diese Zeilen

.rte img {
height: auto;
max-width: 100%;
margin-bottom: var(–media-shadow-vertical-offset)
}

ersetzt ! werden müsste. Löschen, nun gut, geht schnell. Folgen? Was passiert bei Updates usw. Irgendwer hat sich ja sicherlich bei diesem Rahmen was gedacht…

Frage: Weiß jemand der Profis hier, ob das negative Auswirkungen, ggf. auch auf andere Bereiche, haben könnte?

Vielen Dank vorab fĂĽr jede UnterstĂĽtzung.

5

Heyb Katharina! @Katharina

Danke für die Angaben und an erster Stelle, hast du deinen Code Vorschlag oben in einer Theme-Kopie/Testumgebung getestet (Theme → Duplizieren)? Es scheint richtig zu sein was du vorschlägst aber warum nicht den neuen Benutzerdefinierten CSS Editor im Theme Editor dafür verwenden da dieser den Zugang zu den Theme Updates aufrecht erhält falls du diese nicht verlieren möchtest? Siehe mehr dazu hier.

21-02-55yw0-q3vnv.png
21-02-55yw0-q3vnv.png306Ă—314 16.1 KB

6

Hallo @Gabe , verstanden. Ich war davon ausgegangen, dass diese .css des Users (Dein Vorschlag zur Lösung) für den Bereich des Editors nicht gelten. Da stand ich, bei jetzt genauerem Nachdenken, echt auf der Leitung :wink: …

Ich gehe nun mal davon aus, dass die gesamte class einzufügen wäre.

Insofern kurze ergänzende Frage: Ist dieser Bereich von Euren Entwicklern immer so gedacht, die gesamte (geänderte) class da einzufügen?
Besten Dank vorab :upside_down_face: . VG. Katharina

7

Ergänzung: css (2. Abschnitt von oben) eingefügt → Rahmen noch da. Leider.

Ich weiĂź nicht, wo es hingeschrieben wurde, aber definitiv nicht in die component-rte.css :cry:

8

Hey @Katharina

Es erfordert Kenntnisse von CSS und HTML, und ggf. muss man das in bzw. das ganze Element in

Tags wrappen. Vielleicht können wir auch Unterstützung dafür anbieten wenn das ein Shopify Theme ist.

Wenn du mehr über CSS lernen möchtest, siehe hier: