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:

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

Left/Right Banner Messages:

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

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.

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

Related Articles