Changing the font settings of the main content area

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

Have more questions? Submit a request

Comments

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

  • Avatar
    Justin

    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

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

  • Avatar
    Arnaud de Theux

    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.

  • Avatar
    Mark de Jong

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

  • Avatar
    Karl Simms

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

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

  • Avatar
    Mark de Jong

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

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

  • Avatar
    Arnaud de Theux

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

    }

  • Avatar
    Jeffrey Critchley

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

  • Avatar
    Arnaud de Theux

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

    }

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

  • Avatar
    Justin

    Hey Ambrose: 

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

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

  • Avatar
    Arnaud de Theux

    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.

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

  • Avatar
    Arnaud de Theux

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

  • Avatar
    Jennifer Rowe

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

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

    }

  • Avatar
    Arnaud de Theux

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

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

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

  • Avatar
    Arnaud de Theux

    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

  • Avatar
    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 { ?

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

  • Avatar
    Renato Lyke

    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.

  • Avatar
    Renato Lyke

    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.

  • Avatar
    Bianca Llamas

    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.

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

  • Avatar
    Jenny Feith

    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;

    }

     

Please sign in to leave a comment.