Using Custom CSS

Clevercast Webinar lets you further customize the player and registration pages of a webinar by uploading a custom CSS file. You can do this by going to the Settings -> Webinar Layout menu of the webinar, go to the Images tab, and use the ‘Upload Custom CSS file’ button at the bottom of the page.

This document contains pieces of CSS that allow you to make a number of adjustments to the webinar pages. If you need a different adjustment, you can try looking at the source code or contact us at support@clevercast.com.

Note: this guide applies to the latest version of Clevercast Webinar, which is used by all accounts created after 21 September 2023. If you have an older account and don't want to upgrade to the latest version, please refer to our guide to Using Custom CSS for Webinar v1.

Aligning the title to the left

There is some left padding on the webinar/registration title. Use the css below to remove it.

/* This block aligns the title to the left. */
#webcast-title {
  padding-left: calc(var(--bs-gutter-x) * 1);
}

#webcast-title .container { width: 100%; max-width: 100%; };

Hiding the speaker image

By default, a speaker without an image will display a placeholder.

/* This block hides the speaker image. */
.speaker-img {
  display: none;
}

Changing the speaker image aspect ratio

By default, the speaker image has an aspect ratio of 1 : 1.

/* This block changes the aspect ratio to 16 : 9. */
.speaker-img {
  aspect-ratio: 16 / 9;
}

Moving the tabs to below the player

By default, the tabs are shown to the right of the player.

/* This block moves the tabs from the right-hand side to below the player */
.webcast-player-page {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.webcast-player-page .col-xl-8, .webcast-player-page .col-md-6, .webcast-player-page .col-xl-4 {
    flex: initial;
    width: 100%;
}