FROM CACHE - de_header

Custom CSS Fehler - Dawn Theme

DonToni91
Neues Mitglied
4 0 0

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?

 

9 ANTWORTEN 9
Gabe
Shopify Staff
Shopify Staff
14418 2265 3452

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. 😉

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

DonToni91
Neues Mitglied
4 0 0

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
Shopify Staff
Shopify Staff
14418 2265 3452

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?

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

DonToni91
Neues Mitglied
4 0 0

Hi Gabe hier die Screenshots:

 

1. Abschnitt vor Änderung.png2. Einfügen des Custom CSS Code.png3. Fehlermeldung beim Speichern.png

Gabe
Shopify Staff
Shopify Staff
14418 2265 3452

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:

 

image.png

 

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.

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

DonToni91
Neues Mitglied
4 0 0

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
Shopify Staff
Shopify Staff
14418 2265 3452

@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.

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

Finer
Shopify Expert
1903 391 679

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

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Guido_Michele
Shopify Partner
90 24 71

 

Hallo @DonToni91 

 

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

 

Grüsse Guido

 

Screenshot 2023-06-26 at 14.00.22.png