Where do I add the CSS on my site

When you wish to customize your site’s layout, this could be done with the help of CSS. Sometimes, you might wonder where to add the CSS code that we suggest.

There are three places where it could be added:

  • Template.css file or theme.css or Custom.css file

  • Custom css code section of your template style

  • Occasionally on the scss or less files(if your template loads css through SCSS or LESS)

To add the CSS to the template.css or custom.css file:

Navigate to Extensions->Templates->Your template-> CSS->Template.css or Theme.css file or custom.css file The CSS that we suggest can be entered at the end of the above file.

To add the CSS in the custom code section of your template:

Sometimes, when the CSS doesn’t take effect on the frontend while inserted on the files mentioned on the first step, you could check if your template has a custom code section and input the CSS there, if it has one.

To do this, navigate to Extensions->Templates->Styles->Your template’s style(the one next to which the star is filled).

To choose the default style

Input the CSS in the Custom CSS part of the Custom code section of your template’s style.

To add the CSS on the SCSS or LESS folder:

Sometimes, the CSS has to be inserted in the SCSS or LESS files of the template.

If you have tried the above methods and if the styles entered don’t take effect on the frontend, even after clearing the site and browser cache, please reach us through the support form or ticket system available for PRO users.

Let us help you with the CSS.

Last updated