Adding CSS to Lightboxes and Widgets

We designed the editor to give you a ton of control, but with a little CSS, you can unlock 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, where you can add CSS information to them.

For advanced styling, you can add styles into an HTML block that 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, enter the key and value under Extra CSS Styles.

For example, to add “text-transform: uppercase;” enter “text-transform” in the Key field, and “uppercase” in the Value field.

Add CSS to the outer box

To add CSS that applies to the box itself, add it under the Widget blade.

At the bottom is an Extra CSS Styles field. Here, you can add extra details like a shadow or margins. Save and preview your box for changes to take place.

Enter the information as you would normally in a stylesheet, separated by semicolons.


In this example, we added a box shadow with 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 options like like height and border color are available in the editor, sometimes you may need something more specific.

To add CSS to a specific ID or class, preview the widget and inspect the element with your browser’s Dev Tools to get the ID or class of that particular element. Then, 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.

For example, to add a 2px bottom border to a specific field, insert the following code in an HTML block:

 

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

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

For example, to remove the outline of all text fields when selected, add this code:


 

Note: If you don’t see changes, 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.

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: