Forums/Documentation/CSS cookbook (Zendesk Classic)

Customizing the top menu bar

Anton de Young
posted this on August 09, 2011 12:10

The top menu bar consists of the primary navigation for your Zendesk, a number of links for accessing frequently used actions such as opening a chat window, checking your views, and creating new tickets, and also the global Zendesk search. All of these elements can be customized with CSS.

The top menu bar consists of four primary elements:
  • The menu bar background
  • The main navigation for agents (the Home, Forums, Manage, and Settings menus) and end-users (Home, Forums, Submit a request, Check your existing requests)
  • The quick menu bar for agents (the Chat, Twitter, Recent, Views, and New menus)
  • The global Zendesk search

Compared to the other CSS examples in the Cookbook, the top menu bar is complex. If you want a better understanding of how it's structured, see Anatomy of the menu bar before reviewing the CSS code examples. If you're not interested in how it's built, you can follow the code examples below (CSS code) and simply plug in your colors.

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.

Community tip! Blue Mango shows you how to use JavaScript to add a tab to the top menu bar!

Anatomy of the menu bar

The topmost container for the menu bar is a div called #top-menu-background.

top_menubar_background_before.png

The #top-menu-background div contains the Zendesk search, which is called #topquery.

top_menu_search.png

Nested within #top-menu-background is a div called #top-menu that contains the two sets of agent menus. On the left side of the menu bar, a div called #green contains the main agent navigation.

top_menu_green.png

The other set of menus is contained in a div called #gray.

top_menu_gray.png

The naming convention here corresponds to the default Zendesk color scheme.

All of these elements, with the exception of #gray, are interrelated in that to successfully customize the top menu bar and the drop down menus you need to change various style settings for each of them. The #gray div essentially sits on top of the menu bar and is therefore self-contained and is customized separately. Customizing the #gray menu will be described in a separate article.

Before

top_menu_before.png

After

top_menu_after.png

CSS code

Menus consist of many parts and there are many different states for some of those parts (active, inactive, hover, etc). Restyling menus can be very difficult. To make it simpler, you can ignore the structural complexity and just replace the color settings in the following CSS code with the colors of your palette.

/*** Code for formatting the top menu background, borders, and menu tabs ***/
 
/* Set the background color of the top menu bar */
#top-menu-background, #top form#topquery {
    background-color: #FF8800; /* orange */
}
 
/* Set the left border color of the tabs to the same color as the background */
ul#green.agent-tabs li.main {
    border-left: 2px solid #FF8800; /* orange */
} 
 
/* This code controls the positioning of the menu tabs.
*  No need to change anything here - just be sure to include it. */
ul#green.agent-tabs li.tab_home.first, ul#green.agent-tabs li.tab_home.first:hover, ul#green.agent-tabs li.tab_forums, ul#green.agent-tabs li.tab_forums:hover {
    border-left: 0!important;
    padding-left: 0!important;
}
 
/* Set the hover background color for the inactive (unselected) tabs */
ul#green.agent-tabs li.main:hover, ul#green.agent-tabs li.over, ul#green li.main:hover {
    background:#6F7866; /* gray */
}
 
/* Set the hover background color for the active (selected) tab */
ul#green.agent-tabs li.active:hover, ul#green.agent-tabs li.active.over {
    border-left: 2px solid #FF8800; /* orange */
    background:#6F7866; /* gray */
}
 
/*** Code for formatting the drop down menus (Manage and Settings) ***/
 
/* Set the drop down menu section labels (Business Rules and Sandbox) */
#green li.drop-header {
	color:#464646; /* dark gray */
	background-color: #F1F2E8; /* tan */
} 
 
/* Set the drop-down menu background and border color */
#green ul.menu-drop {
	border-color:#FF8800; /* orange */
	background-color: #F1F2E8; /* tan */
}
 
/* Set the drop-down menu list item text and background color  */
#green ul.menu-drop li a {
	background-color: #F1F2E8; /* tan */
	color: #6F7866; /* gray */
} 
 
/* Set the drop-down menu list item text and background hover color */
#green ul.menu-drop li a:hover {
	color: #FFFFFF; /* white */
	background-color: #FF8800;  /* orange */
}

This code also formats the menus in the end-user Web portal (Home, Forums, Submit a request, Check your existing requests) and the language selection drop down menu.

top_menu_language.png

 

 

 

Comments

User photo
Donna Knott
harrisgrant

Where can I find the article for customizing the #gray menu? 

September 20, 2011 02:34
User photo
Anton de Young
Zendesk

Donna,

I haven't pulled together a topic for the gray menu yet. However, it's pretty similar to the green menu. Here's some CSS code that covers some of the basics:

/*** TOP MENU BAR - GRAY DROP DOWN MENUS ***/

/* Set the drop-down menu background and border color */
#gray ul.menu-drop {
border-color: #727070;
background-color: #FFFFFF;
}

/* Set the drop-down menu list item text and background color */
#gray ul.menu-drop li a {
background:#FFFFFF;
color: #6F7866;
}

/* Set the drop-down menu list item text and background hover color */
#gray ul.menu-drop li a:hover {
background: #FFCD72;
color: #FFFFFF;
}

/*** VIEWS DROP DOWN MENU ***/
/*** The elements in #gray can be set separately ***/

/* Set the drop-down menu background and border color */
#gray #views-drop {
border-color: #727070;
background-color: #FFFFFF;
}

/* Set the drop-down menu list item text and background color */
#gray #views-drop li a {
background:#FFFFFF;
color: #6F7866;
}

/* Set the drop-down menu list item text and background hover color */
#gray #views-drop li a:hover {
background: #FFCD72;
color: #6F7866;
}

September 21, 2011 09:43
User photo
Donna Knott
harrisgrant

Hi Anton

This was great thank you, just copied into my widget and amended the colours from there. I still can't change the colour of the actual bar, we want the tabs to have black backgrounds and orange font. Is this possible at all or does it have to stay grey with white font? Or am I doing something wrong?

Any suggestions would be great.

Donna

September 23, 2011 07:07
User photo
Max McCal
Product Manager

Hi, Donna -

I took a look into this and found that I was able to adjust the background color and font colors on the individual options in this bar with some more specific IDs and Classes:

#gray li#twitter_menu, #gray li#chat_menu, #gray li.main.clazz.tab_recent, #gray li.main.clazz.tab_new, #gray li.main.clazz.tab_views {
background: #707070;
color: #6F7866;
}

You can see that I'm calling each one individually, which was the only way to adjust the color. Please give it a try!

 

Max

September 23, 2011 11:34
User photo
Donna Knott
harrisgrant

Thanks Max, worked like a charm :D

September 26, 2011 08:54
User photo
Hellen Allsop

Hi

I'd like to change the font colour of the top menu bar items (Home, Forums, Manage, Settings) - is there a snippet to do this that I can't find?

Thanks, Hellen

September 28, 2011 03:19
User photo
Max McCal
Product Manager

Hi, Helen -

Try these out to change the color of your text. I've set all of them to black in these examples, so you only need to adjust the hex code to update.

/* Set the font color of text in dropdown menu selections */
#top-menu ul#green.agent-tabs li ul.menu-drop li a {
color:#000000;
}

/* Set the font color of text in dropdown menu selections while with mouse over */
#top-menu ul#green.agent-tabs li ul.menu-drop li a:hover {
color:#000000;
}

/* Set the font color of menu items, i.e,. "Home," "Manage," etc. */
#top-menu ul#green.agent-tabs a {
color:#000000
}

/* Set the font color of the currently selected menu item */
#top-menu ul#green.agent-tabs li[class$="active"] a {
color:#000000
}

September 28, 2011 13:34
User photo
Hellen Allsop

Thanks Max - works a treat :)

September 29, 2011 05:43
User photo
Antti Merenvainio
haahtela

Hi

Is there a way to change the titles of the menu bar for end-users (Home, Forums, Submit a request, Check your existing requests)? I´d like to translate them into Finnish.

 

Thanks

Antti

 

October 04, 2011 03:38
User photo
Max McCal
Product Manager

Hey, Antti - We can't change text using CSS (it's only able to change style sheets, not the actual HTML elements that are being affected), but Zendesk Plus+ subscribers have a feature to allow end users to select additional languages, and you can customize the default language of your helpdesk as well. Language settings are contained on the Settings > Account > Localization menu. If you have questions, contact us at support@zendesk.com and we can walk you through it.

October 04, 2011 11:49
User photo
Sarah Crane Newman
sifteo

Hi Max and Anton,

Thank you for all of these! I'm trying these in a Sandbox, and I've set the widget to be open to all users, even those not logged in. When I'm logged in, it works like a charm. When I log out, the new background color for the menu bar is still there, but the updated font colors and hover colors aren't. Any thoughts about what's going on?

Thanks!

Sarah

November 04, 2011 13:57
User photo
Max McCal
Product Manager

Hey, Sarah -

The reason that your menu bar customizations worked for your agents, but not when you're logged out is that the selectors are actually slightly different when you're logged in. The options agents have in their menu are classed as .agent-tabs, whereas the same menu bar for end-users has different options, and is still ID'd as #green. If you're setting the text color for your agent tabs like this: 

#top-menu ul#green.agent-tabs a {
    color: #FFFFFF;
}

You need to also call out the end-user versions of the tab. You should be able to transform the above code like this:

#top-menu ul#green.agent-tabs a, #top-menu ul#green li a {
    color: #FFFFFF;
}

Let me know if that works out!

November 04, 2011 14:47
User photo
Sarah Crane Newman
sifteo

Thanks, Max, I think that's solved it!

November 04, 2011 15:22
User photo
ADIL Younes

Hi,

I want to put the Top menu bar vertically, how I can do ?

Thanks

December 21, 2011 03:13
User photo
Max McCal
Product Manager

@ADIL Younes - 

If there's a way to re-orient the position of objects like that using CSS, I'm not aware of it. That would involved altering the HTML that actually determines the position of objects on the page. You might be able to make a change like that using Javascript widgets, but I don't really have the expertise to suggest a method personally.

December 21, 2011 09:28
User photo
Israel Vela
xal

Hi, I've been able to change the look of the menu bar for agents but it doesn't change for end-users. All I'm interested for the time being is background, border and drop-down menu. So, what I have is this:

* Set the background color of the top menu bar */
#top-menu-background, #top form#topquery {
background-color: #F59022; /* orange */
}

/* Set the left border color of the tabs to the same color as the background */
ul#green.agent-tabs li.main {
border-left: 2px solid #F59022; /* orange */
}

/* Set the drop-down menu background and border color */
#green ul.menu-drop {
border-color:#F59022; /* orange */
background-color: #ffffff; /* white */
}

I'm not sure if this is already answered but I have been able to figure out what I need to add in order for this settings to apply to end-users. Any help would be greatly appreciated

January 22, 2012 02:12
User photo
Jill Kaselitz
Zendesk

Hi, Israel -

It sounds like you'll need to change who your custom CSS widget is available for. You'll want to select Anyone, Including people who have not logged in as seen in the attached screenshot. Please let us know if this doesn't resolve your request.

January 25, 2012 10:19
User photo
Israel Vela
xal

Jill, you are totally right. Forgot to take that into account. Now it works as desired. Thanks!

January 25, 2012 17:16
User photo
Jacob Doogie Thomas

I have customized heaps of the CSS code in my Zendesk accounts but have run into a roadblock. I can't seem to make the grey menu twitter or chat hover colour change from the deep grey that is the default. Also, i cant make the font color in the twitter menu, the recents menu change for the ticket ID or requester name. These are the last few issues i need to work out to get my customizations completed.

February 17, 2012 23:22
User photo
Corey Harrington

I havent been able to find out how to change the color of the tab thats selected, instead of it turning the default white.

Any help with this? I want it to be a light greyish when selected.

May 09, 2012 15:28
User photo
Sara Menefee
Zendesk

@Jacob Doogie Thomas: 

If you want to make adjustments to the Gray menu (containing Chat, Twitter, etc) you can use the following CSS in a custom Global CSS widget. Obviously, make changes to colors as you see fit.

/* Set the background for Recent, Views, Twitter, Chat and New */
ul#gray, #gray li#twitter_menu, #gray li#chat_menu, #gray li#phone_menu {
background-color: #87CEFA; /*skyblue */
}

/* Set font color for Views, Recent and New */
#gray li a.tab {
color: #FFFFFF !important;
}

/* Set background for hovered over gray menu items */
ul#gray li:hover, #gray li#twitter_menu:hover, #gray li#chat_menu:hover, li#phone_menu:hover {
background-color: #FFB6C1 !important; /* cottoncandypink */
}

/* Color of ticket numbers and requester names for Recent */
#gray div.r_n, #gray span.id, ul#gray li.drop-header {
color:#000000;
}

/* Set the drop-down menu background and border color */
#gray ul.menu-drop {
border-color: #2734B1;
background-color: #FFFFFF;
}

/* Set the drop-down menu list item text and background color */
#gray ul.menu-drop li a {
background:#FFFFFF;
color: #000000;
}

/* Set the drop-down menu list item text and background hover color */
#gray ul.menu-drop li a:hover, #gray ul.men-drop a.on:hover {
background-color: #FFFFFF !important;
color: #87CEFA; /*skyblue */
}

Hope this works as a solution for you. 

May 09, 2012 17:07
User photo
Corey Harrington

no I mean the left side of the bar. When you select one of the options like "knowledge base" the section turns white, so all you can see is the text. I want to change this so that it stays a solid color. I don't believe this has been touched on. We have our gray menu the way we want it.

May 09, 2012 17:25
User photo
Max McCal
Product Manager

Hey, Corey - 

That reply was meant for the poster before you. We're still looking into a solution for you and will get you something soon!

May 09, 2012 17:26
User photo
Corey Harrington

I figured it out. Thanks though.

May 10, 2012 09:38
User photo
Roland Monsegu

Hi,

I need a link back to my website. Can I had a tab on the top-menu bar with a link to external website?

May 14, 2012 11:35
User photo
Max McCal
Product Manager

Hey, Roland

You could add a tab to that menu bar using Javascript, but that goes outside the scope of what CSS is capable of. CSS is only able to change the style of existing elements; it has no ability to alter the structure of HTML or add or remove content. 

May 14, 2012 11:47
User photo
Paul Emery
itslearning

Hi

I've made a lot of changes to make the system look like our other sites but i have a couple of small things I just can't get to work how I want.

1. The bottom corners of the menu bar have rounded edges can I get rid of these to have square corners?

2. Above the menu bar and below the header there is a small white line that i can't get rid of.  I can see any bit of code that is responsible for it but I must have something wrong somewhere, any ideas?

I've added a picture

July 05, 2012 04:15
User photo
Dave Dyson
Zendesk

Hi Paul -

Both of these can be set with Global CSS widgets; you'd want to set them to viewable by "Anyone", of course:

1. #top-menu-background, .menu-drop { -webkit-border-bottom-left-radius:0px; -webkit-border-bottom-right-radius:0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; }

2. #header { margin-bottom:0px; }

That should do it!

July 06, 2012 11:15
User photo
Pcava
clickcertain

how would I adjust the height of the top menu?

July 18, 2012 18:31
User photo
Anton de Young
Zendesk

Pcava,

The outermost container for the top menu bar is top-menu-background. The default height is 26px, as shown here:

#top-menu-background {height26px;}
However, you'd need to also resize the elements within the top menu bar to match (the green and gray menus for example). That's probably one of the trickier customizations to make. 
July 20, 2012 10:50
User photo
Pcava
clickcertain

Thanks! I wish there were a guide somewhere with a list of CSS tags for each element. Obviously it's doable, since Zendesk's actual implementation of Zendesk has a much more customized UI, including the menu, which looks more like what we'd like ours to look like (larger menu items, larger search field, etc.)

July 20, 2012 11:09
User photo
Anton de Young
Zendesk

Pcava,

You can always discover exactly how the page is structured and the elements within it by using a tool like Google Chrome's Inspect Element. Just hover over the part of the page you want to customize and then right-click and select Inspect Element. You can then see the structure and the CSS that is being used to format the elements. 

July 20, 2012 11:20
User photo
Acole

I set the top menu bar to have a blue background and white text - it works in the agent view but not in the enduser view, it sets the text to black.

/* Set the font color of menu items, i.e,. "Home," "Manage," etc. */
#top-menu ul#green.agent-tabs a {
color:#FFFFFF

I set the currently selected menu item to show up as light grey again - it works in the agent view but not in the enduser view, it sets the text to black.

/* Set the font color of the currently selected menu item */
#top-menu ul#green.agent-tabs li[class$="active"] a {
    color:#A8A8A8  /* light gray */

All else is working just fine, Assistance would be appreciated.

