Benutzerdefiniertes CSS wird Ignoriert

Deutsch Diskussion Technische Fragen & Antworten
1

Hallo community. Es geht um das Dawn Theme in der Version 13.01.
ich habe auf der Produktseite mehrere Abschnitte mit „ symbol mit Text“ eingefügt.
um die Abstände der einzelnen Einträge anzupassen, habe ich folgendem Code im Benutzer definierten CSS des Themes hinzugefügt.

.icon-with-text--vertical .icon-with-text__item {
  margin-bottom: 10px;
}
.product__info-container .icon-with-text {
  margin-bottom: 1px;
  margin-top: 5px0;
}

Dies hat auch bis vorgestern problemlos funktioniert. Nur aus irgendwelchen Gründen wird seit heute dieser Code der eingetragen wurde ignoriert.
Ich verstehe nur nicht, warum diese ignoriert wird. Hier bräuchte ich bitte einmal eure Hilfe.

Wenn ich das Backup von Vorgestern wiederherstelle ist der Abstand in Ordnung und der Code wird auch nicht Ignoriert.

IMG_0807(1).JPG
IMG_0807(1).JPG3024×4032 1.77 MB

IMG_0808(1).JPG
IMG_0808(1).JPG3024×4032 1.89 MB

2

Hey @Chriz21

Du sagst “Wenn ich das Backup von Vorgestern wiederherstelle ist der Abstand in Ordnung und der Code wird auch nicht Ignoriert.” Meinst du eine vorherige Version des Dawn Themes, wie 13.0?

  • um die Abstände der einzelnen Einträge anzupassen, habe ich folgendem Code im Benutzer definierten CSS des Themes hinzugefügt.

Und wo hast du diesen CSS Code her wenn ich fragen darf? Das habe ich deiner Beschreibung nicht entnehmen können.

Wenn dein benutzerdefiniertes CSS im Dawn Theme plötzlich ignoriert wird, kann dies verschiedene Ursachen haben. Mach mal folgendes:

  1. Cache leeren: Browser speichern oft CSS-Daten, um Webseiten schneller zu laden. Versuche, den Cache deines Browsers zu leeren und die Seite erneut zu laden.

  2. Überprüfung der CSS-Syntax: Ein Tippfehler oder ein Fehler in der CSS-Syntax kann dazu führen, dass bestimmte Regeln ignoriert werden. Überprüfe besonders den Teil margin-top: 5px0; – hier scheint ein Fehler vorzuliegen. Es sollte wahrscheinlich margin-top: 5px; oder eine ähnliche gültige Einheit sein.

  3. Konflikte mit anderen Stilen: Manchmal können andere Stylesheets oder Skripte die von dir definierten Stile überschreiben. Überprüfe, ob kürzlich Änderungen an anderen CSS-Dateien oder Theme-Einstellungen vorgenommen wurden, die den Konflikt verursachen könnten.

  4. Theme-Updates: Wenn das Dawn Theme oder Shopify selbst ein Update erfahren hat, könnten Änderungen eingeführt worden sein, die deine Anpassungen beeinflussen. Prüfe die Update-Historie und Dokumentation für mögliche Hinweise.

  5. Spezifität erhöhen: Manchmal ist es notwendig, die Spezifität deiner CSS-Selektoren zu erhöhen, um sicherzustellen, dass deine Stile Vorrang haben. Dies kann durch Hinzufügen von Eltern-Selektoren oder sogar der Verwendung von !important (als letztes Mittel) erreicht werden.

Basierend auf deinem bereitgestellten Code, hier ein paar Verbesserungen:

.icon-with-text--vertical .icon-with-text__item {
  margin-bottom: 10px;
}
.product__info-container .icon-with-text {
  margin-bottom: 1px;
  margin-top: 5px; /* Korrigiert von 5px0 zu 5px */
}

Das Hinzufügen von !important zu deinem CSS ist eine Methode, um die Priorität eines Stils zu erhöhen, sodass er über andere konkurrierende Stile überwiegt. Es sollte jedoch sparsam verwendet werden, da es die CSS-Kaskade übergehen kann und die Wartung des Stylesheets erschwert. In deinem Fall könntest du es wie folgt anwenden, falls notwendig:

.icon-with-text--vertical .icon-with-text__item {
  margin-bottom: 10px !important;
}
.product__info-container .icon-with-text {
  margin-bottom: 1px !important;
  margin-top: 5px !important;
}

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

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.

3

Hallo Gabe, danke für deine schnelle Antwort

Die funktionierenden Backups haben alle die Version 13.0.1

Den Code habe ich selbst geschrieben, ich habe diverse Grunderfahrungen mit CSS.

Wenn ich den Code direkt in die base.css schreibe wird dieser auch erfolgreich umgesetzt, allerdings nur mit dem befehl “IMPORTANT”.

Ich verstehe nur nicht warum der Code die ganze Zeit in den Theme Einstellungen “Benutzerdefeniertes CSS” funktioniert hat jetzt auf einmal nicht mehr.

4

@Chriz21

Kann ich nicht sagen und beim testen deines CSS Codes kamen für meine “Symbol mit Text” Blöcke auch keine Änderungen auf. Es kann aber mehrere Gründe dafür geben. Vielleicht funktioniert es auf einem anderen Browser besser der das CSS im CSS Editor anders rendert. Ich sehe du verwendest Chrome was ich auch verwende. Gab es vielleicht ein Update?

Der CSS Editor ist auch am konstanten entwickeln und die Sicherheits-Limits dieses Editors im Theme kannst du hier einlesen. Wenn ein Code nicht im CSS Editor gerendert werden kann, dann muss man es im base.css ganz unten einfügen. Da klappt es dann. Nur ist es dann so, dass es u. U. dein Theme aus den Theme Updates ausschließen kann.

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