Create a new brand – Applaud Support

Note

You must have the Brands and app admin role assigned to you to view and edit these settings.

Procedure

On the Admin home page, select Brands, and on the Brands page, select CREATE NEW.

On the Your Brand dialog box:

In the Theme name box, type the name that you want to give this theme.
To add your Logo, select UPLOAD YOUR LOGO and locate and open your organization's logo. You can use .gif, .jpeg, .jpg, or .png files. The default logo in the header is 32px high.
Tip

Don't forget that some of your users might access your app through a mobile device. Here are some best practice tips that we recommend you follow when adding your logo:
- Retain the aspect ratio of your logo. So it isn't wider or taller than intended.
- Retain the logo's scale. So the logo isn't larger or smaller than its source and becomes pixelated.
- Use the logo with a transparent background. Avoid using your logo with a background color so it doesn't clash with its surroundings.
- If you can, try to use a logo that's wider than taller. It needs to be able to fit on the header and navigation bar.
- If your organization has a complex logo, see if they have a simplified version you could use.
To add your Favicon, select UPLOAD YOUR FAVICON, and locate and open your organization's favicon. Your favicon file must have the .ico file extension.
To set the color of the global header bar and other main colors, under the Primary color section, select the arrow next to the box, and in the color picker, choose the color you want to apply, and then select CHOOSE.
To set the color of subtitles and non-primary colors, under the Secondary color section, select the arrow next to the box. Then, in the color picker, choose the color you want to apply, and then select CHOOSE.
To set the font of your brand, from the Fonts list, select from the available fonts.

To set more options for your brand, select Show advanced options:

Advanced options

To set the background color of each page, under the Page background color section, select the arrow next to the box, and in the color picker, select the color you want to apply, and then select CHOOSE.
To set the sub-navigation color of each page, under the Sub-navigation text color section, select the arrow next to the box, and in the color picker, select the color you want to apply, then select CHOOSE.

Note

If you don't select a sub-navigation color, the default is the secondary color.
To convert your menu titles to lower case or sentence case, clear the Transform menu titles to uppercase option.
To set the color of links, under the Link color section, select the arrow next to the box, and in the color picker, select the color you want to apply, and then select CHOOSE.

Note

If you don't select a link color, the default is the secondary color.
To make your links bold, from the Link weight list, select "Bold." Otherwise, the default is "Normal."
To set the color neutral things such as an Add button, under the Positive color section, select the arrow next to the box, and in the color picker, select the color you want to apply, and then select CHOOSE.
To set the color of buttons such as Approve or Submit, under the Balanced color section, select the arrow next to the box, and in the color picker, select the color you want to apply, and then select CHOOSE.
To set the color of a warning to highlight an alert or confirmation, under the Energized color section, select the arrow next to the box, and in the color picker, select the color that you want to apply, and then select CHOOSE.
To set the color of Delete buttons, under the Assertive color section, select the arrow next to the box, and in the color picker, select the color you want to apply, and then select CHOOSE.

Header font face

You can use your font for the headings of pages within your Applaud tenant.

Caution

Any fonts that you specify here override any fonts that you have selected previously.

In the Font name box, type the font name you want to use for page headings in your Applaud tenant. Make sure you take care to write this correctly so that the browser can read it.
From the Fallback fonts list, select the font to use if your font can't be read.
Upload the four font types for your font.

Important

You must upload all four of these to ensure a consistent experience in all browsers.

Body font face

You can use your font for the body of pages within your Applaud tenant.

Caution

Any fonts that you specify here override any fonts that you have selected previously.

In the Font name box, type the font name you want to use for the page body in your Applaud tenant. Take care to write this correctly so that the browser can read it.
From the Fallback fonts list, select the font to use if your font can't be read.
Upload the four font types for your font.

Important

You must upload all four of these to ensure a consistent experience in all browsers.

Footer

Only those comfortable with HTML and CSS should configure the footer for your site.

Before you configure your footer in your Applaud tenant, we recommend that you configure this in an Integrated Development Environment (IDE) such as CodePen so that you can preview the output live and test it on different screen sizes.

Warning

Applaud doesn't support JavaScript.
We can't offer you any technical support to build footers.

To use a footer on your Applaud tenant and expand the view to configure it, select the Enable footer? option.
Under the Footer section in the HTML box, paste your code for your footer content to appear.
In the CSS box, paste your code to style your HTML. You should try to make this responsive.
Choose the Footer background color and select ADD.

Example code

Here is some example code, which you can customize and use. Change the text and images, and then copy the HTML and CSS into your Applaud tenant. This footer is responsive, meaning it works seamlessly on desktop and tablet devices. It disappears to encourage mobile-bottom navigation on mobile devices.

HTML

<div id="footerWrapper" class="footer-shadow">
   <div class="footerInner">
      <div class="textLeft columnHalf">
         <a href="https://www.applaudhr.com" target="_parent" style="border-width:0px;border:0px;"><img src="https://www.applaudhr.com/hubfs/applaud-logo-white.svg" class="hs-image-widget " style="max-width: 100%; height: 40px;" alt="applaud" title="applaud"></a>
         <p class="whiteText">
            Applaud is built on the belief that employees should have the same exceptional technology experiences inside the world of work, as they expect outside the world of work, as consumers.
         </p>
      </div>
      <div class="columnQtr">
         <h3 class="greyText">Get in touch</h3>
         <p class="whiteText"><strong>US:&nbsp;</strong><a href="tel:+1-855-982-1057" class="footerLink" rel=" noopener">+1-855-982-1057</a><br><strong>Europe</strong>:&nbsp;<a href="tel:+44-208-895-6984" class="footerLink" rel=" noopener">+44-208-895-6984</a><br><strong>India:&nbsp;</strong><a href="tel:+91-40-6940-4545" class="footerLink" rel=" noopener">+91-40-6940-4545</a></p>
      </div>
      <div class="columnQtr">
         <h3 class="greyText" style="padding-left: 16px;">Uphold our standards</h3>
         <img src="https://www.applaudhr.com/hubfs/custom-video-thumbnails/Applaud-ISO_BSI_Accreditation_27001_27017_27018_BS10012_white.svg" alt="Applaud-ISO_BSI_Accreditations" style="width: 100%; margin-left: -16px; display: block; margin: 0px auto;">
      </div>
   </div>
   <div class="footerInner">
      <div class="column copyrightColumn textLeft">
         <p class="whiteText copyright">© Copyright 2021 Applaud Solutions UK Ltd. All Rights Reserved.</p>
      </div>
      <div class="column copyrightColumn textRight">
         <div class="linkWithIconWrapper">
            <span style="margin-right: 16px; color: #ffffff;">Stay connected: </span>
            <div class="linkWithIconIcon">
               <a href="https://www.linkedin.com/company/applaud-solutions"><i aria-hidden="true" class="v-icon mdi mdi-linkedin" size="22"></i></a>
            </div>
            <div class="linkWithIconIcon">
               <a href="https://twitter.com/ApplaudSolution"><i aria-hidden="true" class="v-icon mdi mdi-twitter" size="22"></i></a>
            </div>
            <div class="linkWithIconIcon">
               <a href="https://www.facebook.com/applaudsolutions/"><i aria-hidden="true" class="v-icon mdi mdi-facebook" size="22"></i></a>
            </div>
         </div>
      </div>
   </div>
</div><div id="footerWrapper" class="footer-shadow">
  <div class="footerInner">
    <div class="textLeft columnHalf">
      <a href="https://www.applaudhr.com" target="_parent" style="border-width:0px;border:0px;"><img src="https://www.applaudhr.com/hubfs/applaud-logo-white.svg" class="hs-image-widget " style="max-width: 100%; height: 40px;" alt="applaud" title="applaud"></a>
      <p class="whiteText">
      Applaud is built on the belief that employees should have the same exceptional technology experiences inside the world of work, as they expect outside the world of work, as consumers.
      </p>
      
    </div>
    <div class="columnQtr">
      <h3 class="greyText">Get in touch</h3>
     <p class="whiteText"><strong>US:&nbsp;</strong><a href="tel:+1-855-982-1057" class="footerLink" rel=" noopener">+1-855-982-1057</a><br><strong>Europe</strong>:&nbsp;<a href="tel:+44-208-895-6984" class="footerLink" rel=" noopener">+44-208-895-6984</a><br><strong>India:&nbsp;</strong><a href="tel:+91-40-6940-4545" class="footerLink" rel=" noopener">+91-40-6940-4545</a></p>
    </div>
    <div class="columnQtr">
  
        
        
         
           <h3 class="greyText" style="padding-left: 16px;">Uphold our standards</h3>
           <img src="https://www.applaudhr.com/hubfs/custom-video-thumbnails/Applaud-ISO_BSI_Accreditation_27001_27017_27018_BS10012_white.svg" alt="Applaud-ISO_BSI_Accreditations" style="width: 100%; margin-left: -16px; display: block; margin: 0px auto;">
         
   
    </div>
  
  </div>  
  
  
  <div class="footerInner">
    <div class="column copyrightColumn textLeft">
      <p class="whiteText copyright">© Copyright 2021 Applaud Solutions UK Ltd. All Rights Reserved.</p>
    </div>
    <div class="column copyrightColumn textRight">
      <div class="linkWithIconWrapper"><span style="margin-right: 16px; color: #ffffff;">Stay connected: </span>
         
          <div class="linkWithIconIcon">
         <a href="https://www.linkedin.com/company/applaud-solutions"><i aria-hidden="true" class="v-icon mdi mdi-linkedin" size="22"></i></a>
      </div>
         
       
          <div class="linkWithIconIcon">
         <a href="https://twitter.com/ApplaudSolution"><i aria-hidden="true" class="v-icon mdi mdi-twitter" size="22"></i></a>
      </div>
         
          <div class="linkWithIconIcon">
         <a href="https://www.facebook.com/applaudsolutions/"><i aria-hidden="true" class="v-icon mdi mdi-facebook" size="22"></i></a>
      </div>
         
        
      </div>
    </div>
   
  
  </div>  
</div><div id="footerWrapper" class="footer-shadow">
   <div class="footerInner">
      <div class="textLeft columnHalf">
         <a href="https://www.applaudhr.com" target="_parent" style="borderwidth:0px;border:0px;"><img src="https://images.applaudsolutions.com/ApplaudCloudStage/5e70d1687196b24a5dc9f913/Violettextlogo-d7d2185f-5681-4148-90ba-c2fdb25bc1a9.png"
            class="hs-image-widget " style="max-width: 100%; height: 40px;" alt="applaud"
            title="applaud"></a>
         <p class="whiteText">
            We are delivering exceptional cloud-based technology, to support aviation operations in
            their day-to-day activities. Sales, Marketing, Operations, and Maintenance departments can find
            useful tools in one place.
         </p>
      </div>
      <div class="columnQtr">
         <h3 class="greyText">Get in touch</h3>
         <p class="whiteText"><strong>US:&nbsp;</strong><a href="tel:+1-855-982-1057"
            class="footerLink" rel=" noopener">+1-855-982-1057</a><br><strong>Europe</strong>:&nbsp;<a
            href="tel:+44-203-865-6754" class="footerLink" rel=" noopener">+44-204-876-
            6344</a><br><strong>India:&nbsp;</strong><a href="tel:+91-30-4240-4875" class="footerLink"
               rel=" noopener">+91-60-4530-4545</a>
         </p>
      </div>
      <div class="columnQtr">
         <h3 class="greyText" style="padding-left: 16px;">Uphold our standards</h3>
         <img src="https://www.applaudhr.com/hubfs/custom-video-thumbnails/ApplaudISO_BSI_Accreditation_27001_27017_27018_BS10012_white.svg" alt="ApplaudISO_BSI_Accreditations" style="width: 100%; margin-left: -16px; display: block; margin: 0px auto;">
      </div>
   </div>
   <div class="footerInner">
      <div class="column copyrightColumn textLeft">
         <p class="whiteText copyright">© Copyright 2021 Violet Dove UK Ltd. All Rights Reserved.</p>
      </div>
      <div class="column copyrightColumn textRight">
         <div class="linkWithIconWrapper">
            <span style="margin-right: 16px; color: #ffffff;">Stay
            connected: </span>
            <div class="linkWithIconIcon">
               <a href="https://www.linkedin.com/company/applaud-solutions"><i aria-hidden="true"
                  class="v-icon mdi mdi-linkedin" size="22"></i></a>
            </div>
            <div class="linkWithIconIcon">
               <a href="https://twitter.com/ApplaudSolution"><i aria-hidden="true" class="v-icon mdi mditwitter" size="22"></i></a>
            </div>
            <div class="linkWithIconIcon">
               <a href="https://www.facebook.com/applaudsolutions/"><i aria-hidden="true" class="v-icon
                  mdi mdi-facebook" size="22"></i></a>
            </div>
         </div>
      </div>
   </div>
