Site Theme Builder

Who can use this feature

Site Admin, Channel Admin

Supported features: Branding, User Pages

Introduction

The Vidflex™ Theme Builder is used to help build your company’s brand on your platform and ensure transparency for your audience. The tool is fast, efficient and customizable with your theme and company in mind.

In this article we'll review the available options for branding, how to implement your theme and best practices.

The branding options available are displayed in two categories:

Gallery Themes Select one of the four predetermined themes 
Theme Builder The flexible front end theme tool (the focus of this article)

Video Walkthrough

Open And Activate Editor

  1. On the back end of the platform under Channel Settings, located on the left hand side menu, scroll down and select Branding
  2.  go to the Theme Builder section and click to open the dropdown list 
  3. Select Enabled, to begin
  4. Click the Open Editor button - The tool will open a new tab on the front end of the platform

Front End Shortcut: Once the theme builder is active on the backend you can also make changes using the shortcut icon on the header menu. 

Tip: Changes made on the theme builder are done in real time. Disabling the builder will revert your theme back to the original colors and fonts, previous changes made on the builder will no longer be visible on the front end of the platform.

Front End Use

The Theme Builder is located on the right hand side of the header menu, below is the descriptions of the sections within:

  1. Site Name
  2. Close - the theme tool 
  3. Content - the tool will take you to the back end when selected and opens in a new tab. This will allow you to continue working on the other tabs while making changes in the back end with the ‘content’ tab.
  4. Theme - Editable locations on the front end that you can change with the theme builder.

Once changes have been saved we suggest you review all platform pages to ensure consistency. 

Helpful Tips

  • Prepare beforehand with a branding guide to align with your updates (eg. hex codes, font and font family) 
  • Ensure text color is visible with changes made to the background color, for best results have the background and text as complementary colors (eg Black and white, blue and yellow or green and purple)  
  • Review changes prior to hitting save 
  • Once you’ve selected to save the changes, go through every page individually, try links and form boxes to see active and hover colors
  • Some locations on the page may require a color hue slightly darker or lighter than others to ensure visibility, alter as needed  
  • If you require a change not on the theme tool please reach out to your Account Manager. Our teams may be able to help with an advanced code or workaround. We’re here to help!

Customization

As mentioned earlier, not all system pages can be modified. Please refer to the following table to learn more

Location Description Customization
THIS PAGE Manage content on the page

General - Edit the name or enable/disable this page. It will open a new tab on the backend of the platform for editing

Social Sharing - Edit metadata used by social media platforms 

Access - Edit access rules for this page

LIBRARY Add or manage videos

Opens a new tab to the library on the backend

GLOBAL Manage site-wide content

Header & Footer
Manage the header and footer menus

Theme Builder Properties

The following table describes the customizing theme properties on the theme builder

Element Description
HEADER Background Color: hex code
Link Color: hex code
Link Hover Color: hex code
Background Hover Color: hex code
Hover Text Color: hex code
Font Family: font name
Font Size: numerical
Font Style: normal *pre-set preference 
Font Weight: light/normal/bold
Font Case: none/capitalize/uppercase/lower case
Border Color: hex code
Border Size: # of pixels
Menu Position: left/center/right
Logo Position: left/center/right
SUBMENU Background Color: hex code
Font Family: font name
Font Size: numerical
Font Style: normal/bold 
Font Weight: light/normal/bold
Link Color: hex code
Link Hover Color: hex code
Link Active Color: hex code
BODY Background Color: hex code
Font Color: hex code
Font Family: font name
Font Size: numerical
Font Style: normal/italic
Font Weight: light/normal/bold
Link Color: hex code
Link Hover Color: hex code
SLIDER Arrow Color: hex code
Arrow Hover Color: hex code
LIBRARY Filter Group Background: hex code
Filter Group Text: hex code
Font Family: font name
Font Style: normal/italic
FOOTER Background Color: hex code
Font Color: hex code
Font Family: font name
Font Size: numerical
Font Style: normal/italic
Font Weight: light/normal/bold
Logo: Powered by: Vidflex *refer to Account Manager for changes
Border Color: hex code
Border Size: # of pixels
Link Color: hex code
Link Hover Color: hex code
OTHER ELEMENTS Primary Accent Color: hex code
Primary Accent Text: hex code
TITLE Title Color: hex code
Font Family: font name
Font Style: normal/italic
Font Weight: light/normal/bold
Font Case: none/capitalize/uppercase/lower case
FORMS & BUTTONS FORM FIELDS
Field Text Color: hex code
Field Background Color: hex code
Field Border Color: hex code

PRIMARY BUTTONS
Primary Button Color: hex code
Primary Button Text Color: hex code
Primary Button Border Color: hex code
Primary Button Hover Color: hex code
Primary Button Hover Text Color: hex code
Primary Button Hover Border Color: hex code

SECONDARY BUTTONS
Secondary Button Color: hex code
Secondary Button Text Color: hex code
Secondary Button Border Color: hex code
Secondary Button Hover Color: hex code
Secondary Button Text Hover Color: hex code
Secondary Button Border Hover Color: hex code
PLAYER Fade: hex code
Font Color: hex code
Link Color: hex code
Link Hover Color: hex code
TROUBLESHOOTING Background Color: hex code
Font Color: hex code
Link Color: hex code
Link Hover: hex code
Link Size: numerical

Still need help? Contact Us Contact Us