Frequently Asked Questions
By default, CCS (Cascading Style Sheets) files are located in the Magento 2 application file system and are recommended not to be included in template files. Let’s take a closer look at Magento 2 stylesheets organization and the layout customization possibilities.
One of the most important things to consider when implementing a new theme is the compatibility with all the other pre-installed extensions. Therefore, we’ve decided to develop our custom theme for M2 to develop it meeting code standards and 100% compatible with our extensions.
Magento 2 version has been improved for all intents and purposes and Magento CSS makes no exception.
Magento 2 has been supplied with CSS preprocessor or LESS, which allows admin users manage complex CSS files in an easy way. Thus, now to define your store styles, you can avail of both CSS and LESS stylesheets.
Besides, the built-in LESS UI library can be extended to your needs.
To make it you need to create a custom design theme in one of the 3 available ways:
In case your custom theme inherits form the default Magento themes: Luma/Blank, you can override the default LESS files. Thus, you will minimize the efforts and update store design in a minor way instead of copying extensive theme files.
E.g.: change the values of the variables. For this, you need to specify new values for the desired variables in the <theme_dir>/web/css/source/_theme.less file.
Using the built-in LESS preprocessor you will manage to create the LESS files you need to customize the storefront. The less.org performs a convenient LESS2CSS editor for the reason:
You can also compile your custom CSS files.
To change the color of the ‘Add to Cart’ button, you need to go to the Blank theme, find buttons of the .action.primary class and then change the blue color for orange. Let’s review it in details:
// Primary button
@button-primary__border: 1px solid @color-orange-red2;
@button-primary__hover__border: 1px solid @color-orange-red2;
In case you have come up with Magento 2 CSS not updating or loading issues after you added custom CSS to Magento 2, try to check the next settings:
According to the statistics, you may find helpfull the following question about magento 2 icons.