Adding CSS to Lightboxes and Widgets

  • Created:
  • / Author: Jace Farran

We designed the Digioh form editor to give you a ton of control, but with a little CSS, you can unlock even more potential in your lightboxes, pop-up forms, and other onsite widgets. 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 Lightbox Elements in the Editor

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

adding extra css styles to lightboxes and pop-up forms

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.

adding CSS at the widget level

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.

css styles
In this pop-up form 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);

pop-up form example with shadow CSS styles added
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:

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

 

 

custom CSS with bottom border

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:

using CSS to remove outline

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

 

 

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.

upload external style sheet to Digioh

adding external stylesheet to pop-up form

Then, link to your stylesheet in an HTML block.

<link rel="stylesheet" href="styles.css">

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: