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!

Main Menu 2021

Remove Darkened Overlays

If the design requires, you can easily remove the darkened overlay for the following areas:
Carousel Panels:

.carousel-video:after { display : none; }   

Left/Right Banner Messages:

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

Hero Content (Welcome/What’s New Widget)

Change Opacity:
To change the opacity and reveal more of your background images/videos, while providing clear legibility of content when a user hovers over it - add the following snippet. You can alter the first value to fine-tune the level of transparency.

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

Collapse & Expand:
For some designs the panel gets in the way, but knowing the content is valuable to your Users, you just want to "shrink" it. Add the following snippet to collapse the widget. When users move their cursor over the panel, it will expand open.

mm-feat-hero .hero-content {
  max-height: 140px;
  transition: all 500ms cubic-bezier( .42, 0, .58, 1);
}
mm-feat-hero .hero-content:hover {
  max-height: 406px;
}
.hero-content p.text-default {
    opacity: 0;
    margin-bottom: -0.75rem !important;
    transition: all 500ms cubic-bezier( .42, 0, .58, 1);
    transition-delay: 100ms;
}
.hero-content:hover p.text-default {
    opacity: 1;
    margin-bottom: 0.5rem !important;
}
mm-feat-whats-new {
  margin-top: -24px;
  transition: all 500ms cubic-bezier( .42, 0, .58, 1);
}
.hero-content:hover mm-feat-whats-new {
  margin-top: 0px;
}

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-facefor 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.

/* HEADLINE FONT */
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;
}

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

/* CALL-TO-ACTION BUTTONS */
.slides-lg-btn, .btn {
    font-family: 'Enter Name', fonttype !important;
    font-weight: /*Enter Weight*/ !important;
}