Forums/Documentation/CSS cookbook (Zendesk Classic)

Source code for CSS customization examples

Anton de Young
posted this on August 09, 2011 15:56

Here is the complete CSS file for our MondoCAM demo and training account. It includes the code used in the Cookbook examples in this forum. You may find some slight differences in the code in this file when compared to the Cookbook topics. This is because this is the final product, not steps along the way.

This simple customization makes minor changes to the page layout and also changes font settings and the background colors of many of the elements in your Zendesk. Feel free to use this to start your own customization.

Updated: 8/9/2011

/*** MondoCAM CSS customization ***/
 
/* COLORS:
 * Most of the colors in this CSS are Hex. 
 * You can use Hex, RGB, or simple named colors such as 'blue'
 * 
 * Header background: #6F7866 - medium gray green
 * Page background: #2E3B3B - dark gray
 * Top menu bar background: #FF8800 - orange
 * Top menu drop down list items: #6F7866 - gray 
 * Top menu drop down list hover highlight: #FF8800 - orange
 * Top menu drop down list background: #F1F2E8 - tan
 * H1, H2, H3 color: #6F7866 - gray
 * Sidebar background: #FFFFE1 - pale yellow
 * a links within the content area and sidebar: #669900 - green
 * Misc highlight color: #FFCD72 - light orange
 * Misc body text: #333333 - dark gray
 * Misc fonts: #FFFFFF - white
*/
 
/*** REPLACE THE ZENDESK HEADER ***/
/*** You also need to add a JavaScript widget to the help desk 
 * to create a link to the home page. This is described in
 * https://support.zendesk.com/entries/20263417-replacing-the-header-logo-and-title
 */
 
/* 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: 100px;
	/* Add the link to your logo with the next setting */
	background-image: url(http://LOCATION OF YOUR LOGO.com/your_logo.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-repeat: no-repeat;
	background-color:#6F7866; /* gray */
}
 
/* Setting the #top background color removes the
 * 1 px white line above the menu bar */
#top {
    background:#6F7866; /* gray */
}
 
/* Set the text properties of links in top-right 
 * User name, profile, help, login/logout */
#top-right, #top-right a, #top-right p {
    color:#FFFFFF; /* white */
    font-size:12px;
    font-weight:normal;
    margin:25px 0 0;
    text-shadow:0 2px 3px rgba(0, 0, 0, 0.5); /* This may not work with all browsers */
}
 
/* Change the hyperlink hover color of links in top-right */
#top-right a:hover {
	color:#FF8800; /* orange */
}
 
 
/*** SET THE PAGE LAYOUT ***/
/* This customization is described in:
 * https://support.zendesk.com/entries/20266856-setting-the-page-width-and-removing-the-page-border
 */
 
/* Set the width of the page */
/* If you want to constrain it
 * to a specific size. */
#page {
	margin: 0 auto;
	width: 1000px;
	max-width: 1000px;
	min-width: 1000px;
	position:relative;
	right: 2px;
	/* These two settings remove the white border next to the header. */
	padding-left:0px;
	padding-right:0px;
}
 
/* Set the minimum width of the frame */
.frame {
	min-width: 510px;
}
 
/* Add a border within the content container
 * to compensate for taking it away
 * in #page. */
div#container {
	padding-left:10px;
	padding-right:10px;
}
 
/*** FOOTER ***/
/* This example formats the footer to match
 * the page width set above and changes
 * text properties. 
 * Customizing the footer is described here:
 * https://support.zendesk.com/entries/20264367-customizing-the-page-footer
 */
 
/* Set the footer width to match the page width */
#footer {
	margin: 0 auto;
	width: 1000px;
	max-width: 1000px;
	min-width: 1000px;
}
 
/* Set the footer text hyperlink color */
#footer a {
	color: #FFFFFF; /* white */
}
 
/* Set the footer text hyperlink hover color */
#footer a:hover {
	color: #FFFFFF; /* white */
}
 
/* Center the footer text and add a drop shadow
 * to the text. */
#footer p {
	text-align: center;
	color:#FFFFFF; /* white */
	margin:25px 0 0;
	text-shadow:0 2px 3px rgba(0, 0, 0, 0.5); /* This may not work with all browsers */
}
 
/* If you want to completely hide the footer, here's the code */ 
/* #footer {
	visibility: hidden;
}
*/
 