</div>

CSS

#footerWrapper {
	background-color: #545454;
	background: linear-gradient(90deg, #545454, #000000);
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 0;
}

#footerWrapper a {
	color: #80B2D9;
}

.footerLink {
	color: #80B2D9;
}

.copyright {
	font-size: 0.8em;
}

.whiteText {
	color: #FFFFFF;
}

.greyText {
	color: #999999;
}

.footer-shadow {
	-webkit-box-shadow: 0px -6px 0px 0 rgba(0, 0, 0, .12)!important;
	box-shadow: 0px -6px 6px 0 rgba(0, 0, 0, .12)!important;
}

.footerInner {
	background: #FFFFFF00;
	display: flex;
	flex-direction: row;
	align-items: center;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 100%;
	flex: 1 1 100%;
	margin: auto;
	padding: 0;
	width: 100%;
}

.columnOne {
	padding: 16px;
	flex-grow: 1;
	text-align: left;
	background-color: red;
}

.column {
	padding: 16px;
	flex-grow: 1;
	text-align: left;
}

.columnHalf {
	padding: 16px;
	flex-grow: 2;
	max-width: 50%;
	text-align: left;
}

.columnQtr {
	padding: 16px;
	flex-grow: 1;
	max-width: 25%;
	text-align: left;
}

.textLeft {
	text-align: left;
}

.textCenter {
	text-align: center;
}

.textRight {
	text-align: right;
}

.columnOne {
	padding: 16px;
	flex-grow: 1;
	text-align: left;
}

.columnTwo {
	padding: 16px;
	flex-grow: 1;
	text-align: center;
	background-color: red;
}

.columnThree {
	padding: 16px;
	flex-grow: 1;
	text-align: right;
}

.copyrightColumn {
	padding: 0 16px;
}

..linkWithIconWrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 100%;
	flex: 1 1 100%;
	margin: auto;
	padding: 0;
	color: #FFFFFF;
}

.linkWithIconIcon {
	padding-right: 16px;
	color: #FFFFFF;
	display: inline-flex;
}

.linkWithIconIcon a {
	color: #FFFFFF;
}

.linkWithIconText a {
	color: #FFFFFF;
}

/*This is what makes the footer responsive. It hides the footer on screens smaller than 960px so you can see the bottom navigation.*/
@media only screen and (min-width: 960px) {
	.footerInner {
		max-width: 900px;
	}
}

@media only screen and (min-width: 1264px) {
	.footerInner {
		max-width: 1185px;
	}
}

@media only screen and (min-width: 1904px) {
	.footerInner {
		max-width: 1785px;
	}
}#footerWrapper{
  background-color: #545454;
    background: linear-gradient(90deg, #545454, #000000);
  text-align: center;
   width: 100%;
  margin: 0;
  padding: 0;
}

#footerWrapper a{
color: #80B2D9;
}

.footerLink{
  color: #80B2D9;
}

.copyright{
  font-size: 0.8em;
}


.whiteText{
color: #FFFFFF;
}

.greyText{
color: #999999;
}

.footer-shadow{
  -webkit-box-shadow: 0px -6px 0px 0 rgba(0,0,0,.12)!important;
    box-shadow: 0px -6px 6px 0 rgba(0,0,0,.12)!important;
  
}


.footerInner{
  background: #FFFFFF00;
  display: flex;
  flex-direction: row;
  align-items: center;
  -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    margin: auto;
    padding: 0;
width: 100%;
  
}

.columnOne{
  padding: 16px;
  flex-grow: 1;
  text-align: left;
  background-color: red;
}


.column{
  padding: 16px;
  flex-grow: 1;
  text-align: left;
}


.columnHalf{
  padding: 16px;
  flex-grow: 2;
  max-width: 50%;
  text-align: left;
 
}

.columnQtr{
  padding: 16px;
  flex-grow: 1;
  max-width: 25%;
  text-align: left;
 
}



.textLeft{
  text-align: left;
}

.textCenter{
  text-align: center;
}

.textRight{
  text-align: right;
}

.columnOne{
  padding: 16px;
  flex-grow: 1;
  text-align: left;
}
.columnTwo{
  padding: 16px;
  flex-grow: 1;
  text-align: center;
  background-color: red ;
}
.columnThree{
  padding: 16px;
  flex-grow: 1;
  text-align: right;
}

