Skip to main content

How can I add Custom CSS to change the look of my Widget, Triggers or Reminders?

Updated

Good news! This is totally possible.

In this example, we'll show you how to use Custom CSS to make the Clickable Trigger smaller. Your developers will be able, using the same process, to write CSS that targets our other elements and that changes the look of all Tada elements. Tada offers you a handy field for you to enter your custom CSS right within our app.

 

Example: How to make the Clickable Trigger smaller using Custom CSS?

 

You'll want to edit your Widget, and add this code in the 3rd section called "3. Widget", scroll all the way down, and click on "Edit" in the Custom CSS section.

 

mceclip0.png

Here's a custom CSS code that targets the trigger and that changes its style to make it smaller:

@media only screen and (max-width: 600px) {
    #tadaWidget .style_square {
        width: 61px !important;
        height: 61px !important;
        font-size: 15px !important;
        top: calc(45%) !important;
    }
}

After adding your custom code, you'll want to save your changes and publish them to your store.

 

Keywords:

 

What is a Custom CSS?

What are Tada's Advanced Options?

 

 

 

Powered by Zendesk