Changing the content area background color

Most of the content is contained within an element called  content_grey. A second container,  content_green, is used for the home page welcome message (shown in the 'after' example with a yellow background), for the comments section on the ticket page, and in several other places in your Zendesk. 

This example describes how to do the following CSS customizations:
  • Set the background colors for the container elements of the main content area

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.





CSS code

This example sets the background color of content_grey to a light tan and then restores the rounded corners on the left side of the container.

/* Set the content area background 
* and section divider */
.content_grey, div.setting-divider {
	background: #F1F2E8;  /* tan */
/* To restore the rounded top corner on the left side */
.grey_box_top {
background: #F1F2E8 url(/images/composite.gif?1284747712) no-repeat scroll;
/* To restore the rounded bottom corner bottom on the left side */
.grey_box_bottom {
background: #F1F2E8 url(/images/composite.gif?1284747712) no-repeat scroll 0 -10px;

Setting the background color for content_green

In this example, the background color for content_green is set to yellow to match the background color of the sidebar content in our other CSS examples (see Customizing the sidebar).
/* Set the background color for content_green */
.content_green, .green_box_top, .green_box_bottom {
	background: #FFFFE1;  /* pale yellow */
Have more questions? Submit a request


  • 0

    if i want to get rid of the rounded corners on both sides, how do i do this?  I can get rid of the rounded corners, but only on the left side by setting the background to 'none' in the css.

  • 0

    The code here worked to change the color of .content_grey - but there is still a top & bottom bar on these items that is the original color. Any idea how to make adjustments to those top & bottom bars? 

  • 0

    Hi Gretchen , the below will change the first 3 blocks top and bottom bars  


    background-color: Your color }


    background-color: your color}

    These will change the forum block.


    background-color:your color}


    background-color: your color}


    Hope this helps some what

  • 0

    Thanks, Karl! 

  • 0

    Hi there,

    If I wanted to change the background color for say the homepage but not for the rest of the site how would I go about doing that?



  • 0
Powered by Zendesk