Using Custom CSS for Webinar v1 (deprecated)

Deprecation Notice

Please note that version 1 of Clevercast Webinar is OUTDATED as of 21 September 2023! The current version of Clevercast Webinar has many new options for customisation via the backend, but still allows you to use custom CSS.

This guide only applies to accounts created before 21 September 2023 which haven't been upgraded. If you would like to upgrade, please contact us.

Introduction

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 -> Style menu of the webinar 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.

Adjusting the logo image

By default, the logo image is aligned with the left of the player. Custom CSS allows you to center the logo or stretch it across the entire page. Keep in mind that the image must be suitable for the way of displaying it (e.g. a square image should not be stretched over the page width).

Clevercast displays no additional whitespace above and below the logo image. If you want whitespace, it is best to add it to your image.

This custom CSS will be applied to the main webinar page as well as the registration page and other helper pages.

Center the logo image horizontally

/* This block centers the logo horizontally. */
#logo img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Stretch the logo image across the entire page width

/* This block stretches the logo horizontally. */
#logo img {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  max-width: initial !important;
  max-height: initial !important;
}

Adjusting the webinar title

By default, the webinar title is aligned with the left of the player. Custom CSS allows you to center the title. You can also use custom CSS to hide the title on the webinar page (on the registration page, you can choose not to display it via the registration page settings)

This custom CSS will be applied to the main webinar page as well as the registration page and other helper pages.

/* This block centers the name of the webinar. */
#webcast-title h4 {
 text-align: center;
}
/* This block  reserves the full width when social media links are not desired. */
#webcast-title .row .col-8 {
  flex: 0 0 100%;
  max-width: 100%;
}
#webcast-title .row .col-4 {
  display: none;
}

/* This block centers the name of the webinar. */
#webcast-title h4 {
 text-align: center;
}
/* To accommodate for social links on the right. */
#webcast-title .row h4 {
 margin-left: calc(33.4% + 15px); /* 33.4% * 75% = 25% of 100%, + 15px margin-left */
 text-align: center;
}

Hide the webinar title

/* Hide the title */
#webcast-title h4 {
  display: none;
}

Only hide the title on the webinar page

/* Hide the title */
.webcast-player-page #webcast-title {
  display: none;
}

Only hide the title on the registration and helper pages

/* Hide the title */
.webcast-registration-page #webcast-title {
  display: none;
}

Adjusting logo image and webinar title

Usually, you will combine adjustment of the logo image and webinar title. The CSS below will center both the logo image and webinar title.

/* This block centers the logo horizontally. */
#logo img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* This block centers the name of the webinar. */
#webcast-title h4 {
 text-align: center;
}
/* To accommodate for social links on the right. */
#webcast-title .row h4 {
 margin-left: calc(33.4% + 15px); /* 33.4% * 75% = 25% of 100%, + 15px margin-left */
 text-align: center;
}

Changing the background color of the tabs/panels section

The tabs/panels section has a white background color by default. You can change this using the following CSS:

/* Make the background color of the tabs and panels red */
body, #webcast, .card {
 background-color: red;
}

Replace ‘Question’ by a custom label

#questions-form-msg-label {
 visibility: hidden;
}
#questions-form-msg-label::before {
 content: "Your custom message.";
 visibility: initial;
}

By default, a footer is shown on the webinar page, registration page and all helper pages. This is also the case in the email. Using the style settings, you can determine the background and text color.

To remove the footer on all pages, you can use following CSS:

/* Don’t show the footer. */
footer {
 display: none;
}

You can’t remove the footer from the email, but the effect will be the same if you give it a white background color and no text.

Registration page adjustments

Adjusting the warning alert colors (webinar start time)

When you choose to display the start time of the webinar on the registration page, this will be done using an alert. By default the alert is displayed using a yellow background and brown text color. You can change both the text, background and border colors with custom CSS. To choose your colors, you can use an online color picker.

/* This block allows you to customize the colors of any warnings. */
.alert-warning {
 color: # 000; /* text color */
 background-color: red;
 border-color: cyan;
}

Hide the ‘Register here’ title

#register_here {
 display: none;
}

Replace ‘Register here’ by a custom title

#register_here {
  visibility: hidden;
  position: relative;
}
#register_here:after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: "My custom title";
}

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:

Go to the ‘Account’ -> ‘Include files’ menu and upload the .otf file for your font.
After upload is complete, copy the ‘Public URL’ (location of the uploaded font file on the Rambla CDN)
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');
}
 {
  font-family: MyFont;
}