All You Need to Know About Customize a Theme’s Styles in Magento

Howdy Magento Folks?,

Are you all ready to learn new? I am hearing a big yes from your side. As always welcome to Magento Tutorial blog. Today I am here to illustrate to you all about customizing a theme’s styles in Magento. Also, go through our latest published article How to Create your Own Custom Theme in Magento 2. Let’s dive in?

Introduction:

Magento themes are very essential for the E-commerce merchants to advance the look of their store. Mainly, one can also customize the themes installed in the Magento store. If you think that your installed theme is not sufficient to attract your users then there is a chance of losing all your customers also. Looking forward to helping you customize your theme. For PSD to Magento Theme Conversion visit PSD to Magento Theme Conversion Service which will help you in improving your website design.

Steps to customize a theme’s styles in Magento:

Extend parent styles

For extending parent theme’s styles.

Step 1: Firstly create a web/css/source sub-directory in your theme directory. After that, you will need to create a _extend.less file at that place. Refer to the given below path for the same.

<theme_dir>/web/css/source/_extend.less

Now here you have to add your less code in this file. The quick and easiest way to extend the theme with the help of  _extend.less.

Override parent styles

Here for overriding parent styles, one has to override the default Magento UI library variables.

Step 1: Firstly Create web/css/source sub-directory in your theme directory. Now, create here a _theme.less file with reference to below path

<theme_dir>/web/css/source/_theme.less

Step 2: Make sure that your _theme.less overrides the parent _theme.less. You can now make a copy of all that variables that you require and also which are not going to change. 

The only disadvantages of this process are you will surely require for manually updating and tracking all your files every time the parent’s _theme.less is updated

Adding structured changes

Here the use of button component is applied in _button.less as an example. For changing structure you have to separately add an overriding or extending .less files for every Magento UI library component you change.

Extend the component’s styles

Step 1: Create eb/css/source sub-directory and add _buttons_extend.less and _extend.less here refer the below path for 

<theme_dir>web/css/source/├──_buttons_extend.less

│      │  │   │       ├──_extend.less

Step 2: Add your desired styles button component in _buttons_extend.less.

Step 3: In _extend.less register the _buttons_extend.less by adding the following code: @import ‘https://qt.flikover.com/api/report/get/_buttons_extend.less’;

Override component’s styles

Step 1: For the buttons of your theme you need to override the parent theme’s styles

Step 2: Create create a web/css/source sub-directory in your theme directory 

Step 3: Create a _buttons.less file here and the path to that is given below.

<theme_dir>/web/css/source/_buttons.less

Hence this file will override the parent theme file _buttons.less.

Extend module styles

For extending the modules styles in your theme.

Step 1: Create Module_Name/web/css/source directory and create an _extend.less file in the theme directory

<theme_dir>/<module_dir>/web/css/source/_extend.less

You can also add additional styles in _extend.less file.

Override module styles

For overriding module sṭyles in your theme:

Step 1: Create Module_Name/web/css/source directory and create a _module.less file. 

<theme_dir>/<module_dir>/web/css/source/_module.less

This file overrides the _module.less file and you can add your styles here.

Final Words:

Hopefully, with the help of the above solution, you will be able to customize your theme in Magento. In case any trouble does comment down in the comment section below. Do not forget to share with your Magento developer friends.

Happy Coding?