Forums/Documentation/CSS cookbook (Zendesk Classic)

Customizing the sidebar

Anton de Young
posted this on July 13, 2011 12:00

The sidebar contains tips on using features of the page (what we call the Help widget), links to related features, and any other widgets you add to your pages.

This example describes how to do the following CSS customizations:
  • Set the background color of the sidebar
  • Set the font color of the body text
  • Set the hyperlink color
  • Set the font color of the heading

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

sidebar_before.png

After

sidebar_after.png

CSS code

The code in this example sets the background color and text properties of all elements in the sidebar.

/* Set the background color of the sidebar */
.side-box-content, .blue_box_top, .blue_box_bottom, .side-box-with-image, .r_blue {
	background-color: #FFFFE1; /* pale yellow */
}
 
/* Set the body text font color */
.side-box-content, .side-box-content .user_formatted {
	color: #333333; /* dark gray */
} 
 
/* Set hyperlink font color */
.side-box-content a, #sidebar .widget a, #widget_manager_widget a {
	color: #669900; /* green */
} 
 
/* Set heading (h3) font color */
.side-box-content h3, #sidebar .widget h3, #widget_manager_widget h3 {
	color:#FF8800; /* orange * /
}

This code also applies to the widget manager:

sidebar_widget_manager.png

 

Comments

User photo
Maya Shoval
soluto
Cool! Is there a way to add a thick border to the sidebar (which will be colored) while keeping the background itself white?
August 18, 2011 09:00
User photo
Anton de Young
Zendesk

Maya,

Sure. Here's one way to do it.  

.blue_box_top, .blue_box_bottom {
   visibility: hidden;

.side-box-content, .side-box-with-image, .r_blue {
   background-color: #FFFFFF;
   border: 3px solid red; /* Set the border thickness and color to whatever you want */
   border-radius: 5px;

That example hides the top and bottom divs that are used to provide rounded corners. Then, rounded corners are added to the content containers via CSS. Doing it this way means that the spacing between the sidebar content pods increases a bit because the top and bottom div were hidden, which probably isn't a problem for you. Add the code and look at a page with more than one sidebar pod - like Manage > People. 

You could also do it this way:

.blue_box_bottom {
   background:none;
   background-color: #FFFFFF;
   border-bottom: 3px solid red;
   border-left: 3px solid red;
   border-right: 3px solid red;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}

.blue_box_top {
   background:none;
   background-color: #FFFFFF;
   border-top: 3px solid red;
   border-left: 3px solid red;
   border-right: 3px solid red;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

.side-box-content, .side-box-with-image, .r_blue {
   background-color: #FFFFFF;
   border-left: 3px solid red;
   border-right: 3px solid red;
}

This pieces together all the existing divs to create a border around all of them. In other words, not hiding the top and bottom divs. There may be a better way to do this. I haven't achieved CSS mastery yet. 

Let me know if it works for you. 

August 18, 2011 10:35
User photo
Maya Shoval
soluto
Thanks Anton, you're awesome! The first option was exactly what I needed, just adding padding and changed the border radius so it'll look like something already available on our website. Thanks!
August 18, 2011 11:30
User photo
Anton de Young
Zendesk

Happy to help. 

August 18, 2011 14:38
User photo
Christopher Gilene
roic

Anton, can you advise where exactly this CSS code example goes to change the color and shape of the widget? When I follow your example, the code actually gets displayed inside the original widget!

October 12, 2011 12:13
User photo
Max McCal
Product Manager

Hey, Christopher -

Are you adding the code to a Custom Widget instead of a Global CSS widget? If you were adding the CSS code to a custom widget, it would appear in the widget on the sidebar, whereas if you are adding it to a CSS widget, it should affect the style sheets of the sidebar, rather than appear there. Let me know and I'll be happy to help.

October 12, 2011 12:19
User photo
Christopher Gilene
roic

Ta dow! That was it Max, I was trying to edit the wrong type of widget... thanks for your help.

October 12, 2011 12:52
User photo
Max McCal
Product Manager

Glad it worked out! 

October 12, 2011 12:53
User photo
ReeseMcBlox
roblox

In the sidebar box of a ticket, for the Requester, is there any way to change just the User Notes text? Our agents complain they never notice the notes and it sometimes causes problems. We want to make the User Notes BIG and Blinking! (joking about the blinking). Or, do we have to change all the text on the whole sidebar?

January 12, 2012 13:51
User photo
Richard Campbell
allsopconsulting

@ReeseMcBlox: We use a CSS widget to obtain this. Something like:

div[id*='users-'][id*='-show']:not(:empty) {

font-style: italic;
border: 2px solid red;
}

You can also replace the word 'users' with 'organizations' if you want the same applied to organization notes.

Hope it helps,

Richard

August 22, 2012 04:31
User photo
ReeseMcBlox
roblox

Thank you Richard! That was exactly what we needed to know.

August 22, 2012 09:50
User photo
Rich Warren
life4diabetes

Anyway to add a sidebar to the left side as well?  Sidebar on each side?

January 11, 2013 14:46
User photo
Justin Seymour
Zendesk

Not to my knowledge, Rich. Maybe somebody else has some code to share. 

January 14, 2013 07:06
User photo
Jonathan Semones
lucity

Is there a way to change the background of one box on the sidebar without changing the others?  I want one of them to stand out.

April 23, 2013 10:41
User photo
Luiz Teixeira
unexonline
How about the left sidebar? Is there a way to add shortcuts to the left sidebar, just below Views and Search?
April 23, 2013 19:23
User photo
Justin Graves
ensign

Luiz- You can add left sidebar icons that will link to whatever you like.  Just go to admin (the gear icon in the lower left) > then in the Apps section click on Browse > then in the ALL APPS section mouse over Sidebar Icon and click the grey button that says "Install" or "Install Another" > then fill in the fields:

  • iframe URL = the website you want to link to
  • Inactive Icon URL = a URL to an image you want to see when the mouse is NOT hovering over the icon
  • Hover Icon URL = a URL to an image you want to see when the mouse IS hovering over the icon
  • Selected Icon URL = a URL to an image you want to see when the icon has been clicked
  • Title = a name for your Sidebar Icon.  No one will see this except for you in the Installed apps page by the way.  It's just so that you can identify this Sidebar app.
Hope this helps.
May 08, 2013 08:53
User photo
Jonathan Semones
lucity

@Justin, I know the point of the left sidebar is to open stuff within Zendesk  but is there a way to force that app to launch the page in a separate window?  I tried adding target="_blank" but it ignored that.

specifically i am trying to add a couple quick links that our agents use alot o the left side.  I want these to appear on the left so they can use them without editing a ticket.

Currently the page i'm trying to load starts to open within zendesk, then reloads without the zendesk page, which means I have to reopen zendesk.

May 10, 2013 08:39
User photo
Justin Graves
ensign

@Jonathan - Unfortunately, that's not an option right now but I totally get where you're coming from.  I have added a feature request for this so if you and others give it a thumbs up and plead your case, maybe ZD will make it a reality.

https://support.zendesk.com/entries/23760393-I-wish-left-sidebar-links-could-open-in-a-new-browser-window-tab

May 10, 2013 08:50
User photo
Luiz Teixeira
unexonline

@Justin - Thanks for this information. I remember, however, that during my Zendesk training, the trainer added 'stuff' to the left sidebar using a different method, which did not involve displaying content in a frame. I think it involved CSS or something. I should have paid more attention... Oh, well... :)

May 10, 2013 08:57
User photo
Justin Graves
ensign

Sorry for the confusion everyone.

I think this article might need to be "forked" because some people are talking about the "web portal" and some are talking about the "agent interface".  They are essentially two totally separate websites and the rules of one don't apply to the other (mostly).

Johnathan and I were talking about the agent interface but this article was originally about the web portal.

For clarity, the web portal can be customized to show almost anything if you know enough css, html and java.

But the agent interface is extremely limited in what it can show and how it will show it.  As far as I know, we are not able (yet) to customize the CSS in the agent interface.

Hope that helps.

May 10, 2013 09:34
User photo
Andrew

Is there a way to change the font color of the widget heading in one box on the web portal sidebar without changing the others?  Still working out this CSS stuff

May 21, 2013 16:47
User photo
Richard Campbell
allsopconsulting

@Andrew Yes, as long as you can work out the CSS selector for it (each widget seems to get a unique id). As an example, this would change the font-heading in our 'Knowledge Base' widget:

#widget_20346728 h3 a {

  color: #f00 !important;
}
I use the !important flag to make sure it overwrites any other CSS rules which may be implied in the default Zendesk configuration.
May 22, 2013 01:25
User photo
Richard Campbell
allsopconsulting

Looks like somehow my CSS text in the comment is now white! Here's (hopefully) it in black: 

#widget_20346728 h3 a {

  color: #f00 !important;

}
May 22, 2013 01:26
User photo
Anton de Young
Zendesk