.copyrightColumn{
  padding: 0 16px;
}

..linkWithIconWrapper{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    margin: auto;
    padding: 0;
  color: #FFFFFF;
}
.linkWithIconIcon{
  padding-right: 16px;
color: #FFFFFF;
  display: inline-flex;
}

.linkWithIconIcon a{
color: #FFFFFF;
}

.linkWithIconText a{
color: #FFFFFF;
}




@media only screen and (min-width: 960px){
.footerInner {
    max-width: 900px;
}

}



@media only screen and (min-width: 1264px){
  
.footerInner {
    max-width: 1185px;
}
}

@media only screen and (min-width: 1904px){
.footerInner {
    max-width: 1785px;
}
}#footerWrapper {
	background-color: #545454;
	background: linear-gradient(90deg, #545454, #000000);
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 0;
}

#footerWrapper a {
	color: #80B2D9;
}

.footerLink {
	color: #FFFFFF;
}

.whiteText {
	color: #FFFFFF;
}

.greyText {
	color: #FFFFFF;
}

.footer-shadow {
	-webkit-box-shadow: 0px -6px 0px 0 rgba(0, 0, 0, .12)!important;
	box-shadow: 0px -6px 6px 0 rgba(0, 0, 0, .12)!important;
}

.footerInner {
	background: #FFFFFF00;
	display: flex;
	flex-direction: row;
	align-items: center;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 100%;
	flex: 1 1 100%;
	margin: auto;
	padding: 0;
	width: 100%;
}

.columnOne {
	padding: 16px;
	flex-grow: 1;
	text-align: left;
	background-color: red;
}

.column {
	padding: 16px;
	flex-grow: 1;
	text-align: left;
}

.columnHalf {
	padding: 16px;
	flex-grow: 2;
	max-width: 50%;
	text-align: left;
}

.columnQtr {
	padding: 16px;
	flex-grow: 1;
	max-width: 25%;
	text-align: left;
}

.textLeft {
	text-align: left;
}

.textCenter {
	text-align: center;
}

.textRight {
	text-align: right;
}

.columnOne {
	padding: 16px;
	flex-grow: 1;
	text-align: left;
}

.columnTwo {
	padding: 16px;
	flex-grow: 1;
	text-align: center;
	background-color: red;
}

.columnThree {
	padding: 16px;
	flex-grow: 1;
	text-align: right;
}

.copyrightColumn {
	padding: 0 16px;
}

..linkWithIconWrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 100%;
	flex: 1 1 100%;
	margin: auto;
	padding: 0;
	color: #FFFFFF;
}

.linkWithIconIcon {
	padding-right: 16px;
	color: #FFFFFF;
	display: inline-flex;
}

.linkWithIconIcon a {
	color: #FFFFFF;
}

.linkWithIconText a {
	color: #FFFFFF;
}

@media only screen and (min-width: 960px) {
	.footerInner {
		max-width: 900px;
	}
}

@media only screen and (min-width: 1264px) {
	.footerInner {
		max-width: 1185px;
	}
}

@media only screen and (min-width: 1904px) {
	.footerInner {
		max-width: 1785px;
	}
}

@media screen and (max-width: 376px) {
	.footer-shadow {
		display: none;
	}
}

.copyright {
	font-size: 0.8em;
}

Once you have finished configuring your brand, select ADD.

Follow-up tasks

Note

When you select UPDATE, you enter preview mode automatically. This mode is just for you to create the brand. Other users won't see your changes until you publish and activate them.

Take a look around the platform and see how your new brand looks.
Return to the Brands page, and on the brand you created, select the context menu:

Caution
You might lose your edits if you end your preview before you publish.
- To make further edits, select EDIT.
- To save your new brand, select PUBLISH, and then select END PREVIEW. The Published and Active appear on your brand.
To remove a brand, select the context menu and then DEACTIVATE.
To use an existing brand, select the context menu and then ACTIVATE.

See more:

About brands

Other tasks you can perform here:

Edit an existing brand

Reference:

Sections in this article

Note

Procedure

Tip

Advanced options

Note

Note

Header font face

Caution

Important

Body font face

Caution

Important

Footer

Warning

Example code

HTML

CSS

Follow-up tasks

Note

Caution

See more:

Other tasks you can perform here:

Reference:

Sections in this article