1. Home
  2. General Information
  3. Tips & Tricks
  4. Custom CSS for Private Label Themes

Custom CSS for Private Label Themes

Sometimes you just need a little customizing to fit your brand’s need. By utilizing the Custom CSS option found in the Private Label Management Appearance tab, you have a lot of flexibility to push the boundaries and create a really unique experience for your end-users.

Below is a growing collection of CSS tricks (or snippets) to help you achieve some common overrides. Simply copy and paste these in to your Theme’s Custom CSS and select save!

Remove Darkened Overlays
If the design requires, you can easily remove the darkened overlay for the following areas:

Carousel Panels:

.video-bg__overlay:after { display: none; }
.darker:after { display: none; }

Left/Right Banner Messages:

.banner-wrapper:after { display: none; }

Drop Shadows
Some designs require a little pop or lift to help separate the Call-to-Action content from the background design. You can add a drop-shadow by using the below snippets – be sure to update the depth and color to suite your needs:

Carousel Panels:

/* Slide Content (Text & Buttons) */
.slide__content_left { filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.3)); }

/* Slide Content (Headline & Tagline Only) */
.slide__content_left .text-wrap h2,
.slide__content_left .text-wrap tagline {
    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.3));

Left/Right Banner Messages:

/* Banner Messages (Text & Buttons) */
mm-feat-banner .content {
    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.3));

/* Banner Messages (Headline & Tagline Only) */
mm-feat-banner > div > h4,
mm-feat-banner > div > p {
    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.3));

Hero Content (Welcome/What’s New Widget)
This changes the opacity to reveal your background images/videos, while providing clear legibility of content when a user hovers over it.

.hero-content { opacity: 0.65 !important; transition: opacity 0.2s ease-in-out; }
.hero-content:hover { opacity: 1 !important; }

Training Center

Remove Dark Gradient from Root Categories
If your artwork requires, you can remove or lighten the darkened gradient that appears on Root Category tiles. Please note though, this can have an effect on legibility if the designs differ greatly across your Root Categories.

tc-primary-cat-card:after { background: none !important; }

Custom Fonts

Using Custom CSS, you can override most of your VT System Fonts with ones that match your brand.

1. First you will need to upload your font files to the Media Library. If you’re using Google Fonts, you can easily select the fonts you’d like and choose download them to your computer. We recommend uploading only the font weights you need.

2. Next, we’ll need to include these in your Custom CSS using the @font-face for each custom font-family and their respective font-weight. You can copy the snippet below and fill in the placeholders with your details.

@font-face {
    font-family: 'Enter Name';
    src: url('Enter URL');
    font-style: normal;
    font-weight: /*Enter Weight*/;
    font-display: swap;
    text-rendering: optimizeLegibility;

3. Finally, after your fonts have been included, you can target the various uses throughout your VT System. Copy the snippets below and replace the font name, type and weight, as needed.

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.slides-head, .panel-heading, .slide, lbl-leaderboard-item .name, lbl-leaderboard-item .user-stats {
    font-family: 'Enter Name', fonttype !important;
    font-weight: /*Enter Weight*/ !important;

body, p, .text-default, .loc-name, .slides-txt, .system-modules {
    font-family: 'Enter Name', fonttype !important;
    font-weight: /*Enter Weight*/ !important;

.slides-lg-btn, .btn {
    font-family: 'Enter Name', fonttype !important;
    font-weight: /*Enter Weight*/ !important;
Updated on June 9, 2022

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support