August 06, 2012 10:20
User photo
Max McCal
Product Manager

@Acole - 

The names of the elements are different for end-users than they are for agents. I usually use two different browsers so I can compose my CSS in one while I browse as an end-user in the other. I think this change should do it for you:

/* Set the font color of menu items, i.e,. "Home," "Manage," etc. */
#top-menu ul#green.agent-tabs a, ul#green li a.tab {
color:#FFFFFF

/* Set the font color of the currently selected menu item */
#top-menu ul#green.agent-tabs li[class$="active"] a, #top-menu ul#green li[class$="active"] a {
 color:#A8A8A8  /* light gray */

Let me know if that helps!

August 06, 2012 11:12
User photo
Acole

Max - Thanks, your suggestions worked like a charm.

August 07, 2012 03:25
User photo
Tara Cotter

How can I remove the 'submit a request' and 'check your existing requests' tabs from the top menu?

 

Alternatively, can I redirect them to another zendesk account?

August 24, 2012 12:08
User photo
Joe
Zendesk

Tara,

You can hide those buttons with a CSS widget like this:

.tab_new {display:none;}
.tab_requests {display:none;}

People often want to hide those buttons for anyone who is not logged in, and show them again for logged in users. You can achieve this by setting the first widget (above) to be "Available for: Anyone, even users who are not logged in", and setting the following widget to "Available for: People who have logged in".

.tab_new {display:inline !important;}
.tab_requests {display:inline !important;}

 

Changing the destination of the links to another Zendesk account (or elsewhere) is a bit trickier, but you can use a JavaScript widget like the following:

$j('li.tab_new').html('<a href="https://otheraccount.zendesk.com/anonymous_requests/new" class="tab">Submit a request</a>');
$j('li.tab_requests').html('<a href="https://otheraccount.zendesk.com/requests" class="tab">Check your existing requests</a>');

The catch with this is that you are switching out the content of the button, so you must insert the modified content. Then make sure you set the widget to "Available to: People who are not agents". That way it won't affect the agent buttons.

I hope that helps, let us know if you run into additional issues.

August 24, 2012 16:06
User photo
Tara Cotter

Thanks Joseph, that's just what I needed!

August 27, 2012 10:20
User photo
Andrew Niesen

I'd like to make the "home" link in my ZenDesk account go to my main website instead of my customer support portal (ZenDesk) - is that possible?

September 07, 2012 20:57
User photo
Justin Seymour
Zendesk

Hey Andrew: 

Create a Global Javascript widget and drop in the code below. Just change change the URL for a href and edit the home tab text if needed. 

Event.observe(window, 'load', function() { 
if ($$('#top-menu #green .tab_home')[0]){ 
$$('#top-menu #green .tab_home')[0].update('<a href="http://YOURSITEHERE.com" class="tab">HOME BUTTON TEXT</a>'); 

});
September 10, 2012 06:10
User photo
Camile Branin

Corey, in the above thread asked a question that I'm struggling with as well, but it was never answered... I haven't been able to find out how to change the color of the tab that's selected, currently the default is white. This is on the left hand side of the nav bar. When you select one of the options like "knowledge base" the section turns white, so all you can see is the text. I want to change this so that it stays a solid color. Also, how can I change the text color of the main nav tabs like "knowledge base"? Thanks!

September 20, 2012 21:51
User photo
mummii

I havent been able to find out how to change the color of the tab thats selected, instead of it turning the default white.

Any help with this? 

October 03, 2012 00:32
User photo
Justin Seymour
Zendesk

Hi Mummii: 

I think you're looking for this: 

/* Set the hover background color for the active (selected) tab */
ul#green.agent-tabs li.active:hover, ul#green.agent-tabs li.active.over {
    border-left: 2px solid #FF8800; /* orange */
    background:#6F7866; /* gray */
}
 
October 03, 2012 07:30
User photo
mummii

Thanks Justin.  I tried this but it didn't work.  It still remains white.  Any other suggestions?

October 21, 2012 01:21
User photo
Marilenis Olivera Lee
I have the same question as Corey and Mummii, it will be nice to change the background color of the active menu item (on the left menu with options home forums manage settings). It currently stays white when is active (after user hovers and clicks on it). I've tried changing the white color on a few places, including the one mentioned above by Justin but it doesn't work. Any help will be greatly appreciated!!
October 26, 2012 23:12
User photo
Marilenis Olivera Lee

Here us the code that worked for me Mummii:

ul#green.agent-tabs li.active {
    border-left: 2px solid #404040; /* dark grey */
    background: yellow;   
}

Change "yellow" to the color you want for the background when the menu item is selected (or active). Hope it helps!

 

October 26, 2012 23:21
User photo
Marilenis Olivera Lee

After making the change to get rid of the white background color for the active menu item (mentioned on previous post), I encountered the following issue:

- The vertical separators on both sides of the active menu disappear. I have been playing with the code for a while and looking at the source css with Chrome Inspect Element.. but haven't been able to figure this one out (Will be nice to have separators on both sides of the active menu item!).

Another issue with the same item (menu active) is that the color of the text turns Black, have been trying to modify this one but I'm out of luck.

An image of this behavior is attached.

If you guys can provide some help, that will be great!

 

Thanks in advance

Marilenis

October 27, 2012 00:36
User photo
David Okner
Zendesk

Dear Marilenis,

Please open a ticket at support.zendesk.com so we can do our best to help with your issue.

Thanks!

Cheers

David

November 05, 2012 15:01
User photo
Gediminas
gameanalytics

How do I remove this nonsence?

#top-menu li:hover + li {}

Why you even did like this, Zendesk?

December 13, 2012 07:34
User photo
Justin Seymour
Zendesk

You won't be able to remove the elements, unfortunately. You can style them, though!

December 13, 2012 07:44
User photo
Shirley

Howdy.  How do you redirect the "Submit A Request" menu button to redirect to the support pop up box that the Support Tab opens? Basically the pop up box the black support tab on the right side of this page opens. 

 

Also, how do I add a search bar into the menu bar like the picture in "Anatomy of a Menu Bar" shows?

February 13, 2013 15:57
User photo
Justin Seymour
Zendesk

Hey Shirley: 

You'll need to drop this bit of code into a Global JavaScript widget from Settings → Extensions. You can modify the areas in bold. To redirect to your feedback tab, you'll want to edit the text after href=" and input your tab URL. To get your tab URL, see Using a hyperlink instead of a tab in this article

$j('li.tab_new:contains(Submit a request)').replaceWith('<li class="main clazz tab_new"><a class="tab" href="/anonymous_requests/new">Submit a request</a>');
February 20, 2013 05:26
User photo
Venkat

i am trying to customize the home page menu bar to drop-down and edit the existing content. Its possible right? if yes could you please assist me with this..!?

Thanks in advance.

March 17, 2013 23:03
User photo
Anton de Young
Zendesk

Venkat, 

Not sure what you mean. Does this article not cover what you want to do with the menu bar? 

March 18, 2013 08:33
User photo
Venkat

Hi Anton,

I have found what i was searching for. I was trying to add few menu tabs and make those tabs into drop-down menu. This was mentioned in community tips and i skip it earlier.

Thank you.

March 18, 2013 22:51
User photo
Alexandre Steinberg
rsdb

Hi there!

Is there any way to keep the word formatting (upper/lowercase) on top menu?

We would like that our top menu display "Home | Forums..." instead of "HOME | FORUMS..."

Thanks!

May 10, 2013 12:55
User photo
Anton de Young
Zendesk

Alexandre, 

Yes. Use this code: 

#top-menu a.tab {

	text-transform: capitalize;
}

 

May 10, 2013 13:29
User photo
Alexandre Steinberg
rsdb

Thanks, Anton! Worked perfectly.

I learned that it is possible to change the top-menu height, but how may I keep the content vertically centralized?

Regards!

May 10, 2013 13:50
User photo
Support

Anton, That code didn't work to 'uncapitalize' Why would you add "capitalize" when I'm trying to undo this? Basically, all I want is to have text as is--neither uppercase, nor lowercase. Capitalized first letter only (Home, Forums...).

Undoing Zendesk CSS is proving more challenging than creating from scratch.

June 11, 2013 12:53
User photo
Anton de Young
Zendesk

Support,

Of course I have no idea what you're trying to do until you ask. There are many possibilities when customizing with CSS. Keep in mind as well that this is all standard CSS. The only thing that is proprietary is the names of the UI elements in our interface. You may want to refer to the CSS Reference to better understand what you can do and how. As for capitalize... it does exactly what you want. Sets the first letter as a cap then the rest as lowercase. For your reference: http://www.w3schools.com/CSSref/pr_text_text-transform.asp

 

