Customizing the page footer

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;
}
Have more questions? Submit a request

Comments

  • Avatar
    Support

    Hiding the footer does NOT work on Firefox. 

  • Avatar
    Anton de Young

    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. 

  • Avatar
    Quelyn Gretsky

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

     

  • Avatar
    Laura D.

    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!

  • Avatar
    Quelyn Gretsky

    Laura, 

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

  • Avatar
    Mohammed Mohiuddin

    Kindly let me know, how to apply multi colors in footer's background. For Ex: In the footer's background, the first 25% area is Red, next 50% area green and the last 25% area is blue..Thanks in advance.

  • Avatar
    Ron Gonzalez Lobo

    How to have different links in the footer on different language based helpcenter pages?

    E.g.: for the English help center pages I'd like to have https://www.viewneo.com/about-us and for the German pages https://www.viewneo.com/de/ueber-uns

  • Avatar
    Jessie Schutz

    Hi Ron!

    If you're on our Plus or Enterprise plan, you have the option to use Dynamic Content to customize your Help Center content based on the user's preferred language. You can find out more about that here: Change your Help Center design using Dynamic Content.

    Please let me know if you have any other questions!