The header displays a logo and other components depending on the theme and user roles. You can use the footer to display related links, information about your company, or legal notices.
Working with Logo
How to change the logo?
Theme use Zendesk Branding option to change the logo. In order to change the logo:
- Click customize design
- Click Branding
- Click upload to upload your logo.
How to add a corporate site link at the logo?
In order to add corporate site link at header just do the following
1. Remove the Zendesk component {{logo}
2. Add <a href= "http:www.your-corporate-site.com"><img src = "//p3.zdassets.com/hc/theme_assets/769247/200146721/logo.png" alt = "" /></a>
3.) Save and publish the changes.
Background Color
Change the background color of the header or footer
Change or add the background-color property in the following selectors.
.header {
background-color: #666;
}
.footer {
background-color: #333;
}
Change the height of the header or footer
Change or add the height property in the following selectors.
Header
.header {
height: 70px;
}
Footer
.footer {
height: 20px;
}
Change the space above or below the header or footer
Change or add margin-bottom and margin-top properties in the following selectors.
Header
.header {
margin-bottom: 20px;
}
Footer
.footer {
margin-top: 10px;
}
Language Selector
Change the appearance of the selected language Add the following selector and property:
.language-selector .dropdown-toggle {
color: green;
}
Submit a Request link:
Change the appearance of the Submit a Request link Add or modify text properties in the following selector:
.submit-a-request {
font-size: 14px;
Color: green;
}
Sign In Link
Change the appearance of the Sign In link Add or modify text properties in the following selector:
.login {
font-size: 14px;
color: green;
}
Footer
How to add links at footer?
Just enter the link in <a href = "#"> i.e <a href = "http://www.diziana.com">
eg: <li><a href="#">Terms of Service</a></li>
Replace "#" with "http://www.diziana.com"
<li><a href="http://www.diziana.com">Terms of Service</a></li>
How to remove links at footer?
Just remove the links
<li><a href="#">Terms of Service</a></li>
0 Comments