Forums/Documentation/CSS cookbook (Zendesk Classic)

Changing the font settings of the main content area

Anton de Young
posted this on July 13, 2011 11:58

The content area is the container for most of the data in your Zendesk. This example describes how to do the following CSS customizations:

  • Set the active link font color
  • Set the font color of the Edit and Action commands
  • Set the font size and color of heading fonts of the main content area containers

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_fonts_before.png

After

The heading fonts color has been changed to orange (to show contrast to the before version), as well as the heading font size and weight. The Edit command (and all hyperlinks) has also been changed to green.

content_area_fonts_after.png

CSS code

This example sets all the active links to green and the heading fonts to orange.
/* 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:#FF8800; /* orange */
}
 
/* 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: #FF8800; /* orange */
    font-weight: normal;
} 

Community tip from Dominic! If you want to use a specific font, upload the font files in a forum post in a private, agent-only forum. Then copy the link of the fonts and paste it in your CSS.

The Edit command is shown in the 'after' image above, the Action command is not. The Action command is used on a number of different pages in the help desk. Here's an example of the Action command in the forums:

action_command.png

 

Comments

User photo
mummii

Can anyone tell me how I can change the background colour on the buttons on my helpdesk - is the Search and Sign ME Up buttons? Thanks

October 02, 2012 23:58
User photo
Justin Seymour
Zendesk

There's quite a bit of CSS associated with the bottons. Inspect the element in your browser and look for the appropriate CSS code. You're looking for: 

.button.primary, .button.save, .button_disabled.primary, .button_disabled.save

October 03, 2012 07:39
User photo
Swapnil Joshi

I have embeded some vdeos on the home page. I want to get that videos at the centre, could you please help me in doing that, see http://support.kpoint.com/entries/22112362-overview-kapsule-creation-and-sharing

October 10, 2012 03:00
User photo
Arnaud de Theux
Zendesk

Hi Joshi

CSS fans will hate me :-) but simply add a <center> and </center> tag between your iframe tags via the HTML editor embedded in the forums.

October 10, 2012 03:48
User photo
Mark de Jong

I've tried to change the font-size but it didn't work. Any tips on how to do that?

December 06, 2012 22:55
User photo
Karl Simms

try and add the !important statement on the end ie,

#id {font-size: 17px !important;}

December 07, 2012 01:04
User photo
Mark de Jong

Yes thanks, but I can't figure out by which id the content is set

December 07, 2012 06:26
User photo
Karl Simms

have you got the page? and which text you want changing and id be happy to have a look at the ID for you

December 07, 2012 06:28
User photo
Arnaud de Theux
Zendesk

@Mark the font-size of what exactly?

For the end users or the agents? For my end users I have the following code for the general font size and family

body{
font-family:'Lucida Sans',Arial,sans-serif;
font-size:13px;
color:#393939;
margin:0;
padding:0;
margin:0;
padding:0;
}

December 07, 2012 06:59
User photo
Jeffrey Critchley

Is there a way to use custom, pro fonts we've purchased?

December 14, 2012 13:07
User photo
Arnaud de Theux
Zendesk

@Jeffrey you should be able to achieve this by importing the font via a CSS widget. Host your font on your server and use this code:

@font-face
{
font-family: my_font;
src: url('http://www.website.com/custom_font.ttf');
}

p
{
font-family: my_font;
}

December 16, 2012 05:43
User photo
Ambrose Contreras

Hi, looking for a way to change my columns int he Forums categories section to one so I can list my forums in one column down the page..  I have searched on Column and setting columns and have not found any code examples.

Where should I be looking?

January 24, 2013 07:00
User photo
Justin Seymour
Zendesk

Hey Ambrose: 

I don't think we have any code examples for this. Maybe someone else has some ideas? 

January 25, 2013 08:55
User photo
Dominic Eldred-Earl

@Arnaud - I am trying to use the Ubuntu font on our site for the headers...

I am trying to use;

@font-face {

font-family: 'ubuntumedium';
src: url('http://www.cinimod.co.uk/fonts/ubuntu-webfont.eot');
src: url('http://www.cinimod.co.uk/fonts/ubuntu-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.cinimod.co.uk/fonts/ubuntu-webfont.woff') format('woff'),
url('http://www.cinimod.co.uk/fonts/ubuntu-webfont.ttf') format('truetype'),
url('http://www.cinimod.co.uk/fonts/ubuntu-webfont.svg#ubuntumedium') format('svg');
}

h1 {

font-family: ubuntumedium, sans-serif;
}

h2 {
font-family: ubuntumedium, sans-serif;
}

h3 {
font-family: ubuntumedium, sans-serif;
}

In the CSS widget, but it is not working - can you suggest why?  Is it because the Zendesk site is https and the font are only on http?

 

If I have Ubuntu installed on a machine, and put the font name as Ubuntu, it works fine...

Thank you in advance

February 26, 2013 08:55
User photo
Arnaud de Theux
Zendesk

Hi @Dominic,

Not sure this is the issue but it might be your browser preventing mixed content to be displayed, ergo preventing to load HTTP content if Zendesk is HTTPS. Which browser are you using?

It works in Ubuntu because the font is stored locally on your machine.

February 26, 2013 14:25
User photo
Dominic Eldred-Earl

Hi @Arnaud - I have tried with IE and Firefox and neither like it.

I think it is probably due to the HTTP vs HTTPS - the problem is I don't have an https server.

If I attach the fonts as files in a tech note in Zendesk, could I point to them there?   

