VIDIZMO is a white label solution that enables enterprises to create a custom made platform for storing, managing, organizing videos and other media content. The platform has several branding options seamlessly integrated for a clutter and distraction free video streaming experience. Users can apply their corporate themes to their Channel/Account. With the help of CSS based styling, VIDIZMO users can modify their Channel branding and header.


Closure Style Sheets


VIDIZMO makes use of CSS Extension Library known as Closure Stylesheets or Google Stylesheets to conveniently modify CSS and apply various themes to a channel.


Closure Stylesheets is an extension of CSS that adds variables, functions, conditionals, and mix-ins to standard CSS. The tool also supports minification, linting, RTL flipping, and CSS class renaming. Closure Stylesheets is available as a Java jar named closure-stylesheets.jar. Closure Stylesheets are also referred to as Google Stylesheets and have GSS extension. These GSS files have to be compiled by a Closure Stylesheet Compiler that converts GSS into CSS class file which can later be copied and pasted into ‘Customized Header’ section under the ‘Branding’ tab.


Using Closure Stylesheets requires Java. To make sure that Java is installed correctly, try running the following command to print the list of command-line options for Closure Stylesheets


DsJyvME-pac18U_oeMR2e6lywBLrdRRepA.png


Please refer to https//code.google.com/p/closure-stylesheets/ for further details about Closure Stylesheets.


VIDIZMO GSS Package


VIDIZMO provides complete GSS Package along with its compiler and a batch file that can be run to produce CSS. Here are the components of package along with the details.


File Name
Purpose
Channel_Branding.gss

VIDIZMO GSS contains all the attributes that can be overridden to create new styles. GSS syntax and structure is very much like CSS,       however, it provides options to use Variables, Conditional statements and Functions that are interpreted by compiler and converted into pure CSS styles

branding-compiler.bat 
A batch file to run compiler, passes ‘Channel_Branding.gss’ as input parameter and ‘Channel_Branding.css’ an out parameter. This basically    
tells  the compiler to compile the GSS file into a CSS file by the output name provided

css-compiler.jar
Closure Stylesheet compiler that actually does the job of compiling GSS, replacing all variables with their actual values and interpreting conditional statements to produce a clean CSS file with styles in it



1. Create Custom Style Sheet Branding.gss. From the right panel;


i. Right click on "Compilers." 


ii. Click on "Open Folder in File Explorer."



Adyuqtqzk9zimpR5rSrsiDCuJulyJEZbUw.png


2. Click on "branded-v4-compiler" batch file to run the compiler as shown below.


NSzR51WZzOATgfQrp8DeDL1wUX60cLVi6A.png


3. Compiler running successfully.


TLB-YhXp5ykElJxX9MPg2ja5Icb755VHuQ.png


CSS Override-able Attributes


GSS contains list of following variables that can be modified and compiled into CSS. This table provides names of the variables in GSS with their description and the default value of each used by VIDIZMO when no branding is applied. 


 CSS Variables
 Default Value
 Comments
BODY_FONT_SIZE

15pt;

Font size of text appearing in HTML body section. The entire body text excluding headings use this property. 

 BODY_FONT_COLOR 
#616161; 
Font color of text appearing in HTML body section. The entire body text excluding headings use this property. 
 BODY_FONT_FAMILY
Cambria,Georgia,serif;
Font Family of text appearing in HTML body section. The entire body text excluding headings use this property. Font Family use depends on fonts available in the browser. If one font is not installed, it will automatically switch to the next  available font. The fonts used (in same order) are Cambria, Georgia, serif.
 BODY_BG_COLOR
#ffffff;
Background Channel Color. This can be set from Settings > Branding tab as well. It is the same area where background picture is displayed. In the absence of background picture or if background picture is smaller than the actual page size, then the rest of the page is filled by the color provided. 
 PAGE_BODY_COLOR

#ffffff;
Background color of channel page. This can be set from Settings > Branding tab as well. It is the same area where background picture is displayed. In the  absence of background picture or if background picture is smaller than page size, then the rest of the page is filled by the color provided. 
 HYPERLINK_COLOR
#616161;
Color of hyperlinks appearing on a text in the channel. For example user profile link  or various links that appear on Settings page 
 HYPERLINK_HOVER_COLOR
