Advanced options
- When you set the Page background color, this changes the default page color of all admin pages and custom pages. However, you can add a background image to custom pages, see our knowledge base article, Configure your page settings.
- To set the sub-navigation color of each page, under the 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.
- To convert your menu titles to lowercase or sentence case, clear the Transform menu titles to uppercase option. This is selected by default.
- 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.
- 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 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.
- Under the Header font face section, select the fonts you want to use for your page headings:
- 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.
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.
- Under the Body font face section, select the fonts you want to use for the body text of your content:
- 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.
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.
- 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. 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: </strong><a href="tel:+1-855-982-1057" class="footerLink" rel=" noopener">+1-855-982-1057</a><br><strong>Europe</strong>: <a href="tel:+44-208-895-6984" class="footerLink" rel=" noopener">+44-208-895-6984</a><br><strong>India: </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> - 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; }
- Choose the Footer background color.
- 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.
- 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:
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.