Forums/Documentation/CSS cookbook (Zendesk Classic)

Setting the page width and removing the page border

Anton de Young
posted this on July 11, 2011 12:07

By default, the Zendesk layout resizes with the browser window. You can set a specific page width if you'd like.

This example describes how to do the following CSS customizations:
  • Set the page to a specific width
  • Remove the white margin next to the header
  • Set the footer width to match the page width

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_page_width_before.png

After

css_page_width_after.png

The background border has increased because the page size was reduced. The width of the background border varies depending on the size of the browser window.

CSS code

The following code sets the width of the page, removes the white border next to the header, and then adds a border to the content container.

/* Set the width of the page */
/* If you want to constrain it
 * to a specific size. */
#page {
	margin: 0 auto;
	width: 1000px;
	max-width: 1000px;
	min-width: 1000px;
	position:relative;
	right: 2px;
	/* These two settings remove the white border next to the header. */
	padding-left:0px;
	padding-right:0px;
}
 
/* Set the minimum width of the frame */
.frame {
	min-width: 510px;
}
 
/* Add a border within the content container
 * to compensate for taking it away
 * in #page. */
div#container {
	padding-left:10px;
	padding-right:10px;
}
Note: You should be careful when setting the page width because if you make it too small elements of the page will overlap (sidebar over the content container, for example).
The page header is contained within the page element, but the footer is not. So, if you change the page width, you also need to change the width of the footer to match.
/* Set the footer width to match the page width */
#footer {
  margin: 0 auto;
  width: 1000px;
  max-width: 1000px;
  min-width: 1000px;
  }

For more information about customizing the footer, see Customizing the page footer.

 

 

Comments

User photo
Marilenis Olivera Lee

Hi Anton,

Thanks for putting together this cookbook, it's very helpful!

I have a quick question and hope someone in your team can help.

I am styling the top navigation bar for my client's zendesk account to look like the one on their main website. Their top navigation bar extends 100%, it takes up all the browser's width.

Is there a way to change the code in zendesk so the top navigation bar extends 100%?

I have attached two images: top-nav-bar-cp.jpg is the top navigation bar of my client's website and the other one is what I have customized so far on their zendesk account.

Any help is greatly appreciated!

Mari

February 24, 2012 00:35
User photo
Jim Hershkowitz
immodating

Hi Anton, I have the same question as Mari above, can you please help??? Thanks! Jim

March 23, 2013 00:51
User photo
Anton de Young
Zendesk

Marilenis and Jim, 

This CSS will take care of it: 

#page {max-width: none; padding: 0;}

body {padding: 0;}

March 25, 2013 09:22
User photo
Support
centroy

This does NOT work in Firefox. No one has caught this?

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

This was tested and does work in Firefox. Let us know if we can help you troubleshoot the problem you're having. 

June 11, 2013 08:51