/*** TOP MENU BAR ***/
/* This customization is described in:
 * https://support.zendesk.com/entries/20348113-customizing-the-top-menu-bar */
 
/*** 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 */
}
 
/*** CONTENT AREA BACKGROUND COLORS ***/
/* This examples sets the background colors for
 * the content containers of the help desk. 
 * Details about this customization are here:
 * https://support.zendesk.com/entries/20336093-changing-the-content-area-background-color */
 
/* 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;
}
 
/* Set the background color for content_green */
.content_green, .green_box_top, .green_box_bottom {
	background: #FFFFE1; /* pale yellow */
}
 
/* Set the background and border of the forum headings */
div.category-header {
	background-color: #F1F2E8;
	border-bottom: none;
}
 
/*** CONTENT AREA FONT SETTINGS ***/
/* This code sets the font size and color for headings
 * and hyperlinks used in the content area.
 * This is described in more detail here:
 * https://support.zendesk.com/entries/20271007-changing-the-font-settings-of-the-main-content-area */
 
 
/* Set the default content hyperlink color */
.content a {
	color: #669900; /* green */
} 
 
/* Set the font color of the Edit link */
.content a.edit_this, #search-result a.edit_this {
	color: #669900; /* green */
}
 
/* Set the font color of the Action link */
.category-top-right .edit_this, .floating_menu_ui .floating_menu_action {
	color: #669900; /* green */
}
 
/* Sets the font color of misc links */
span.link, p.link {
	color: #669900; /* green */
}
 
/* Set h2 heading size and color */
.content h2, .content h2 a {
	font-size: 20px;
	color:#6F7866; /* gray */
}
 
/* Set h2 heading hover size and color */
.content h2 a:hover {
	font-size: 20px;
	color:#669900; /* green */
	text-decoration:underline;
}
 
/* Set the h3 heading font color */
.frame h3 {
    font-size: 18px;
    color: #6F7866; /* gray */
    font-weight: normal;
} 
 
/*** FORUMS ****/
/* This code formats the headings and hyperlinks
 * in the forums content. This customization is described
 * here: https://support.zendesk.com/entries/20345373-formatting-the-forum-content-headings */
 
/* Set the formatting for .frame.colums */
/* This is the container for forums */
 
/* Set category heading size and color */
.content .frame.columns h2, .content .frame.columns h2 a {
	font-size: 20px;
	color:#6F7866; /* gray */
}
 
/* Set category heading hover size and color */
.content .frame.columns h2 a:hover {
	font-size: 20px;
	color:#669900; /* green */
	text-decoration:underline;
}
 
/* Set the font color of h3 active links */
.content .frame.columns h3, .content .frame.columns h3 a {
	color: #6F7866; /* gray */
} 
 
/* Set the font hover color of h3 active links */
.content .frame.columns h3 a:hover {
	color: #669900; /* green */
	text-decoration:underline;
}
 
/* Set the hyperlink color for the forums */
.content .frame.columns a {
	color:#669900; /* green */
}
 
 
/*** TICKETS TABLE IN ZENDESK CLASSIC AGENT INTERFACE ***/
/* This code customizes the tickets table in the agent interface of Zendesk Classic.
 * Described here: https://support.zendesk.com/entries/20273691-customizing-the-tickets-table */
 
/* Set the header row background color of the tickets table */
table.tickets thead th {
	background-color:#F1F2E8; /* tan */
}  
 
/* Set the font color and background color of the active row */
table.tickets tr.linked:hover > td, table.tickets tr.linked:active > td {
    background-color:#FFCD72; /* light orange */
} 
 
/* Set the background color of the alternating shaded table rows */
table.tickets tr.linked:nth-child(2n+1) {
    background-color: #F1F2E8; /* tan */
}  
 
/* Set the background color of the table 'group by' rows */
table.tickets tr.group_by td {
    background-color: #F1F2E8; /* tan */
    border-bottom: 2px solid #F1F2E8; /* tan */
}
 
/* Set the color of the bottom border of the table rows */
table.tickets td {
    border-bottom: 1px solid #F1F2E8; /* tan */
}
 
/*** ALERT MESSAGE BAR ***/
/* The alert message bar is displayed at the
 * top of the page. It is described here:
 * https://support.zendesk.com/entries/20345353-customizing-the-alert-message-bar */
 
