Blog gestaltung

Topic summary

Anpassung der Blog-Gestaltung (Farben) im Shopify-Dawn-Theme. Die Theme-Einstellungen reichen für den Blog-Bereich nicht aus; ohne Code sind Farbänderungen dort kaum möglich. Premium-Themes bieten teils mehr Optionen.

Vorgehen: Anpassung per CSS/Liquid (CSS = Stylesheets, Liquid = Shopify-Template-Sprache). Konkrete CSS-Snippets wurden bereitgestellt (.article-template, .article-template__title, .card__inner), um dunklen Hintergrund (#242833) und weiße Typografie in Einzelbeiträgen zu setzen.

Ergebnis: Einzelne Blogposts lassen sich farblich anpassen. Der „Share“-Button in der Einzelansicht kann nicht in „Teilen“ umbenannt werden, da es sich um einen externen Meta-Share-Button handelt.

Offenes Problem: In der Blog-Übersicht bleiben weiße Außenränder sichtbar, trotz Cache-Löschung/Browsertests. Globaler CSS-Ansatz (body/html, .content-for-layout, .shopify-section) wurde versucht; vermutlich überdeckende Container verursachen weiterhin Weiß.

Belege: Screenshots und Vorschaulinks wurden geteilt und sind zentral für die Fehlersuche.

Nächste Schritte: Keine endgültige Lösung im Thread. Empfehlung, einen Experten einzuschalten bzw. im Design-Forum um Hilfe zu bitten.

Zusatzfrage: Kostenfreie PageFly-Alternativen? Antwort: Keine kostenlosen vollwertigen Alternativen genannt.

Summarized with AI on January 1. AI used: gpt-5.

@Chriz21

Ah ok sehe was du meinst Chris. Das ist die Blogs News Übersicht. Um die weißen Außenränder links und rechts auf deinen Produktseiten in Shopify dunkelgrau zu machen, ähnlich wie den Rest der Hintergrundfarbe deiner Blogs-Übersichtsseite, musst du spezifischen CSS-Code verwenden, der den Hintergrund der übergeordneten Elemente (<main>, <section>, oder den umschließenden Container) ändert, um die gewünschte Farbe (#242833 in deinem Fall) anzuwenden.

Basierend auf deinem Code scheint der dunkelgraue Hintergrund bereits für einen Teil der Seite, speziell für den Abschnitt .section-template--19258194297096__main-padding und innerhalb des .main-blog Containers, eingestellt zu sein. Du musst jedoch sicherstellen, dass dieser Stil auf die übergeordneten Container erweitert wird, die den sichtbaren Bereich deiner Seite einnehmen.

Hier ist ein Beispiel, wie du dies erreichen kannst:

body, html {
  background-color: #242833; /* Dunkelgrauer Hintergrund */
}
.content-for-layout, .shopify-section {
  background-color: transparent; /* Oder #242833, falls du den gesamten Innenbereich auch dunkel haben möchtest */
}

Stelle sicher, dass keine internen Elemente einen weißen Hintergrund haben, der die dunkelgraue Farbe überdecken könnte.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink: