×
Login or create an account
If you have an account with us, please log in.

You have no items in your shopping cart.

Magento 2 CSS

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.

How are Magento 2 stylesheet files organized?

  1. <theme_dir>/<Namespace>_<Module>/web/css directory contains module-specific files;
  2. <theme_dir>/web/css directory contains:
    • print.less is a file, which is used to generate styles for the printable version of the store pages;
    • _styles.less is a compound file that includes all the LESS files used in a theme. It can’t be used independently;
    • styles-m.less is a file applied for the generation of mobile-specific styles. It includes the _styles.less file;
    • styles-l.less is a file, which is used to generate desktop-specific styles and it also includes the _styles.less file;
    • /source is a subdirectory that contains LESS configuration files. In turn, the files invoke mixing from the Magento UI library;
    • /source/_theme.less is a file that overrides the default Magento UI library variables values.

How to customize Magento 2 storefront styles?

Magento 2 version has been improved for all intents and purposes and CSS makes no exception. 

CSS Preprocessor

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:

1. Override the default LESS files

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.

2. Create your own LESS files

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:

less-editor-magento

3. Create your own CSS files

You can also compile your custom CSS files.

E.g.: Change styles: button color

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:

add-to-cart-color-magento

  • create a new Orange theme, which is to inherit from the Blank theme;
  • go to the orange theme directory and add the overriding app/design/frontend/OrangeCo/orange/web/css/source/_theme.less file, which contains the next code:
// Primary button
@button-primary__color: @color-white;
@button-primary__hover__color: @color-white;
@button-primary__background: @color-orange-red1;
@button-primary__hover__background: @color-orange-red4;
@button-primary__border: 1px solid @color-orange-red2;
@button-primary__hover__border: 1px solid @color-orange-red2;

After the new theme is enabled the ‘Add to Cart’ buttons will be changed in color and displayed on the frontend.
You can also find here how to customize styles illustration, create custom fonts.

Magento 2 custom CSS not loading

In case you have come up with issues after enabling custom CSS, try to check the next settings:

Rate the answer?
Back to top