Blog gestaltung

[Chriz21]

Hi community. 
Es geht um das Dawn Theme in der aktuellen Version. In den Template lassen sich ja weitgehend alle Farbvarianten auch ohne Eingriff in den Code umsetzen. Nur wenn es um die Gestaltung des Blogs geht Sind dort leider keine Einstellungen bezüglich Farb etc. möglich. Da sehe ich eine Einstellung oder ist dies ohne Eingriff in den Code nicht möglich?

[Gabe]

Hey @Chriz21 

Die Gestaltung der Farben in Blogs ist etwas limitiert und auch abhängig vom Theme. Unsere Free Themes können einiges, aber die Premium Themes sind etwas besser. Hast du das auch in unseren Premium Themes im Shop testen können? 

Siehe einen verwandten Thread zum Thema hier. Einen weiteren hier, und hier, und hier.

Das Anpassen der Blog-Farbgestaltung im Shopify Dawn Theme ohne direkten Eingriff in den Code scheint nicht direkt über die Theme-Einstellungen von Dawn somit möglich zu sein. Allerdings gibt es Wege, um bestimmte Anpassungen vorzunehmen, die Farbe und Layout betreffen, indem man etwas tiefer in den Code eintaucht.

Wenn es speziell um die Anpassung des Designs des Blogs geht, sind die Möglichkeiten direkt über das Theme-Interface oft begrenzter. Dies würde bedeuten, dass du die Liquid-Template-Dateien, CSS- oder eventuell JavaScript-Dateien bearbeiten musst, die das Aussehen und Verhalten deines Blogs bestimmen.

Folgende Schritte könnten dir dabei helfen, die gewünschten Anpassungen vorzunehmen:

1. Theme anpassen: Gehe in deinem Shopify-Adminbereich zu „Online-Store“ > „Themes“. Finde dein aktives Dawn Theme und wähle „Anpassen“.

2. Code bearbeiten: Wenn du keine Optionen für die Bloggestaltung findest, gehe zurück und wähle dieses Mal „Aktionen“ > „Code bearbeiten“. Vielleicht kannst du das aber vermeiden denn der CSS Editor erlaubt auch viel mit den Farben rumbasteln, ohne dein Theme aus den Theme Updates auszuschließen.

3. Spezifische Dateien finden: Die Blog-relevanten Einstellungen und Styles findest du wahrscheinlich in Dateien wie article.liquid (für einzelne Blogbeiträge), blog.liquid (für die Blogübersichtsseite) und in den zugehörigen CSS-Dateien. Die spezifischen Dateinamen können variieren, je nachdem, wie das Theme aufgebaut ist.

4. CSS-Anpassungen: Um Farben und Stile anzupassen, suchst du in den CSS-Dateien nach den relevanten Klassen, die deinem Blog-Layout zugeordnet sind, und änderst die Farbwerte entsprechend.

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.

[Chriz21]

Hallo Gabe, danke für deine schnelle Antwort. Schade das es ohne Eingriff in den Code nicht geht.

Vielleicht könntest du mir bei ein paar Kleinigkeiten noch behilflich sein.

Ich finde nicht die richtige .CSS um einen einzel blog zu bearbeiten.

Ich würde gern die Farben anpassen so das es zum Rest des Layouts passt.

So sieht mein Blog aktuell aus.

Kannst du mir die .CSS sagen wo ich die Änderungen bezüglich der Hintergrundfarbe etc. vornehmen kann?

[Gabe · Accepted solution]

Hey @Chriz21 

Sieht nett aus dein Blog Screenshot oben! Wenn du einen befristeten Vorschaulink hioer postest kann ich gerne Tipps abgeben!

In meinem Test Dawn Theme habe ich das jetzt getestet und folgender CSS kannst du im CSS Editor für den Blog Text Abschnitt testen um einen dunklen Hintergrund auszuprobieren:

Die dunkelgraue Farbe im CSS habe ich mit einem Eyedropper aus deinem obigen Bild entnommen:

