Custom CSS Fehler - Dawn Theme

[DonToni91]

Hallo zusammen,

ich möchte den Bullet Point Style einer unordered List mit folgendem Code mit Custom CSS ändern:

ul {

  list-style-type: none;

  padding: 0;

  margin: 0;

}

ul li:before {

  content: "";

  display: inline-block;

  width: 20px; /* Breite des Symbols */

  height: 20px; /* Höhe des Symbols */

  background-image: url(https://cdn.shopify.com/s/files/1/0756/5233/3911/files/logo_430x.png?v=1684055663#); /* Base64-kodierte Bilddaten des Pfotensymbols in Grün */

  background-size: contain;

  background-repeat: no-repeat;

  margin-right: 5px; /* optionaler Abstand zur Liste */

}

Das funktioniert auch, aber beim Speichern erhalte ich eine Fehlermeldung "Sitzung im Onlineshop-Editor kann nicht veröffentlicht werden". Woran könnte das liegen?

[Gabe]

Hey @DonToni91 

Danke  für den Code und diese Fehlermeldung kommt meistens auf wenn etwas im Code hochgeladen wird das die max. Größe der Datei über die derzeitigen Limit hinaus geht oder wenn der File Format nicht vom Theme angenommen wird.

Ist dein CDN File ein .webp Format?

Probiere bitte mal folgendes: Installiere eine nagelneue Kopie des Dawn Themes in deiner Theme Library und prüfe ob dieselbe Fehlermeldung mit demselben Code da auch aufkommt. 

Probiere es auch mit entleerten Browser Cache und/oder im Private Browsing/Incognito Modus und dann schauen wir weiter. 😉

[DonToni91]

Hi Gabe,

ich habe alle Tipps ausprobiert, leider ohne Erfolg. Auch wenn ich statt dem background-image ein Unicode Symbol verwende, lässt sich die Änderung nicht abspeichern. Beispielcode:

ul {
list-style-type: none;
padding: 0;
margin: 0;
}

ul li:before {
content: "\1F43E"; /* Unicode-Zeichenreferenz für das Pfotensymbol */
display: inline-block;
font-size: 20px; /* Schriftgröße des Symbols */
margin-right: 5px; /* optionaler Abstand zur Liste */
}

Ich erhalte die identische Fehlermeldung.

Viele Grüße

Anton

[Gabe]

Hey Anton! @DonToni91 

Danke für den Code und es ist schwer zu sagen. Kannst du mal hier bitte die genauen einzelnen Schritte auflisten die du ausführst und wo genau samt Screenshot?

Überprüfe auch, ob das CSS-Code richtig formatiert ist und ob es keine Syntaxfehler gibt, insbesondere dabei auf fehlende Semikolon (;) oder Klammern ({}).

Beispielsweise erfordert die Verwendung des content-Attributs in der Regel Anführungszeichen. Bei Unicode-Symbolen verwenden Sie "\\1F43E" anstelle von "\1F43E".

Ob das die Ursache ist kann ich aber nicht sagen aber vielleicht kann unser Experte @Finer etwas dazu sagen?

[DonToni91]

Hi Gabe hier die Screenshots:

[Gabe]

Hey @DonToni91 

Ich sehe auch warum du das so gestalten möchtest denn die Liste sieht nicht schlecht aus!  🐾

Passiert das auch in anderen Themes, sowohl Shopify als auch drittanbieter themes die du zu deinem Shop hinzufügen kannst als Testumgebungen? Wenn ja, dann ist dein CSS nicht kompatibel leider.

Ich habe den Code in meinem Theme auch nicht speichern können:

Es gelten die folgenden CSS-Editor Regeln:

• Die folgenden CSS-Auswahlmöglichkeiten werden in benutzerdefiniertem CSS nicht unterstützt:

  • Regeln für @import, @charset und @namespace können nicht verwendet werden
  • Für CSS auf Abschnittsebene sind nur die Regeln @media, @container, @layer und @supports zulässig
  • Für CSS auf Abschnittsebene kannst du die ID oder die Klassen des einschließenden Shopify-Abschnittselements, das vom Theme gerendert wird, nicht mit der shopify-section-Klasse erreichen

• Wenn eine Regel für benutzerdefiniertes CSS mit dem Tag angegeben wird, das das übergeordnete Abschnittselement umschließt, wird es als absteigendes Tag betrachtet und die Stilregel wird auf diesen Abschnitt angewendet. Beachte, dass der übergeordnete Abschnitt von einem <div> -Tag umschlossen ist. Dieses kann jedoch von Theme-Entwicklern auf jeden der zulässigen Werte im Abschnittsschema festgelegt werden.

• Derzeit ist nur die Domain https://cdn.shopify.com zulässig, wenn URLs in benutzerdefiniertem CSS verwendet werden.

• Benutzerdefinierte Schriftarten sind nicht eingeschränkt. Benutzerdefinierte Schriftarten sind jedoch eine separate Ressource, die von Browsern heruntergeladen werden, bevor Text gerendert wird. Dies kann sich auf die Gesamtleistung eines Shops auswirken. Es liegt in deiner Verantwortung, sicherzustellen, dass deine Storefront von benutzerdefinierten Schriftarten nicht negativ betroffen ist. Erfahre, wie du benutzerdefinierte Schriftarten in deinem Theme verwendest.

• CSS-Regeln, die sich auf das gesamte Theme auswirken, sind auf 1500 Zeichen begrenzt.

• CSS-Regeln, die einen bestimmten Abschnitt betreffen, sind auf 500 Zeichen begrenzt.

• Abhängig von den von dir ausgewählten CSS-Auswahlmöglichkeiten und Klassen kann das Aktualisieren deines Theme dazu führen, dass dein benutzerdefiniertes CSS nicht mehr funktioniert.

Shopify unterstützt keine erweiterten Theme-Anpassungen. Wenn in deinem benutzerdefinierten CSS ein Fehler bezüglich dieser Einschränkungen auftritt und du nicht ermitteln kannst, was den Fehler verursacht, sieh dir die Liste anderer verfügbarer Support-Ressourcen an.

[DonToni91]

Hi Gabe, funktioniert leider auch in anderen Themes nicht 😞 Dann mal anders gefragt: Gibt es einen einfachen CSS Code der die Standard Bulletpoints verändern kann?

[Gabe]

@DonToni91 

Haben dir die Links oben helfen können? Du kannst auch die list-style-type-Eigenschaft verwenden (oben hast du Wert none drin) und damit den Stil der Bulletpoints ändern, zum Beispiel auf Kreise, Quadrate usw.

ul {
    list-style-type: circle; 
}

Wenn du jedoch ein eigenes Bild oder Icon als Bullet-Point nutzen willst, könntest du die list-style-image-Eigenschaft verwenden:

ul {
    list-style-image: url('dein-bild-url'); 
}

Du kannst auch den CSS-Code notfalls in deine Stylesheet-Datei (typischerweise base.css) einpflegen.

[Finer]

@DonToni91 manchmal hängt die Fehlermeldung mit einer erreichten maximalen Anzahl an Zeilen  zusammen. Es kann ggf. auch an den pseudo-selector liegen.

[Guido_Michele]

Hallo @DonToni91 

in der letzten Version von Dawn funktioniert Dein Custom CSS ohne Probleme.

Grüsse Guido