June 11, 2013 13:47
User photo
Dylan Reichstadt

Is there source code available for the actual drop down effect? I can't find anything specific as to writing the javascript on the drop downs in a Zendesk javascript extension.

June 26, 2013 20:06
User photo
Laura D.
Zendesk

Hi Dylan, 

From what we can tell (I checked with one of our CSS/HTML experts) the menu behavior is actually something that's being done server side, which makes it inaccessible. It's possible with the next version of the forums (in progress now) that may not be true but I don't have a way to check. I hope you're able to achieve most of what you need!

July 10, 2013 09:49
User photo
chris
plexustechnology

Hi... Im having a difficult time determining what selector is placing the little gray vertical lines in between the main nav menu items on the customer portal.  My hover changes are making them disappear, and I also need to move them down a bit.  Can you point me in the right direction?   Thank you kindly.

July 19, 2013 09:45
User photo
Jennifer Rowe
Zendesk

Hi Chris,

I think Jake answered your question in another forum, right? Let us know if you need anything else!

July 19, 2013 10:14
User photo
chris
plexustechnology

No this is a different question...  the other one was dealing with the js/ css to remove the home tab and flashing caused by a custom js code.    The question above I am asking about the vertical lines in between the main nav items...  "home"   |   "submit a request"   |   "check your existing requests".    I can't find the selectors in firebug or in the stylesheet that is putting these in there.   if you go to our web portal at plexustechnology.zendesk.com  you will see that they flash on hover and selected, and are too high.  I also shifted the nav to the right and removed the home tab so the first one is unnecessary.    Thanks as always for the prompt response.

July 19, 2013 10:27
User photo
Jennifer Rowe
Zendesk

Oh, sorry about that! I was reading too fast, I guess. :)

Our community lead is looking into this and will get back to you.

Thanks!

July 19, 2013 11:29
User photo
Laura D.
Zendesk

Hi Chris, 

I checked with one of our CSS experts and she found that the little bars are coming from the background. Use this code to hide them: 

li.main {
background: none;
}

July 19, 2013 13:38
User photo
chris
plexustechnology

Thanks Laura and Jennifer...  knowing that selector let me move the lines downward and keep them visible on hover.  Thank you for your quick responses... I am amazed at the speed of your helpdesk :)

for anyone else looking to change this:

li.main {

url("/images/menu.png") no-repeat scroll 0 -78px transparent;

}

that is the original positioning of it, so if you change the height of the header they wont line up anymore, and if you follow the tutorial on changing the hover elements, the background of the hover will override this image unless you include the above line in the hover too.

July 19, 2013 19:27
User photo
Jennifer Rowe
Zendesk

Thanks, Chris. Glad you got what you needed! And thanks for sharing the info here.

July 22, 2013 13:13
User photo
Kevin Kurvers
bctsupport
Hey, i would like to change the text "Submit a request"' but i can't find how to do that. Can you help me?
August 07, 2013 03:42
User photo
Dylan Reichstadt

@Kevin Kurvers:

Try:

$j("h2:contains(Submit a request)").replaceWith("<h2>new text of your choice</h2>");

 

Source: https://support.zendesk.com/entries/20004571-Edit-Submit-a-Request-...

August 07, 2013 10:58
User photo
Rupert Harwood
clustrix

Hello Zendesk Support,

I am hoping you can help me out here. I am trying to extend the menu and header colors to the edge of the browser window, with out moving the buttons. I have managed to extend the menu bar, but it puts the buttons at the very edge of the screen and I dont want that.

Please note that I have the menu bar hidden with some of the code here:

/* Hide the Zendesk logo and help desk title text */
#table_header {
display: none;
}

/* Increase the size of the header, add a logo, set background color */
#header {
height: 50px;
background-image: url(https://foo);
background-repeat: no-repeat;
background-position: top left;
background-repeat: no-repeat;
background-color:#444444;
}

November 07, 2013 16:12
User photo
Devon Mahnken

Hi, I would like to know if there is a way to increase the width of the menu bar and then also increase the font size to match the increased width? Thanks in advance.

February 21, 2014 08:04