/* Set the background color, border, and font properties of the message bar */
#flash div#error, #flash div#notice, #flash div#beware, #flash div#alert, #flash .alert {
	background-color: #FFCD72; /* light orange */
	border: 1px #FF8800 solid; /* orange */
	color: #6F7866; /* dark gray */
	font-size: 12px;
}
 
/* Set the hyperlink color of the message text */
#flash a.title {
	color: #669900; /* green */
}
 
/*** SIDEBAR ***/
/* This example sets the font sizes and colors
 * and background area of the sidebar.
 * Described here: https://support.zendesk.com/entries/20271027-customizing-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 * /
}
 

Comments

User photo
Juan Arango
Anton, Thank you!!! very useful your cook book. I want to change the home page and add some information of our company, photos, logos, links etc how can I do that? Thank you for your valuable help!
August 16, 2011 19:06
User photo
Anton de Young
Zendesk

Juan, 

You can create a forum topic and add all your information and links and photos and then pin that topic to the home page. There's an option called Pin to Home. Will that work for you?

August 18, 2011 15:47
User photo
Juan Arango
Yes Ill do that! Thanks
August 18, 2011 16:38
User photo
Kevin Crump

Hi Anton,

Your supporting documentation is very good thank you.

Alas I'm something of a CSS rookie and all I really want to do is change the default font used throuoghout the site.

Is there a quick and easy way to do this or do I need to edit individual elements/pages?

Thanks in advance for your assistance.

November 08, 2011 08:21
User photo
Anton de Young
Zendesk

Kevin, 

The global font setting is in this CSS code:

body {

font-size: 11px;
font-family: Arial,Helvetica,sans-serif;
font-style: normal;
font-variant: normal;
color: #333;
}

If you wanted to change it to a different font family, just replace the font-family setting:

body {
font-size: 11px;
font-family: "Times New Roman",Georgia,Serif;
font-style: normal;
font-variant: normal;
color: #333;
}

That should work for you. 

November 08, 2011 08:56
User photo
Kevin Crump

That's great Anton thank you.

And the swift response is much appreciated :)

November 09, 2011 00:20
User photo
Satya

1. How I can add the "What our customers think about our support" section to my page.

 

2. How to change the font on the support page.

 

3. I like the new menu bar on the right. How can i add that to my page?

 

Thank you so much for this Cook Book - its really appreciated!

 

Best,

 

Satya

December 22, 2011 00:22
User photo
Satya

Sorry the first part of my post got deleted. I really like the new Zendesk Support Page - https://support.zendesk.com/home

and I'm wondering how I can mimick it. Thanks!

December 22, 2011 00:24
User photo
Anton de Young
Zendesk

Satya, 

The customization we did for https://support.zendesk.com/home is quite complex compared to the much simpler CSS examples we have in the cookbook. We're working on an article to explain what we did. 

January 06, 2012 15:07
User photo
Yolandé Nelson
lovestockleaf

Hi Anton,

Is there a way to replace a whole <div id= > section on a page? 

For example, after an end-user search, "Didn't find what you were looking for?" is displayed, followed by "Get in touch" and "Fill out a request form" which is a plain href link.

Is there a way that this can be replaced e.g. with a button similar to the search button, using a JS widget or CSS or both?

January 17, 2012 05:14
User photo
Max McCal
Product Manager

Hi, Yolande -

You can't do a replacement with CSS, but it's generally possible using Javascript. For example, to replace the Deflect Tickets section that contains the "Fill out a request form" section, you could use something like this. Obviously, you'd want to add your own HTML into this to create the replacement div. 

$j('div.deflect.tickets').replaceWith('<REPLACEMENT HTML GOES HERE>');

Here's a quick article I found on the "replaceWith" command: http://www.w3schools.com/jquery/html_replacewith.asp

Let me know if I can help any further!

January 17, 2012 11:07
User photo
Yolandé Nelson
lovestockleaf

Thanks Max, that looks like what I was looking for.  Will be back when I get stuck.

January 17, 2012 15:14
User photo
David Rose
navigator

I've managed to customise the header of my Zendesk, but I've got a couple of green lines on the sides of the tabs that I just can't shift (see attached image). Any suggestions as to what element I'm missing ?

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

#header {
height: 100px;
background-image: url(http://www.navigator-support.com/images/body.png);
background-repeat: repeat-x;
background-position: top left;
background-color:#6699CC; /* blue */
}