#177c7d;
Hover Color of hyperlinks text appearing in channel. For example user profile link or various links that appear on Settings page. 
 CHANNEL_FOOTER_HYPERLINK_COLOR
#ffffff;
Color of hyperlinks appearing on the channel footer just above VIDIZMO Copyright message. 

 CHANNEL_FOOTER_HYPERLINK_COLOR_HOVER
#ffffff;
Hover color of hyperlinks appearing on the channel footer just above VIDIZMO Copyright message. 
 VIDIZMO_FOOTER_TEXT_COLOR
#bcbcbc;
Color of text appearing in VIDIZMO footer.
 VIDIZMO_FOOTER_BG_COLOR
 #333333;
Background color of VIDIZMO footer. 
 H1_FONT_FAMILY
 Cambria,Georgia,serif;
Font Family of Heading 1. This appears on various places as page title, showing Channel Name etc. One of the places where it appears is Channel Name on Header. Others include Channel Library page, Settings, My Media etc. where H1 is used to display page title. As in Page Body text, there are multiple Font Family used including (in same order) Cambria,Georgia,serif. 
 H2_FONT_FAMILY
 Cambria,Georgia,serif;
Font Family of Heading 2. This appears on various places as 2nd level sub-heading. One of the places where it appears is shown on right side. As in Page Body text, there are multiple Font Family used including (in same order) Cambria,Georgia,serif;
 H3_FONT_FAMILY
 Cambria,Georgia,serif;
Font Family of Heading 3. This appears on various places as 3rd level sub-heading. One of the places where it appears is shown on right side. As in Page Body text, there are multiple Font Family used including (in same order) Cambria,Georgia,serif; 
 H1_FONT_COLOR
 #616161;
Font color for Heading 1.
 H2_FONT_COLOR
 #177c7d
Font color for Heading 2. 
 H3_FONT_COLOR
 #616161;
Font color for Heading 3. 
 BUTTON_1_FONT_COLOR
 #ffffff;
Font color for primary button that appears on various pages. This is one of the 3 buttons that appear on various pages. Some examples include Update, Edit, SignIn etc. 
 BUTTON_2_FONT_COLOR
 #ffffff;
Font color for 2nd button that appears on various pages. This is second one of the 3 buttons that appear on various pages. Some examples include Back, Save as Draft etc. 
 BUTTON_3_FONT_COLOR
 #ffffff;
Font color for 3rd button that appears on various pages. This is last one of the 3 buttons that appear on various pages. Used in Settings > Branding page to Check Availability of domain 
 BUTTON_1_FONT_COLOR_HOVER
 #f8f8f8;
Font Hover Color for primary button that appears on various pages. This is one of the 3 buttons that appear on various pages. Some examples include Update, Edit, SignIn etc. 
 BUTTON_2_FONT_COLOR_HOVER
 #f8f8f8;
Font Hover Color for 2nd button that appears on various pages. This is second one of the 3 buttons that appear on various pages. Some examples include Back, Save as Draft etc. 
 BUTTON_3_FONT_COLOR_HOVER
 #f8f8f8;

Font Hover Color for 3rd button that appears on various pages. This is last one of the 3 buttons that appear on various pages. Used in Settings > Branding page to Check Availability of domain 
 BUTTON_1_BG_COLOR
 #177c7d;
Button Background Gradient Start Color for Button 1. All the buttons can have Gradient colors therefore allow defining Start and End Colors. Gradient applied on buttons is top to bottom. 
 BUTTON_1_BG_COLOR2
 #177c7d;
Button Background Gradient End Color for Button 1. 
 BUTTON_2_BG_COLOR
 #616161;
Button Background Gradient Start Color for Button 2. All the buttons can have gradient colors therefore allow defining Start and End Colors. Gradient applied on buttons is top to bottom. 
 BUTTON_2_BG_COLOR2
 #616161;
Button Background Gradient End Color for Button 1. 
 BUTTON_3_BG_COLOR
 #616161;
Button Background Gradient Start Color for Button 2. All the buttons can have gradient colors therefore allow defining Start and End Colors. Gradient applied on buttons is top to bottom. 
 BUTTON_3_BG_COLOR2
 #616161;
