Adding CSS to Lightboxes and Widgets

We designed the editor to give you a ton of control, but with a little CSS you can get even more. There are several ways to add CSS to elements in the editor. Certain elements like Text, Buttons, Images and HTML blocks have an Extra CSS Styles section that lets you add extra CSS information to them.

However if you want to get more advanced, you can also add styles into an HTML block reference the class or ID of any element in your widget.

Add CSS to elements in the editor

To add CSS styles to Text, Buttons, Images or HTML blocks, you can enter in the key and value under Extra CSS Styles.

To add “text-transform: uppercase;” you would enter “text-transform” in the Key field, and “uppercase” in the Value field.

Add CSS to the outer box

If you want to add CSS information that applies to the box itself, you can add it under the Widget blade.

At the very bottom there’s a field called Extra CSS Styles. This is where you can add extra details like a shadow or margins. You have to save and preview to see any changes take place.

You can enter the information as you would normally in a stylesheet, separated by semicolons.


In this example, we added a box shadow by adding this code:
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);


Save & Preview to see the styles applied to the entire widget.

Add CSS to specific fields with an HTML block

While we provide a lot of options like controlling fields, like height, and border color, right in the editor, sometimes you might want to do something a little more specific with CSS.

To do that, preview the widget and inspect the element with your browser’s Dev Tools to get the ID or class of that particular element. Once you have that you can add an HTML block with style information related to that element.

Note: Make sure you get the class or IDs from the preview, rather than the editor. You may have to Save and Preview to see the changes.

So for example if you want to add a 2px bottom border to a specific field, you can add the following code to an HTML block:

<style>
#[FIELD_ID_HERE] {
border-bottom: 2px solid black;
}
</style>

That will add a 2px black border to the bottom to that field.

You can also add styles to all of the same type of element, like all text fields or all buttons.

For example if you wanted to remove the outline of all text fields when they are selected, you could add this code:

<style>
input[type=text] {
outline: none;
}
</style>

Note: If you’re not seeing changes, make sure to mark your new styles as !important.

Linking to an external stylesheet

To link to a CSS file for your box to reference, upload the CSS file to your files section.

Then link to your stylesheet in an HTML block.
<link rel="stylesheet" href="[STYLESHEET URL]">

Note: Make sure your stylesheet references the relevant IDs and classes from the widget. (See above “Add CSS to specific fields with an HTML block” section for details.)

Depending on your CSS skills and knowledge you can really push the envelope on your box designs!

Tagged: