Sample Branding Follow

Here, we have created a sample company branded site. The following will provide the sample for this, and how to use your own company branding. Please be sure to keep Zoom's Branding Guidelines in mind when customizing your page.

For the sample below, all files can be found here.

Uploading Images

The first thing to be done is to upload your company background and logo image.

  1. Select Upload an image and select the logo or background to be uploaded
  2. Once uploaded, you will have a path for the background and logo. This will be used later on.

Note: We restrict the display size on the page to avoid breaking the layout if the logo is too big. You can change the display size via custom CSS as follows:

#header .left {
    margin-top: -12px;
}
#header .left .logo {
   height: 69px;
   width: 158px;

}

Landing Page

The Landing Page HTML  will replace the entire HTML for the landing page. Key points to be edited are as follows.

Line 7: This is the Title portion of the landing page. This will change what will be seen in a browser tab for the page name. An example of what can be used is as follows.

<title>Company | Zoom</title>

Line 14: Update the URL with the full path of the uploaded background. This will be something like the following

html {
	background: #000 url(https://yourcompany.zoom.us/account/branding/p/70yasdf1h923asdfasd.png) no-repeat bottom center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: 100% auto;
	font-family: Arial Narrow, Helvetica, sans-serif;

}

Lines 26 & 47: These lines contain the color codes for your Join and Host a Meeting buttons and when the mouse is hovering over these buttons. This is noted by "background: #3385ff;". Colorpicker is a useful tool if you are not familiar with hex colors.

.btn {
	background: #3385ff;
	border: none;
	color: #fff!important;
	cursor: pointer;
	display: block;
	font-weight: normal!important;
	margin: 0 22px 2px 2px;
	text-align: center;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
	text-shadow: none;
	font-family: Arial Narrow, Helvetica, sans-serif;
	font-size: 16px;
	height: 45px;
	line-height: 45px;
	padding: 0 20px;
	text-transform: capitalize;
}
.btn:active, .btn:focus, .btn:hover {
	background: #FE9102 !important;
	color: #fff !important;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

Lines 65-66, 70-71, and 85-86: These lines include the positioning of the Logo, join and host a meeting buttons, and login link respectively.

#top_container .logo {
	position: absolute;
	top: 95px;
	left: 145px;
}
#top_container .actions {
	position: absolute;
	right: 100px;
	top: 108px;
	font-family: Arial, Helvetica, sans-serif; 
	font-size:17px;
}
#top_container .action-btns {
	position: absolute;
	top: 95px;
	right: 158px;
	float: right;
}

Line 378: This is where you input the path for your logo. This is inputted under 'src=" "'. For example:

<div class="logo">
	<img src="/account/branding/p/63b0c3a5-c34b-4efb-ae36-59668f177deb.png" alt="Your Company Logo" />
</div>

Logo, Header, Footer

For this example of the header and footer, the Logo field will not be used. 

The sample Header removes elements such as Zoom's phone number and pricing for Zoom. It will leave basic information including your logo, joining a meeting, hosting a meeting, and signing in/out. You can use your uploaded logo path under 'src=" " '

<img class="logo" src="/account/branding/p/63b0c3a5-c34b-4efb-ae36-59668f177deb.png" alt="Your Company Logo" />

The footer will remove all Zoom information.

<div id="footer" class="container">
</div>

Custom CSS

The Custom CSS page can be a powerful tool to change the styling of the page and remove certain elements. The Sample Custom CSS is used to hide the Sign Up Free and change the header coloring.

#header_container {
background: none #fff;
}
#header_login li a {
    color: #000 !important;
}
#header_outer .hostmeeting, #header_outer .rr {
   color: #000 !important;
}
.signupfree{
display: none;
}
Was this article helpful?
Have more questions? Submit a request
Powered by Zendesk