Button Background Gradient End Color for Button 1. 
 BUTTON_1_BG_COLOR_HOVER
 #177c7d;
Button 1 Hover Background Color. 
 BUTTON_2_BG_COLOR_HOVER
 #616161;
Button 2 Hover Background Color. 
 BUTTON_3_BG_COLOR_HOVER
 #616161;
Button 3 Hover Background Color. 
 TABS_SELECT_COLOR
 #177c7d;
Color of Selected Tab. Tabs are used at various places in VIDIZMO including Media Manager, My Media and Settings pages. 
 TABS_UNSELECT_COLOR
 #616161;
Color of Un-Selected Tab. Tabs are used at various places in VIDIZMO including Media Manager, My Media and Settings pages.  
 STEP_SELECT_COLOR
 #177c7d;
Background Color of Selected Step. Steps are used at two places, in the launch of Campaign and during Presentation purchase process (only applicable on channels with seller subscription). 
 STEP_UNSELECT_COLOR
 #f8f8f8;
Background Color of Un-Selected Step.
 TOP_MENU_BG_COLOR
 #177c7d;
Background Color for Menu. This menu is displayed throughout the channel. On Hover, the same color is used however, black color with 0.2 opacity is overlayed to give Hover effect. 
 TOP_STRIP_BG_COLOR
 #333333
Background Color for Top Action Bar. This is a top level action menu which is displayed throughout the channel. 
 TOP_STRIP_HYPERLINK_COLOR
 #f5f5f5;
Hover Color of Hyperlink on Top Action Bar.
 PAGING_ARROW_COLOR
 #616161;
Color of Arrow inside paging buttons. These buttons appear at various places including Library, Media Manager, My Media etc.

 PAGING_ARROW_COLOR_HOVER
 #616161;
Hover Color of Arrow inside paging buttons. 
 PAGING_ARROW_BG_COLOR
 #ffffff;
Background Hover Color of paging Button. 

 PAGING_ARROW_BG_COLOR_HOVER
 #d8d8d8;
Background Hover Color of paging Button. 
 PAGING_HYPERLINK_COLOR_SELECTED
 #d8d8d8;
Color of Selected Page Number in Paging Control. This control is integral part and appears along with Paging button. 
 PAGING_HYPERLINK_COLOR_UNSELECTED
 #ffffff;
Color of Un-Selected Page Number in Paging Control.
 VIDEO_THUMBNAIL_BG_COLOR 
 #ffffff;
Background Color for Video Thumbnail. This is used at several pages where video list view is used. This includes Homepage, Channel Library etc.
 VIDEO_THUMBNAIL_BG_COLOR_HOVER
 #f5f5f5;
Highlight the background of the video thumbnail when the pointer moves over it
 BACKGROUND_COLOR, BG_COLOR
 #ffffff;
Background Color defines a specific background color of your channel. However, you can also set a picture as your background. Recommended dimension 1920 x 1080 pixels. Only .jpg, .jpeg, .png and .gif files are supported. 
 BRANDING_COLOR
 #177c7d;
Branding Color is a specific color options selected for the branding of the entire channel. The color options could be chosen from the logo as well to make the layout of the channel synchronized.
 CHANNEL_OPTIONS, CHANNEL_ICONS
 #177c7d;
This property selects the background color of a channel icon
 A_LINK, SPAN_LINK, DIV_LINK
 #616161;
Color of hyperlinks appearing on a text in the channel. For example user profile link  or various links that appear on Settings page 
 A_LINK, SPAN_LINK, DIV_LINK: HOVER
 #177c7d;
Hover Color of hyperlinks text appearing in channel. For example user profile link or various links that appear on Settings page. 


CSS Applied On HTML Attributes


yf7o3IDwwqhu2y10RsSrHd2uM2HZPP7oPg.png


wQQmG10tke19qZpa4-UjwRquWsbsxU4ORw.png

mxTTY5vDg_prL2MR69oGqzZnsV6szbh7xg.png


MGUudtvcKQmF0xq5OXnOhUTiXH2wQPwmFA.png

YPdpzzS_JD17DTKi7ztjzXM2kF9un7RH7g.png