Skip to content
  • There are no suggestions because the search field is empty.

Custom CSS Tips & Guidelines 🎨

While the Odicci Studio offers deep customization, there are times you might want a specific "pixel-perfect" effect that requires a little extra code. For those times, this guide covers best practices for adding custom styles to your experiences.

Note: Adding any custom CSS may cause unexpected design issues on different screen sizes. We recommend using this function with caution, as out support team is limited in how they can troubleshoot custom code.

 

Journey Overview

  • The Basics: Where to find the CSS editor

  • Method 1: Styling your own HTML elements

  • Method 2: Styling native Odicci elements (like buttons)

 

Where is the CSS Editor?

Find the CSS editor through the instructions below:

  1. Open your experience in the Studio.
  2. Navigate to the Cog icon (located in the top right, between the 'Preview' and 'Publish' buttons).
  3. Select the CSS tab. This is your canvas for all custom styling.

 

 

Method 1: Applying CSS styles to injected HTML

Use this method if you want to add a unique text style or element using HTML:

  1. Add a Text Block: Place a paragraph or any rich text element into your frame.

  2. Add Your HTML: Enter 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”

    Example: <h2 class="fancylink"> My Special Header </h2>.

  3. Apply the Style: Go to the CSS tab and begin to enter CSS to affect the class for the HTML you have added. Example: .fancylink { color: orange; }.

 

You can see we have successfully added the hover state CSS to an injected HTML element.

 

Method 2: Styling Built-In Elements

Use this method if you want to change the look of standard Odicci components, such as making a button change color when a user hovers over it.

  1. 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".
  2. Now navigate to the CSS tab and enter the CSS to affect the class (".btn" in this example).

 

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