Skip to main content

Create a new brand

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

Procedure

  1. On the Admin home page, select Brands, and then on the Brands page, on the right side of the page, select CREATE NEW.
  2. In the Your Brand dialog box, in the Organisation name box, enter your organization's name, and in the Theme name box, enter the name you want to give this theme.
  3. 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.
    Logo.png

    Don't forget that some users might access your app through a mobile device. So 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.
  4. 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.
  5. 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.
  6. 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.
  7. To set the font of your brand, from the Fonts list, select from the available fonts.
  8. To set more options for your brand, select Show advanced options, or if you're finished configuring your brand, select ADD.

Advanced options

  1. To set the background and sub-navigation color of each page, under the Page background color and Sub-navigation text color sections, select the arrow next to the box, and in the color picker, select the color you want to apply, and then select CHOOSE. If you don't select a sub-navigation color, the default is the secondary color.
  2. To convert your menu titles to lower case or sentence case, clear the Transform menu titles to uppercase option.
  3. 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. If you don't select a link color, the default is the secondary color.
  4. To make your links bold, from the Link weight list, select "Bold." Otherwise, the default is "Normal."
  5. 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.
  6. 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.
  7. 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.
  8. To set the color of the "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

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

  1. Under the Header font face section, select the fonts you want to use for your page headings:
  2. 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.
  3. From the Fallback fonts list, select the font to use if your font can't be read.
  4. Upload the four font types for your font.

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

Body font face

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

  1. Under the Body font face section, select the fonts you want to use for the body text of your content:
  2. 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.
  3. From the Fallback fonts list, select the font to use if your font can't be read.
  4. Upload the four font types for your font.

    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.
  • Applaud doesn't support JavaScript.
  • We can't offer you any technical support to build footers.
footer.png
  1. To use a footer on your Applaud tenant and expand the view to configure it, select the Enable footer? option.
  2. Under the Footer section in the HTML box, paste your code for your footer content to appear. Here is some example code you can use with our CSS example code to add a footer as shown. Change the text and images, and then copy the HTML to this HTML box.
    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>
  3. In the CSS box, paste your code to style your HTML. You should try to make this responsive. Here is some example code you can use with our HTML example code to add a footer as shown. Change the colors and then copy the CSS to this CSS box. This footer is responsive, meaning it works seamlessly on desktop and tablet devices. It disappears to encourage mobile-bottom navigation on mobile devices.
    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;
}
  4. Choose the Footer background color.
  5. Once you have finished configuring your brand, select ADD.

Follow-up tasks

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.

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

    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.
  3. To remove a brand, select the context menu and then DEACTIVATE.
  4. To use an existing brand, select the context menu and then ACTIVATE.

See more:

Other tasks you can perform here:

Reference:

Sections in this article