How to Add External CSS to a Webinar

External CSS lets you customize the appearance of hosted webinar pages by uploading a CSS file.

Non-public webinars provide separate uploads for the built-in Registration Page and the viewer-facing webinar experience. Public Webinars skip the registration flow, so the Registration Page CSS upload is not shown.

The current editor accepts CSS files up to 1,048,576 bytes, or 1 MiB. A file is accepted when it has a text/css  MIME type or a .css  filename.

Step-by-Step Configuration Instructions

Step 1: Open External CSS

1. Navigate to My Webinars > Select the webinar > Edit.
2. Navigate to Advanced Setup > External CSS.
3. Expand External CSS.

Step 2: Choose the Correct Upload Field

Use Registration Page Custom CSS File Upload to style the built-in StealthSeminar Registration Page for a non-public webinar.

Use Viewer Application Custom CSS File Upload to style viewer-facing StealthSeminar pages, including:

• Thank You pages, where available.
• Countdown pages.
• Watch pages.
• Webinar Complete pages.

Step 3: Upload the CSS File

1. Click the appropriate upload field.
2. Select the CSS file from your computer.
3. Confirm that the filename appears in the upload control.
4. If the file is rejected, confirm that it has a .css  extension and is no larger than 1,048,576 bytes.

The selected file remains in the form until you save the Advanced Setup tab. The file is uploaded and associated with the webinar during the save operation.

Step 4: Save the Configuration

1. Navigate to Advanced Setup > External CSS.
2. Select Save to draft to save the tab and return to My Webinars.
3. Alternatively, select Save & Continue to save the changes and move to the next setup tab.
4. Wait for the success confirmation.
5. Reopen the webinar editor and navigate to Advanced Setup > External CSS.
6. Confirm that the stored filename is still displayed.

The CSS file is not uploaded until the Advanced Setup save operation is completed.

Step 5: Replace or Remove a CSS File

1. Navigate to Advanced Setup > External CSS.
2. Select the replace control to choose a new CSS file, or select the remove control to clear the existing file.
3. Confirm that the form shows the replacement or removal.
4. Select Save to draft or Save & Continue.
5. Reopen External CSS.
6. Confirm that the replacement filename is displayed or that the field is empty.

A replacement remains local until the tab is saved. Removing an existing file is persisted during the save operation.

Step 6: Configure CSS for an Embedded Widget

Use this workflow when your registration form, countdown, or date/time widget appears on ClickFunnels, Leadpages, WordPress, or another third-party page.

1. Navigate to Advanced Setup > Embedded Widgets.
2. Select the Widget type.
3. Select the Widget layout style.
4. Use Preview and Copy Embed Code to identify the layout you plan to use.
5. Navigate to CSS File Upload.
6. Upload the CSS file.
7. Write selectors that target the classes used by the selected embed layout.
8. Save the Advanced Setup tab.

Embedded-widget CSS styles the widget content, not the surrounding third-party page. For example, a widget selector may look like this:

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

The selector must match the widget layout used in the copied embed code.

Step 7: Test the Published Pages

1. Open the published Registration Page URL in a private browser window if you uploaded Registration Page CSS.
2. Open the published viewer page that corresponds to the webinar flow if you uploaded Viewer Application CSS:
   • Thank You page.
   • Countdown page.
   • Watch page.
   • Webinar Complete page.
3. If you configured Embedded Widgets CSS, open the actual third-party page containing the widget.
4. Test the page at desktop and mobile widths.
5. Use the browser inspector to confirm that the selector matches the intended element.
6. Open the browser Network panel and confirm that the stylesheet request succeeds.
7. If necessary, add a temporary, low-risk test rule such as a border or background color before finalizing the design.

Use the published or live page as the primary acceptance test. Historical editor versions have displayed custom CSS on live pages but not in administrative previews.

Additional Help Topics

The configuration passes when all of the following conditions are met:

1. The correct upload field is visible for the webinar type.
2. The CSS file is accepted without a file-type or size error.
3. The filename remains present after saving and reopening the editor.
4. The target published page loads without a failed stylesheet request.
5. A distinctive test rule is visible on the intended page.
6. The test rule is absent from pages that should not use that CSS upload.
7. Embedded-widget CSS is tested inside the actual widget on the third-party page, not only on the surrounding host page.
8. Desktop and mobile layouts remain usable after the stylesheet is applied.

Common Issues & Solutions

CSS Selector Guidance

Use selectors that target the intended page element rather than broad global rules whenever possible.

For hosted webinar pages, use the frontend IDs provided by the page structure. For embedded widgets, use the layout-specific root classes shown in the embed code or widget documentation.

Avoid broad rules such as:

* {
  font-family: Arial, sans-serif;
}

Prefer page-specific selectors and test every affected page at desktop and mobile widths.