Hier der CSS Code:

.article-template {
  background-color: #242833; /* Dunkelgrauer Hintergrund für den Blog-Artikel */
}

.article-template__title {
  color: #FFFFFF; /* Weißer Text für den Titel */
}

.card__inner {
  background-color: #242833; /* Dunkelgrauer Hintergrund für Karten auf anderen Seiten */
}

Die Schrift weiss machen:

.article-template {
  background-color: #242833; /* Dunkelgrauer Hintergrund für den Blog-Artikel */
}

.article-template__title, .article-template__content {
  color: #FFFFFF; /* Weißer Text für den Titel und Inhalt */
}

.card__inner {
  background-color: #242833; /* Dunkelgrauer Hintergrund für Karten auf anderen Seiten */
}

.card__heading, .card__information {
  color: #FFFFFF; /* Weißer Text für Überschriften und Informationen auf Karten */
}

/* Farbe des Datums auf Weiß setzen */
.article-template__hero-container time {
  color: #FFFFFF;
}

/* Farbe des Share-Links auf Weiß setzen */
.share-button__button, .share-button__button svg {
  color: #FFFFFF; /* Für Text */
  fill: #FFFFFF; /* Für SVG-Elemente */
}

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

[Chriz21]

Hi Gabe,

du hast mir wirklich sehr weiterhelfen können.

Was ich nicht im CSS finde ist der Hintergrund für die Blog Übersicht diese ist bei mir noch weiß.

Zuletzt wollte ich in der einzel Blog Ansicht den "share" Button in "teilen" umbenennen. Die habe ich auch unter "Standard Text bearbeiten" gemacht. Aber leider bleibt es bei "share". Vielleicht hast du hier noch einen Tipp für mich.

https://t5rvbhhnznpv2tkf-73159377160.shopifypreview.com 

[Gabe]

@Chriz21 

Freut mich immer helfen zu können! 😉

Und alles sieht für mich jetzt super aus - keine weisse Ränder mehr:

Und der Share Button ist leider ein externer (von Meta, nur KEIN Shariff Button) und kann somit nicht übersetzt werden, wie es aussieht

😞

Aber great teamwork! Und noch ein schönes W-Ende! 😉

[Chriz21]

In der Blog Übersicht "zurück zum Blog" habe ich leider immer noch weiße Ränder.

[Gabe]

Hey @Chriz21 

Ich habe dein Shop nochmal 👀 vor dem Passwortschutz und konnte keine weiße Ränder erkennen. Besteht das Problem noch? Wie ist auf verschiedenen Browser und nach einem entleeren des Browser Cache? Probiere mal diese Schritte hier.

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

[Chriz21]

Hi Gabe, das Problem besteht leider immer noch. Cache habe ich gelöscht und auch andere Browser getestet. 

https://fovreozagj0mvqzu-73159377160.shopifypreview.com

[Gabe]

Hey @Chriz21 

Siehe hier.

VG,

[Chriz21]

Hi Gabe, du bist leider nicht auf der richtigen Seite. Entweder im Footer "Blog" oder im einzel Blog "zurück zum Blog".

[Gabe]

@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! 😉

[Chriz21]

Hi Gabe,

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 */
}

Diesen Ansatz habe ich bereits auch schon probiert. Es scheint so als ob die weißen Ränder von etwas überlagert werden. Was ich auch versuche ich bekomme diese nicht weg. Hast du noch einen anderen Ansatz?

[Gabe]

@Chriz21 

Leider nein und kann dir gerne einen Experten empfehlen. Poste auch deine Frage in unserem Design Forum hier denn da verweilen ein paar unserer Experten aus Indien die dir bestimmt helfen können.

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

[Chriz21]

Das werde ich versuchen Danke.

Gibt es kostenfreie Alternativen zum PageFly Page Builder?

[Gabe]

Leider nein da diese Apps eine vielseitige Reihe von Features bieten um deine Pages so zu gestalten wie du es haben möchtest, dass die Grenzen deines Themes ziemlich sprengen.