Der Magento Experte

CSS lädt nicht (mehr)

Mex — Tue, 04 Nov 2025 21:51:19 +0000

Es kann vorkommen, dass CSS in Ihrem Magento 2 nicht korrekt lädt bzw. dargestellt wird. Es gibt diverse Ursachen dafür, mit den folgenden Befehlen (ausgeführt im Rootordner Ihres Magento 2 Shops), lässt sich das Problem aber in den meisten Fällen lösen:

rm -rf var/view_preprocessed/*
rm -rf pub/static/*
bin/magento setup:static-content:deploy de_DE en_US -f //(evtl. weitere Sprachen hinzufügen)
bin/magento cache:clean

Styles einer Extension werden nicht berücksichtig in Hyvä

Mex — Mon, 10 Jun 2024 09:49:40 +0000

Wenn Sie eine Extension installieren (z.B. ein Hyvä Kompatibilitätsmodul / eine Hyvä Kompatibilitätsextension), werden die Styles dieser Extension (in der Regel aus tailwind-source.css) nicht sofort von Hyvä erkannt und entsprechend in Hyvä bzw. Tailwind berücksichtigt. Damit dies geschieht, muss zuerst ein Befehl ausgeführt werden in Ihrem Magento 2 Rootordner:

php bin/magento hyva:config:generate

Durch diesen Befehl werden die Styles nun berücksichtigt (in app/etc/hyva-themes.json) und nach erneutem Deployment und Ausführen des npm build Befehls sollten die Styles nun korrekt verwendet werden.

npm --prefix app/design/frontend/Theme/hyva/web/tailwind run build-prod

Farbe Radiobutton anpassen im Hyvä Theme

Mex — Thu, 18 Apr 2024 07:15:32 +0000

Sie können die Farbe des Radio Buttons im Hyvä Theme in Ihrem Magento 2 Shop sehr einfach anpassen, entweder mit einer vordefinierten Farbe, das könnte dann so aussehen:

input[type='radio'] {
    @apply text-emerald-500 focus:ring-emerald-500
}

Wenn Sie eine eigene Farbe definiert haben, sieht es ähnlich aus:

Ohne Shades:

input[type='radio'] {
    @apply text-thecolor focus:ring-thecolor
}

Mit Shades:

input[type='radio'] {
    @apply text-thecolor-500 focus:ring-thecolor-500
}

Snowdog Menü CSS überschreiben im Hyvä Theme

Mex — Tue, 16 Apr 2024 08:22:41 +0000

Das Magento 2 Snowdog Menü definiert sein eigenes Layout für z.B. die Hover Textfarbe. Um dieses oder anderes CSS des Snowdog Menüs zu überschreiben, gehen Sie folgendermaßen vor:

Öffnen Sie die Datei app/design/frontend/Theme/hyva/web/tailwind/postcss.config.js Ihres Hyvä Child Themes
Fügen Sie den folgenden Code ein, um das Layout der Snowdog Menü Extension zu exkludieren:
```
postcssImportHyvaModules({
    excludeDirs: ["vendor/snowdog/module-menu"],
}),
```
Kopieren Sie nun die Datei vendor/snowdog/module-menu/view/frontend/tailwind/tailwind-source.css in Ihr Hyvä Child Theme an die Stelle app/design/frontend/Theme/hyva/Snowdog_Menu/tailwind/tailwind-source.css
Öffnen Sie die soeben kopierte Datei und passen Sie den Inhalt nach Ihren Wünschen an.
Führen Sie nun den
```
npm --prefix app/design/frontend/Theme/hyva/web/tailwind run build-prod
```
aus dem Rootverzeichnis Ihres Magento 2 Shops aus und deployen Sie die Inhalte erneut

Fertig, laden Sie das Frontend Ihres Magento 2 Shops erneut und prüfen Sie, ob Ihre CSS Anpassungen zu sehen sind.

Focus Ringfarbe ändern beim Hyvä Theme

Mex — Mon, 15 Apr 2024 11:01:29 +0000

Wenn Sie die Farbe des Fokusrings in Ihrem Hyvä Theme anpassen und eine individuelle Farbe verwenden möchten, können Sie das in der Datei app/design/frontend/Theme/hyva/web/tailwind/tailwind.config.js erledigen:

...
theme: {
    extend: {
        ringColor: {
            'thecolor': '#123456'
        },
    }
}
...

Zugriff auf die Farbe haben Sie dann z.B. mit dem Code:

class="... focus:ring-thecolor ..."

. Wenn Sie eine bereits vorhandene Tailwind CSS Farbe verwenden möchten, geht das z.B. so:

class="... focus:ring-yellow-500 ..."

CSS Merging deaktivieren / aktivieren

Mex — Fri, 11 Oct 2019 06:14:46 +0000

Führen Sie die folgenden Befehle in Ihrem Magento 2 Rootordner aus, um das Zusammenfügen von CSS zu deaktivieren:

php bin/magento config:set dev/css/merge_css_files 0
php bin/magento cache:clean
php bin/magento cache:flush

Um das Zusammenfügen wieder zu aktivieren, müssen folgende Befehle ausgeführt werden:

php bin/magento config:set dev/css/merge_css_files 1
php bin/magento cache:clean
php bin/magento cache:flush

Diese Vorgehensweise funktioniert ab Magento 2.2

CSS und JavaScript manuell erstellen für de_DE

Mex — Tue, 05 Jul 2016 12:15:43 +0000

Manchmal werden die JS und CSS Dateien in Magento 2 nicht korrekt geladen. Wenn Sie die JS und CSS Resourcen also manuell erstellen möchten oder, können Sie dies ganz einfach in der Linux Konsole durchführen. Folgender Befehel erstellt die Dateien:

php bin/magento setup:static-content:deploy de_DE

Auf Lager / Ausverkauft (Lagerstatus) von der Produktseite entfernen

Mex — Tue, 09 Apr 2013 11:12:39 +0000

Mittels CSS lässt sich der Lagerstatus eines Produktes einfach von der Magento Produktdetailseite entfernen. Fügen Sie den folgenden Code in Ihre genutzte CSS Datei ein.

.availability.in-stock,
.availability.out-of-stock {
    display: none;
}