Skip to main content
All CollectionsGeneral
How do I modify the layout of the embed widgets?
How do I modify the layout of the embed widgets?
Corey avatar
Written by Corey
Updated over 11 months ago

Get a free 30-day trial of StealthSeminar here.

You will have to use CSS in order to customize the layout/look of the embed widgets.

You can download a sample CSS file from here

In this file, you can customize how the embed widgets look, the colors, etc.

The root classes of all embedded widgets have been provided, as well as classes to be able to customize the Countdown, and Date & Time widgets

For example, if you want to change the background color of the Countdown section
of a certain embed form, (in this case, Registration Styled Layout 1) you can target it by doing:

.registration-embed-styled-0 .countdown {
    background-color: #0feb9e;
}

Or, if you want to change the font color, size, etc. of the counter label for the days, hours, minutes, or seconds, in the Countdown section of the Countdown + Date & Time Styled Layout 2, you can target it like so:

.countdown-and-datetime-embed-styled-1 .countdown .countdown__days .countdown__label {
    font-size: 16px;
    color: #333333;
}

Once you have your CSS file ready, you can upload it here

Did this answer your question?