Skip to content

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.

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 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%;
}

Using a custom font

The Style page allows you to select a Google font which will be applied to the main webinar page as well as the registration page and other helper pages.

You can also upload your own custom font and use custom CSS to let Clevercast use it. You do this as follows:

  1. Go to the ‘Account’ -> ‘Include files’ menu and upload the .otf, .ttf, .woff or .woff2 file for your font.
  2. After upload is complete, copy the ‘Public URL’ (location of the uploaded font file on the Rambla CDN)
  3. Use the public URL in the custom CSS

This example assumes you have uploaded a custom font, which is available at https://my-account.cdn01.rambla.be/download/ZpJVtlhc.otf

/* Setting a custom font */
@font-face {
  font-family: MyFont;
  src: url('//my-account.cdn01.rambla.be/download/ZpJVtlhc.otf');
}
#webcast {
  font-family: MyFont;
}