Forums/Documentation/CSS cookbook (Zendesk Classic)

Customizing the page footer

Anton de Young
posted this on July 11, 2011 15:13

The footer is a separate element on the page called #footer so if you make changes to the page layout (such as resizing the page) and want the footer to match, you'll need to set its properties as well. And, as with all text elements you can also change the alignment and formatting of the text. You may also completely hide the footer.

This example describes how to do the following:
  • Center the footer text
  • Change the footer text color
  • Change the color of the hyperlink text and hover
  • Add a drop shadow to the footer text
  • Hide the footer

While the CSS in this article can be used to modify the web portal of the new Zendesk, it has no effect on the new agent interface.

For more information about getting started with CSS customization in Zendesk, see How to brand your Web portal.

Before

css_footer_before.png

By default, the footer text is aligned right.

After

css_footer_after.png

The text is aligned to the center and the background color and font properties have been changed.

CSS code

In this code example, the text is centered, the text color is modified, and a drop shadow is added.

/* Set the footer width */
#footer {
	margin: 0 auto;
	width: 1000px;
	max-width: 1000px;
	min-width: 1000px;
}
 
/* Set the footer text color */
#footer, #footer p {
	color: #333333; /* dark gray */
}
 
/* Set the footer hyperlink to a different color */
#footer a {
	color: #FFFFFF; /* white */
}
 
/* Set the footer hyperlink hover to a different color */
#footer a:hover {
	color: #FFCC99; /* light orange */
}
 
/* Center the footer text and add a drop shadow */
#footer p {
	text-align: center;
	color:#333333;
	margin:25px 0 0;
	text-shadow:0 2px 3px rgba(0, 0, 0, 0.5); /* This may not work with all browsers */
}
In this example, the background color of the footer is transparent, which is the default, and picks up its color from the page background. To set the page background color in CSS, you can use this code:
/* Set the background color of the site. 
* This is equivalent to setting Settings > Account > Page Background */
html, body {
	background-color:#6699CC; /* blue */
}
If you want to set the background color of the footer (separate from the page background) you can add this CSS code:
#footer {
	background-color:#FF8800; /* orange */
}

These are just a few examples of how you can format the footer. You could also, for example, increase the height of footer and change the background to another color or and an image. Using JavaScript you can also insert more links into the footer.

Hiding the footer

To completely hide the footer, use this CSS code:
/* Hide the footer */
#footer {
	visibility: hidden;
}
 

Comments

User photo
Support
centroy

Hiding the footer does NOT work on Firefox. 

June 10, 2013 20:46
User photo
Anton de Young
Zendesk

This was tested with Firefox and it does work. All of the CSS code in this CSS Cookbook apply to the end-user facing web portal, not the agent interface in new Zendesk. If you can tell us what version of Firefox you're testing this on, we'd be happy to help you sort this out. 

June 11, 2013 08:43
User photo
Quelyn Gretsky

When I use this code it leaves a gap between the main section and the footer. 

 

July 31, 2013 15:14
User photo
Laura D.
Zendesk

Hi Quelyn, 

I paired up with one of our CSS experts and we found the issue...

Screen_Shot_2013-08-01_at_1.20.00_PM.png

If you change the 25px margin on the paragraph to 0px the gap between the page div and the footer div goes away. I hope that helps!

August 01, 2013 13:25
User photo
Quelyn Gretsky

Laura, 

Thanks so much!  My CSS is a little rusty, but I'll get it, eventually ^_^

August 02, 2013 09:41