Sometimes Magento 2 CSS files stop loading or are not displayed correctly. There are several possible causes, but running the following commands from the Magento 2 root directory will fix many of them:
|
1 2 3 4 |
rm -rf var/view_preprocessed/* rm -rf pub/static/* bin/magento setup:static-content:deploy de_DE en_US -f //(add additional languages if needed) bin/magento cache:clean |
When you install an extension, such as a Hyvä compatibility module, its styles (usually from tailwind-source.css) may not immediately be picked up by Hyvä and Tailwind. To include those styles, run the following command from your Magento 2 root directory:…
You can easily change radio button colors in your Magento 2 Hyvä theme, for example by using a predefined color:
|
1 2 3 |
input[type='radio'] { @apply text-emerald-500 focus:ring-emerald-500 } |
If you have defined your own color, the syntax is similar. Without shades:
|
1 2 3 |
input[type='radio'] { @apply text-thecolor focus:ring-thecolor } |
With shades:
|
1 2 3 |
input[type='radio'] { @apply text-thecolor-500 focus:ring-thecolor-500 } |
The Magento 2 Snowdog menu defines its own styles, including hover text colors. To override those styles or other Snowdog menu CSS, follow these steps: Open the file app/design/frontend/Theme/hyva/web/tailwind/postcss.config.js in your Hyvä child theme. Add the following code to exclude…
To change the focus ring color in your Hyvä theme to a custom color, edit the file app/design/frontend/Theme/hyva/web/tailwind/tailwind.config.js erledigen:
|
1 2 3 4 5 6 7 8 9 |
... theme: { extend: { ringColor: { 'thecolor': '#123456' }, } } ... |
You can then use the color, for example, like this:
|
1 |
class="... focus:ring-thecolor ..." |
. To use an existing Tailwind CSS color instead, you…
Run these commands from your Magento 2 root directory to disable CSS merging:
|
1 2 3 |
php bin/magento config:set dev/css/merge_css_files 0 php bin/magento cache:clean php bin/magento cache:flush |
To enable CSS merging again, run the following commands:
|
1 2 3 |
php bin/magento config:set dev/css/merge_css_files 1 php bin/magento cache:clean php bin/magento cache:flush |
This method works with Magento 2.2 and later.
Sometimes JavaScript and CSS assets in Magento 2 are not loaded correctly. If you need to generate the JavaScript and CSS resources manually, you can do so from the Linux command line. The following command generates the files:
|
1 |
php bin/magento setup:static-content:deploy de_DE |
Add the following CSS to youe themes CSS file and the “in stock” / “sold out” information will not be shown on the Magento product page.
|
1 2 3 4 |
.availability.in-stock, .availability.out-of-stock { display: none; } |