Getting Started with Custom CSS

In some special cases, you may find yourself needing to edit or add to your Odicci experiences for any number of reasons. This doc outlines best practices when getting started.

Warning: Adding any custom CSS may cause issues with your design. Please use this function with caution, our support team will be limited in how they can help your design related issues

How Do I Add My CSS?

Method #1: Applying CSS styles to injected HTML

You can add any additional styles to your microsite in the studio by first adding a paragraph or any element that supports rich text. Then adding any HTML tag that can be affected by a class or ID. In the example below, we have added a H2 tag and applied the class: "fancylink"

Once you have added the HTML tag and a class or ID, navigate to the cog (top right of the studio, in between the "help" button and the "test" button) > Press the "CSS" tab > You can begin to enter CSS to affect the class for the HTML you have added. Please see the ".fancylink" class with the CSS added below.

Expected result:

You can see we have successfully added the hover state CSS to an injected HTML element and is applied on the microsite.

Method #2: Applying CSS styles directly to Odicci elements

You can add any additional styles to your microsite in the studio by affecting meta Odicci elements such as: buttons etc. 

Any element on the microsite that has a class or ID selector can be affected by the CSS. In the example below we are going to change the button element which has a class selector "btn".

Now we know the selector, navigate to the cog (top right of the studio, in between the "help" button and the "test" button) > Press the "CSS" tab > You can begin to enter CSS to affect the class (".btn" in this example). Please see the ".btn" class we have edited with the CSS added below.

Expected result:

You can see we have successfully added the hover state CSS to Odicci buttons and is applied on the microsite.