Articles on: Custom CSS & code changes

How to add custom CSS?

This doc is a guide on how to add the custom CSS to a Monk widget on your store. Please refer to the below mentioned steps-

Step 1: Go to Online Store --> Themes --> Click on Customize next to the theme that you want to make the changes to



Step 2: Click on Theme Settings that's on the Left hand side of your screen



Step 3: Scroll down to find 'Custom CSS' and then copy paste the code in the box provided



Ideally all latest themes should have this option. If not, you will have to make the change by editing the theme code.

Conventions:


All the monk CSS classes will have a prefix of mr

<!-- sample monk element -->
<div class="mr-button"></button>


Always use class or id selector to apply custom CSS. Don’t use :first-child, :last-child, element selectors (span div) or any other selectors.

Each offer layout is made up of well defined class names for each element (with mr- prefix) and also some auto generated names. Please use the class names with mr prfix for applying CSS.

Every widget has a div with a unique id. If a style has to be applied only specific to a particular widget then this id can be used.

What happens if you don’t follow the correct convention to write CSS?
We keep improving monk by adding more features and fixing bugs. This means that the order of the elements might change, so it is possible that the first child is a different element from the one on which the style should be applied. However, the class names would never change. Thus to ensure that the correct CSS styles are applied even after structural changes please ensure that you use the correct convention and class names.

If you have any other questions or queries please reach out to us via chat support or write to us at support@monkcommerce.com

Updated on: 27/05/2024