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
- On the back end of the platform under Channel Settings, located on the left hand side menu, scroll down and select Branding
- go to the Theme Builder section and click to open the dropdown list
- Select Enabled, to begin
- 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:
- Site Name
- Close - the theme tool
- 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.
- 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 |