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