Forums/Documentation/CSS cookbook (Zendesk Classic)

Changing the content area background color

Anton de Young
posted this on August 04, 2011 15:18

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.

Before

content_area_before.png

After

content_area_after.png

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 */
}
 

Comments

User photo
Gvalentino

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.

August 10, 2012 11:46
User photo
Gretchen Jones de Bardales
emtrain2

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? 

October 30, 2012 07:53
User photo
Karl Simms
chameleonsupport

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

.green_box_top{
background-color: Your color }

.green_box_bottom{
background-color: your color}

These will change the forum block.

.grey_box_top{

background-color:your color}

.grey_box_bottom{ 

background-color: your color}

 

Hope this helps some what

November 22, 2012 07:50
User photo
Justin Seymour
Zendesk

Thanks, Karl! 

November 24, 2012 11:31
User photo
Carlos Canas
wattpad

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?

 

Thanks!

April 19, 2013 11:34
User photo
Anton de Young
Zendesk

Carlos, 

I explain how to do that in this tip: http://www.zendesk.com/blog/tip-of-the-week-making-css-customizatio...

April 19, 2013 11:38