February 27, 2013 01:04
User photo
Arnaud de Theux
Zendesk

@Dominic,

Sorry for the late reply! That is actually an awesome workaround and it will indeed work :-) Just upload the font files in a restricted to you only forum post, copy the link of the fonts and paste that in your CSS.

@Jennifer @Anton that would be a great user tip to add to the CSS cook book ;-)

Zendesk update: Dominic's tip has been added to the article.Thanks for the good idea!

March 06, 2013 02:17
User photo
Jennifer Rowe
Zendesk

Yes, good idea, Arnaud. And thanks, Dominic!

March 06, 2013 08:50
User photo
Market Architects

@Arnaud

Why do you have padding in this setting if you are just overriding the body font family, size, and color? Wouldn't padding already be in the global CSS?

(I copied this from your note above)

Also, why is the padding repeated?

body{
font-family:'Lucida Sans',Arial,sans-serif; 
font-size:13px; 
color:#393939; 
margin:0; 
padding:0; 
margin:0; 
padding:0; 
}

March 21, 2013 16:38
User photo
Arnaud de Theux
Zendesk

@Market, correct, the padding margin etc is not required if you just want to modify the font size and color.
As for the second padding, I guess I was tired while writing this :-)

March 27, 2013 10:57
User photo
Kitty Kilian

Hi Arnoud,

 

I have changed to alter the overall font size for my end users, but all that gets changed is the Start and Forum button in the navbar. I want to make the body copy font 16px (which is the current standard size for people over 40 ;-) - any suggestions which code to use?

 

Kitty K.

April 02, 2013 08:57
User photo
Kitty Kilian

And another question, in another box just to keep things seperated:

I would like to change the 'ask a question' button in the forums to 'submit a topic', since I am using the forum for students, not customers. Can I do that? Could you please tell me the code?

Thanks! Kitty K.

April 02, 2013 08:58
User photo
Arnaud de Theux
Zendesk

Hi Kitty

1st question: this will require some more code than just one line. But you can achieve this by using the #page element and then using classes, you will be able to enforce the font-size.

#page p
{font-size: 16px;}

Make sure you make it available in the Extensions settings for "anyone who is not an agent"

2nd question: same as above, this would require quite a lot of modifications. Below is the code to change the button itself but when clicking you can still see the name of the page which is "ask a question" etc.

Make sure you create this javascript widget as "available for anyone including people not logged-in"

var changed_article_button = $j("body").html().replace('Ask a Question','Submit a Topic');
$j("body").html(changed_article_button);

 

For a complete change I would advise you to submit a request through support@zendesk.com and say you've been told to create a request to be assigned to the Services team :-)

Hope that helps!

Arnaud

April 02, 2013 14:15
User photo
Kitty Kilian

Thanks Arnoud, I think these cosmetic changes would work fine. No need to uproot everything.

I have tried them - copy-pasted the code into the css widgets - but nothing happens. I can't code myself so I may have overlooked some little thing? An } or an { ?

April 04, 2013 12:33
User photo
Kitty Kilian

PS Oops, I tried to make the changes in CSS, now used the javascript-widgets. Font size is perfect now. But I can't get the button name changed. I will ask the zupprt desk. Thanks!

April 09, 2013 11:23
User photo
Renato Lyke
konysolutions

Hi,

How do i change the font color for the date & Time field that is received in email. Currently it is grey would like to change it to black.

Where do i make the changes.

August 20, 2013 05:16
User photo
Renato Lyke
konysolutions

Any update for me guys. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table td {
border-collapse: collapse;
}
</style>
</head>
<body style="width: 100%!important; margin: 0; padding: 0;">
<div style="padding: 10px ; line-height: 18px; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#000000;">
<div style="color: #000000;">{{delimiter}}</div>
{{content}}
<div style="color: #000000; margin: 10px 0 14px 0; padding-top: 10px; border-top: 1px solid #000000;">
{{footer}} Delivered by <a href="http://www.zendesk.com" style="color:black" target="_new">Zendesk</a>.
</div>
</div>
</body>
</html>

 

This is the email code that we have.

August 20, 2013 21:19
User photo
Bianca Llamas
Zendesk

Hi @Renato, thanks for creating a ticket to discuss the issue.

I also wanted to share our response in case anyone else was curious.

Unfortunately, the date in grey in the notification emails is uneditable. The styling for that is pre-processed by the placeholder {{ticket.comments_formatted}} and any form of customization with that is not possible. You could however remove the formatting aspect of the placeholder and style your notification yourself. From there you can simply use HTML and CSS to style your email notification.

To learn more about this placeholder, please view the documentation here.

September 09, 2013 15:21
User photo
Tom I.

For some reason I've been unable to figure out what CSS to use to change the link color for all of the listed links to KB/forum articles on the support home page. I've tried many different classes/etc within the CSS module and got most of the other link colors changed correctly, but everything listing the links to the KB articles/forum posts at the support home page still shows up blue.

October 22, 2013 20:43
User photo
Jenny Feith
Zendesk

Hey Tom,

To follow up on our discussion via ticket, I'm posting the CSS here, in case other clients using web portal also want to change the link color for all of the listed links to KB/forum articles

a:link, a:visited, .content a:link, .content a:visited, ul.menu-drop a:link, ul.menu-drop a:visited, ul.drop-list li.link, span.link {
border-bottom: 1px dotted #AAA;
color: #80ad24; 
text-decoration: none !important;
}

 

December 17, 2013 14:03