Overview

For years, an organization strives to build its brand identity and maintaining it becomes a bigger challenge at hand. While doing so, it is also imperative to make sure the team identifies and connects with the brand and its organizational objectives as much as the stakeholders themselves. Branding does quite a lot more for a business than just making it look visually appealing to the eye. Branding helps in developing employee and customer coalescence and offers a distraction-free environment for its users.  


Concept

VIDIZMO allows users to brand their portals to establish a distinguishable identity. Through branding, you get the ability to upload portal's logo, set color of the header, set background color of your portal, upload background image of the portal that suits your organization's brand identity, so on and so forth. This helps familiarize users with the system and creates an environment they are accustomed to using. To learn more about VIDIZMO branding, see: Understanding Branding Settings.


However, VIDIZMO takes it one step further by allowing enterprises to add their own styling to various aspects of the application's design. This can be done by updating custom CSS (cascading style sheets) in your portal which overrides the default interface settings of the application.


VIDIZMO's user interface has been developed with Bootstrap version 3 framework and strictly conforms to the pre-defined guidelines set by the bootstrap community.  We recommend VIDIZMO users to use the same standard selectors for styling user interface elements for standardizing its use and significantly easing the maintenance cycle.


Some crucial information related to VIDIZMO Branding is as such:

  • As VIDIZMO is a multilingual platform, it automatically adjusts its user interface when portal is viewed in RTL or LTR direction. When portal is loaded in RTL direction, an additional CSS is loaded which changes direction of all bootstrap user interface elements. 
  • As a multi-tenant video platform providing branding flexibility, each organizational unit or department can follow its autonomous branding guidelines or they have the added option to inherit general branding theme from the main account.
  • Branding automatically applies on all devices and on all browsers.  


Before you start

  • Only technically advanced users, who are familiar with HTML and style sheets, will be able to style UI elements using custom CSS. 
  • Make sure to log in as an Administrator or Manager to custom-style your portal using CSS.
  • Below are some styling considerations you need to be mindful about:

    • Background color and background image do not apply on pages that can only be accessed by Manager/Administrator for managerial purposes e.g. Media Manager or Portal Settings. These two options only get applied on viewer-end pages. 

    • Avoid applying background color or image to page through custom CSS, as it can affect your portal's design. When these two options are applied through predefined controls, VIDIZMO adds a card to the background to avoid mixing content with background color or image. 

    • When background color and background image are applied together, background image takes priority and background color will not be shown until background image is removed. 

    • Custom CSS has top most priority. If you are targeting any element through custom CSS, it will override any option selected through controls. 

    • If your portal is multilingual, you need to make sure that your custom CSS is not breaking any element in LTR / RTL layout.


Branding using SASS Template

VIDIZMO has defined a basic template for branding CSS using SASS framework making it easier for users to modify values and play around the design of the application as they see fit. When the SASS code is processed, it takes the variables we define for the $font-stack and $primary-color etc and outputs normal CSS with our variable values placed in the CSS. After that we need to copy that output CSS and paste it in the custom CSS text box and press the ‘Update’ button, branding will apply in overall portal. 

Please refer to https://sass-lang.com/ for further detail about SASS. 


Click here to view the basic SASS template, against which you can see the CSS that you are required to paste under Custom CSS in Branding settings of your Portal.


Understanding SASS Variables

Following is a list of VIDIZMO-defined SASS variables used in the SASS template along with their scope in the application. You can use this information to style your portal as you wish:

  1. $font-family: This variable is defined for Font Family. The entire text in the body of the application's HTML uses the font properties defined here. The use of this variable, however, depends on fonts available in the browser. If any font is not installed, it will automatically switch to the default browser's font-family. The default fonts set in the application is "Roboto", sans-serif. 



 



  1. $font-size: This variable is defined to vary the size of the font throughout application. It determines the font size of the text appearing in the body section of HTML. The entire text of the entire HTML body excluding headings uses this property. The default font size is 14px. 

 


  1. $heading-font-weight: This variable is defined to set the value of font-weight for headings in the application. The default font-weight is set to be 500. It applies to all headings. 


 



  1. $primary-color: Primary color is the dominant color of the portal, it affects all UI components that we are using in VIDIZMO namely buttons, links, drop-down menus, date pickers, tags, progress bar, checkbox, radio button, badges, labels, wizards and icons. The default color has been set to a #1ab394.


 



  1. $primary-color-hover: This variable is defined to customize the color of the button and links when they have hovered over. The default color has been set to a #18a689.



 

  1. $navbar-color: This variable is defined for navigation bar color. The default color has been set to #1ab394.


 


  1. $navbar-search-color: This variable is defined for navigation search bar color.  The default color has been set to the combination of RGBA color rgba(90, 109, 106, 0.4) where you define the intensity of hues Red, Blue, Green and the opacity for the color, respectively.


 



  1. $footer-color: This variable is defined to customize the color of the footer of the application. The default color has been set to #ffffff.


 


  1. $background-color: This variable is for background color. Default value is #f3f3f4.




Understanding CSS Classes

Following is a detailed list of all aspects of the application that you can modify and brand as per your organizational standards along with the sample output of how each change would take effect in your portal. You can modify the aforementioned SASS template for the following styling aspects:

  1. Typography: All HTML headings, <h1> through <h6>, are available for use. The classes are: .h1 through .h6


 



  1. Buttons: These are the pre-defined classes to different kinds of button that you can use. The classes are: .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger 

 


 

  1. Contextual Color: These are available contextual classes that correspond to the output text shown below respectively: .text-muted, .text-primary, .text-success, .text-info, .text -warning, .text-danger 


 

 


 

  1. Contextual Background: Following is the list of classes that correspond to various contextual background colors as shown: .bg-muted, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger 


 



  1. Header: We can set header default background color by using the class .navbar-fixed-top


 



  1. Search Bar: We can set search bar color by using the following classes:  .custom-search .form-control, .custom-search button


 



  1. Footer: We can set footer default background & foreground color by using this class .footer 


 



  1. Progress bar: Define progress bar background color through this class.progress-bar


  



  1. Date picker: We can customize date picker theme by using the classes listed below:

  • Change header background and foreground color using  .bs-datepicker-head 
  • Change week font color using  .theme-green .bs-datepicker-body table td.week span  
  • Define selected date background and foreground color using .theme-green .bs-datepicker-body table td span.selected 

 

  1. Checkboxes & Radio Buttons: Set checkboxes and radio buttons background & foreground color by using the following classes:

  • .checkbox-success input[type="checkbox"]:checked + label::before 
  • .checkbox-success input[type="radio"]:checked + label::before 
  • .radio-success input[type="radio"]:checked + label::after 


 



  1. Tags: We can change tags input control background and border color by using the set of classes' hierarchy as following: .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value

 

  1. Switches: We can define background color of switches in ui-switch span.checked

 

  1. Dropdown: Set dropdown active, focus and hover state color by using these classes

  • Active state  .dropdown-menu > .active > a 
  •  Focus state   .dropdown-menu > .active > a:focus 
  • Hover sate .dropdown-menu > .active > a:hover 


 



Set default dropdown border color in the focused state by using the classes: .form-control:focus, .single-line:focus 


  



  1. Badges & Labels: To change the color of a badge & label you can modify classes: .badge-primary, .label-primary 


 



  1. Custom Icons : Selected media icon can be customized by using: .selected .multi-select & live icon by .live-icon

 

 



  1. Setup Wizard: Setup wizard UI customized by using form-wizard .nav > li.active     


  



  1. Mashup Upload Progress: Mashup upload progress bar color can be defined by using this element round-progress path. It will be shown after uploading media on the bottom right corner of screen. 

 

 



  1. Toast: Toast notification color can be modified using the class: toast-success. 




Convert SASS to CSS

Now, after making changes to the template here, copy the CSS code compiled against your changes, as shown below. You will also see a brief indication at the top-right of your CSS code reflecting the time it took to compile your changes.



How to Brand Portal using Custom CSS

1. From the Portal's Homepage:

i. Click on the menu icon on the top left-hand corner of the screen to bring up the left navigation pane.

ii. Then click on the down arrow to expand the Admin section.

iii Select Settings to open the Portal Settings navigation panel.





2. From the Portal Settings navigation pane:

i. Click on the Branding to expand the list of operations that can be performed.

ii. Select Colors where you can update custom CSS for your portal.

iii. Here, you may write the custom CSS to change colors and styling of various elements of user interface using the SASS template explained in detail here: Understand Customized Branding in VIDIZMO.

iv. Click Update to save the changes.




A notification will be displayed briefly stating: Portal details have been updated successfully. After saving changes, you will be able to see the UI changes reflect in your portal.