#header_container {
position: absolute;
height: 68px;
top: 28px;
width: 275px;
background-image: url(http://www.navigator-support.com/images/small_logo.png);
background-repeat: no-repeat;
background-position: top left;
}

#top-menu-background, #top form#topquery {
background-color:#6699CC; /* blue */
}

/* Set the left border color of the tabs to the same color as the background */
ul#green.agent-tabs li.main {
background-color:#6699CC; /* blue */
}

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

 

February 02, 2012 10:20
User photo
Thierry DELABRE

@David Rose,

hello Try to add those lines to remove the green lines : 

#top li
{
border-left:none !important;
padding-left:2px !important;
}

 

hope this help

Cheers, 

Thierry

February 15, 2012 01:01
User photo
David Rose
navigator

Thanks Thierry, that worked :)

February 15, 2012 08:20
User photo
Jerry Battaglia

This is really awesome, thanks. How do I change the color of the text in the top menu bar?

February 15, 2012 10:56
User photo
David Rose
navigator

Do you mean the bit that says "login" etc ?

/* top right menu */
#top-right, #top-right a, #top-right p
{
color:White;

}

 

February 15, 2012 11:46
User photo
Mark Bailey

On the Zendesk site, how did you move the top right links (login, etc.) to a different position on the page?

Also, is an article still in the works on how the Zendesk site customizations were done?

March 12, 2012 21:04
User photo
Summer Reeves

How do you change the font color of the navigation? Standard and hover.

See attached for example.

March 16, 2012 13:44
User photo
Ross Chapman
Zendesk

@Mark Baily,

We reposition elements using javascript.  Basically, we 1) select the elements we want to position and store them in a variable, and then 2) we inject this variable in the DOM where we'd like.  Since we're fond of jQuery we take advantage of the replaceWith() or prepend() and append() methods for DOM manipulation and insertion.

Hope that helps!

March 28, 2012 13:02
User photo
Mark Bailey

It helps. Would you be willing to provide some examples or a tutorial?

March 28, 2012 16:12
User photo
Ross Chapman
Zendesk

Actually @mark, if you look above (I just noticed myself) to Jan 17th.  You can see a similar example that Max McCal has illustrated.  That's the basic concept.

March 28, 2012 16:35
User photo
Corey Harrington

We've done a great deal of custom CSS and design to our zendesk. You can check ours out here:

https://cyberuc.zendesk.com/access/

May 10, 2012 05:29
User photo
Anton de Young
Zendesk

Corey, 

Thanks for the link. Looks good!

May 11, 2012 14:21
User photo
Scottd