Richard, thanks for helping Andrew with his question. 

 

May 22, 2013 08:26
User photo
Andrew

Thanks Richard,

I created a CSS widget with the code (just changed the id and colour code):

#widget_20873591 h3 a {

  color: #C61A22 !important;

}

 

I have made this available for "Anyone, including people who have not logged in " but nothing seems to change. Is there something obvious that i'm not doing. I have triple checked to make sure that the id is correct.

 

May 22, 2013 15:26
User photo
Richard Campbell
allsopconsulting

If the widget is a custom one you have created, the heading is unlikely to be a link. Try removing the 'a' selector and see if it works:

#widget_20873591 h3 {

  color: #C61A22 !important;

}

May 23, 2013 04:44
User photo
Andrew

Thanks Richard,

That did it

 

May 23, 2013 16:32
User photo
Gauri D
pchelpdesk

Is it possible to have the background color set to one and then change it when you hover over the widget? 

Thanks,

Gauri

June 19, 2013 16:28
User photo
Thamara Dhanushka

Hi

I have added a new Forum widget. it show's as "Not used" in my Active widgets list.  Also it's not display in web portal. Please help how to display this widget in web portal.

Active widgets

TestWidget         Not used      Forums                  deactivate | edit

Thanks.

November 07, 2013 05:07
User photo
Laura D.
Zendesk

Hi Thamara, 

I'm not able to find your account based on your email address so I'm unable to look at this specifically, if you can let me know what your subdomain is I can try. I'm also a little confused since from screenshots in some of your other comments it looks like you're on Help Center which doesn't use widgets quite like Web Portal. This particular guide is for the Classic Web Portal; for Customizations related to Help Center you'll want to reference the documentation in our Help Center forum

November 08, 2013 09:42