Customizing the sidebar

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

Have more questions? Submit a request

Comments

  • Avatar
    Maya Shoval

    Cool!
    Is there a way to add a thick border to the sidebar (which will be colored) while keeping the background itself white?

  • Avatar
    Anton de Young

    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. 

  • Avatar
    Maya Shoval

    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!

  • Avatar
    Anton de Young

    Happy to help. 

  • Avatar
    Christopher Gilene

    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!

  • Avatar
    Max McCal

    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.

  • Avatar
    Christopher Gilene

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

  • Avatar
    Max McCal

    Glad it worked out! 

  • Avatar
    ReeseMcBlox

    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?

  • Avatar
    Richard Campbell

    @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

  • Avatar
    ReeseMcBlox

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

  • Avatar
    Rich Warren

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

  • Avatar
    Justin

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

  • Avatar
    Jonathan Semones

    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.

  • Avatar
    Luiz Teixeira

    How about the left sidebar? Is there a way to add shortcuts to the left sidebar, just below Views and Search?

  • Avatar
    Justin Graves

    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.

  • Avatar
    Jonathan Semones

    @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.

  • Avatar
    Justin Graves

    @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

  • Avatar
    Luiz Teixeira

    @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... :)

  • Avatar
    Justin Graves

    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.

  • Avatar
    Andrew Moore

    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

  • Avatar
    Richard Campbell

    @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.

  • Avatar
    Richard Campbell

    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;

    }

  • Avatar
    Anton de Young

    Richard, thanks for helping Andrew with his question. 

     

  • Avatar
    Andrew Moore

    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.

     

  • Avatar
    Richard Campbell

    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;

    }

  • Avatar
    Andrew Moore

    Thanks Richard,

    That did it

     

  • Avatar
    Gauri D

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

    Thanks,

    Gauri

  • Avatar
    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.

  • Avatar
    Laura D.

    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

Please sign in to leave a comment.