I have noticed that my CSS changes show up in Internet Explorer and Firefox on Win 7. But apparently they have no effect on Google Chrome (Win 7) nor Safari and Firefox (Mac OS).   I cleared the cache on Chrome to be sure.  (I'm not able to do much testing on the Mac machine.)  Is this a known issue?  Any solutions?

May 22, 2012 13:32
User photo
Max McCal
Product Manager

Hey, Scott-

Not a known issue by any means. I do all my customizations in Chrome, though I use a Mac. I'll open up a ticket for you so we can get some more info. 

May 22, 2012 13:35
User photo
Scottd

Correction to my comment above:  The CSS changes I've made (almost all of them related to colors) aren't affected by the browser but by whether I am logged in.  As the administrator who changed the colors, I can see all the changes. But when I'm not logged in, or when logged in as another user, I don't see any of my CSS changes.

I entered the CSS code into the Extension titled "CSS - Admin use only."  Is this the wrong place to enter the CSS changes?

May 22, 2012 13:40
User photo
Max McCal
Product Manager

Scott-

That makes perfect sense. Sounds like you need to change the "Available for" setting on the widget.

available.png

That's what it looks like now, you want to change it so it's visible to Anyone. Let me know if that achieves what you want.

May 22, 2012 13:42
User photo
Scottd

Thanks, Max.  That appears to have solved it. I was assuming that control affected who could change the CSS, not who could see the effects of the changes.  Thanks again for clarifying.

May 22, 2012 13:48
User photo
Corey Harrington

We are very curious about how both zendesk and reuters did a full integration into their sites? It looks like zendesk is somehow displayed in a frame within the website. Can an example be given on how to do this? We would love to have zendesk simply look like another page on our website, but we would need to know what width to set it to and how to create the navigation to mimic the navigation on our site. I have searched far and wide and have not seen any examples on this. Thanks. 

June 10, 2012 05:19
User photo
Corey Harrington

Can anyone from zendesk please answer the above question?

June 16, 2012 10:27
User photo
Anton de Young
Zendesk

Corey, 

I created a ticket and asked the Marketing web team to respond to your question. 

June 18, 2012 09:41
User photo
Jehanzeb Afridi
globaltel

Hi Corey Harrington,

I will help you in this regard. I am an expert in zendesk customization (Branding).

June 21, 2012 11:01
User photo
Anders
mionix

Hi!

I'm having a problem with changing the text color on different pages. I have a black background on the "home" page and need white text. I also have a black background in the feedback, so I need the text to be white there aswell. I've used:

.content p {
margin: 12px 20px 11px 0;
color: #FFFFFF;
line-height: 15px;
}

 

So far so good, all text is not white. Problem comes in the forum tab, where the the text in my articles also changed color to white, which means it can't be seem against the white background. Is there any way to separate this color option and/or change the color in the forum only to black?

July 13, 2012 01:55
User photo
Ross Chapman
Zendesk

Anders,

If you inspect the source code of any page on your Zendesk you'll find extra classes added to the <body> tag, ie "home", "forums", "entries", etc...  You can use these selectors to better target and differentiate your styles between your home page and forum posts.  Make sense?

July 13, 2012 09:22
User photo
Ross Chapman
Zendesk

Hey Corey,

We don't inject our Zendesk into a frame on our website.  Rather, we've basically ported over our main website's styles and javascript.  We put these css and js rules within a Global CSS widget.  A lot of the work, like recreating our top navigation, is accomplished with javascript by adding and removing elements from the DOM.  Since we are jQuery fans, we find the methods from here very useful: http://api.jquery.com/category/manipulation/ .  

Hope that points you in the right direction.

July 13, 2012 09:30
User photo
Anders
mionix

Hi Ross! Makes alot of sense, tried all different ways to get that to work aswell, but I can't seem to find the right way. Support gave me this:

body.entries.entries-show .content p {
color: #333;
}

Tried all different combinations of it and still couldn't figure it out. Also removed all the orginial content p to make sure there was nothing wrong with that. Without any result in the end. Maybe you could give me some pointeds how to move around this. Cheers, Anders

July 13, 2012 10:40
User photo
Corey Harrington

We are trying to add a background image for the whole site to match our brand. However we have be unsuccesful in doing so and keep receiving invalid property value when trying to map the URL for the background image. Can anyone provide some code on how to achieve this? Essentially we need the background image to cover the body, header and footer of the site.

July 30, 2012 07:57
User photo
Shaundjunior
Zalora Malaysia

Basically taken from Corey Harrington above:

"We are trying to add a background image for the whole site to match our brand. However we have be unsuccesful in doing so and keep receiving invalid property value when trying to map the URL for the background image. Can anyone provide some code on how to achieve this? Essentially we need the background image to cover the body, header and footer of the site."

I'm trying this out and getting the same error, would anyone be kind enough to share the script for adding a background picture?

 

September 19, 2012 21:35
User photo
Jehanzeb Afridi
globaltel

@Corey, @Shaundjunior

You can add the following rule in your css.

body

{

background:url("http://www.yourdomain.com/image/bg.jpg") no-repeat scroll 0 0 !important;

}

where "http://www.yourdomain.com/image/bg.jpg" is the path to your background image. You have to change this accordingly.

Hope this will solve your problem.

September 20, 2012 05:16
User photo
Justin Seymour
Zendesk

Thanks for sharing! 

September 20, 2012 06:19
User photo
It

Hello,

can anyone tell me how i make my background with dynamic images.

like  i want to make my back ground with using of different images which changes one by one after some period of time.

Thanks

November 22, 2012 04:53
User photo
Jehanzeb Afridi
globaltel

If you know Jquery and CSS, you can follow this example

http://fearlessflyer.com/2011/10/create-rotating-full-paged-backgro...

November 22, 2012 10:10
User photo
It

Hello @ Jehan Zeb
Can u tell me how i use this in zendesk bcoz here i see some HTML codes and i dont know in zendesk where i use these HTML codes. Please tell me in brief how can i use the code in zendesk and where i use the Jquery.

November 22, 2012 21:27
User photo
Justin Seymour
Zendesk

At the moment, we don't have a way to implement  dynamic content for elements like the background and header. Custom HTML code can be used in conjunction with custom Javascript to make various changes, but we're unable to provide examples, steps, or support as it's not something we've created from scratch. 

November 24, 2012 11:42
User photo
Jim Hershkowitz
immodating

Hello,

Thanks for this tutorial, I would love more examples... In meanwhile, I have a question customizing the search bar.

When looking at zendesk (https://support.zendesk.com/home) or dropbox (https://www.dropbox.com/help), you can see there is a PLACEHOLDER text in the search bar (Type your question here). Can you please help achieve the same? Here is the sample javascript code I have in a JS widget, I used the replaceWith() function but somehow it's not working, I must be close!

Event.observe(window, 'load', function() {
$j('input.suggestions_query').replaceWith('<input id="suggestion_query" name="suggestion_query" type="text" autocomplete="off" placeholder="Tapez votre question ici">');
});

Thanks a lot!
Jim 

PS: Would someone also know how to set the user's cursor directly in the search box upon entering the page? Thanks :)

March 25, 2013 02:05
User photo
Amy Au-Yeung
Zendesk

Hi Jim,

Perhaps you may wanna give this a try?

$j('#suggestions_query').replaceWith('<input id="suggestion_query" name="suggestion_query" type="text" autocomplete="off" placeholder="Tapez votre question ici">');

Hope this helps! :)

Cheers

-amy

 

PS: sorry, for some reason the .focus() function for cursor didn't work for me :(

April 15, 2013 01:48
User photo
Jim Hershkowitz
immodating

Thanks Amy! This is indeed working and adding the placeholder text. Somehow it makes the width of the search box change but I will find a way to fix that. Thanks again and kind regards, Jim

April 21, 2013 00:58
User photo
Jonathan Semones
lucity

@Amy, when I try to use that code snippet it adds the text but reduces the width of the search box and seems to break the search.  I search for "events" without that js and it finds topics, but when I add the js to a global js widget it no longer finds topics.

Am I not supposed to be adding this to a global JS widget?  Or is this customized in some other way besides the placeholder text that I am missing because I don't really read javascript?

April 23, 2013 13:27
User photo
Amy Au-Yeung
Zendesk

@jonathan sorry for the delay in response.  it looks like things got modified (doh!), so could you please try this new piece of code in your Javascript widgt and see if this works for you?

 

$j('#suggestions_query').replaceWith('<input id="suggestions_query" name="suggestions_query" type="text" autocomplete="off" placeholder="Tapez votre question ici ...">');

 

i tested it on my test account, and the width of the search box didn't get reduce, and i was able to search without problems :)

let me know if it doesn't work for you? :)

cheers!

-amy

May 13, 2013 22:03
User photo
Jonathan Semones
lucity

@ Amy That did it!  Thanks.

May 14, 2013 07:26
User photo
Amy Au-Yeung
Zendesk

@jonathan your'e very welcome. glad to know that helps ^__^

May 14, 2013 21:24
User photo
Quelyn Gretsky

Blergh, I don't know why but the font-size in the body tag is not working for me.  This is what I have: 

body
{
background-image: url('<imageurl>),
url('<imageurl2>),
url('<imageurl3>);
background-position: right bottom, left bottom, top;
background-repeat: no-repeat, no-repeat, repeat;
font-size: 16px;
font-family: ProximaNova-Regular;
font-style: normal;
font-variant: normal;
color: #000;
}

I've removed all other CSS and just put the body in by itself with the font calls and the size is not changing for the Welcome Text, author name, sub-categories, etc.  I'll keep ticking away, but if anyone knows how I am derping up that would help!

August 02, 2013 10:10
User photo
Jamie Atkinson
spredfast

Hi all!

In our articles, many of the images have a light grey border ~1 px (I think it is our background color?) around them. I can't seem to locate in the CSS where that border is coming from. Any ideas?

April 01, 2014 11:55
User photo
Jamie Atkinson
spredfast

Oops! Commented on the wrong article. This is for Help Center. 

April 01, 2014 11:56
User photo
Wes Drury
muscogee

@Jamie did you figure this out or post somewhere else.  If not send me a link to one of your articles and I will check it out.

April 01, 2014 19:27