Forums/Documentation/CSS cookbook (Zendesk Classic)

A note about CSS customizations in the new Zendesk

Anton de Young
posted this on September 17, 2012 13:35

While the CSS customizations in the CSS Cookbook work in the web portal of the new Zendesk, they won't work in the agent interface. This is because the new Zendesk agent interface is an entirely new application (a different view of your Zendesk and all your data) with a new structure. In the near future, you will have options for customizing the new Zendesk agent interface. 

Any customizations you've done for your web portal do still work because that interface has not changed. 

 

Comments

User photo
Will Moritz

Does this include user-facing pages as well? Do we need to worry about making changes to CSS that are just going to get overridden by a new interace rolling in?

January 23, 2013 10:16
User photo
Justin Seymour
Zendesk

Hey Will: 

Any CSS changes you've made to the web portal will still apply. The new agent interface won't accept any CSS modifications. Your end-users can't see that side of the portal, so there's nothing to worry about. 

January 23, 2013 10:45
User photo
sanjay

Hey Justin, another question for you mate.

I've just skinned a portal login page with css to suit my website. Now come to the tedious task of skinning zendesk. Ive managed to load one CSS widget to bring in the fonts etc. Seems to have worked.

Now i wanted to bring forward my header menu and footer and make it look like a part of the website, which i did for my other portal. but cant get around to working it out. 

Is there a content Code that i can use to place the content in the middle?

 

this is what i used on the other portal but not making anything happen on zendesk

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

                <head>               

                                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />                                                         

                                <link type='text/css' rel='stylesheet' href='/css/layout.css'/>

                                <link type='text/css' rel='stylesheet' href='/css/typography.css'/>

                                <link type='text/css' rel='stylesheet' href='/css/forms.css'/>

  

  <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>

 

                                                               

                                {userportal_css}

                </head>

                <body>

   

                <div id="header">

                <div class="wrapper">

            <div id="logo">

                <a href="http://www.XXXXXX.xxx.xx/">

                    <img src="http://www.XXXXXX.xxx.xx/wp-content/themes/XXXXXX/images/logo.png" >

                </a>

            </div><!-- EOF : logo CLASS -->

           

            <div class="headerRight">

                                                                <div class="socialIcon">                                               

                                <div class="textwidget">

                                <p>Connect with us on : </p>

                                                                                                <a href="http://www.facebook.com/XXXXXX" class="fb" target="_blank"></a>

                        <a href="https://twitter.com/XXXXXX" class="twetter" target="_blank"></a>

                                                                                </div>

                                                                                <div class="clear"></div>

                </div>               

                <div class="search">

                    <form action="http://www.XXXXXX.xxx.xx" method="get">

                        <input class="searchText" type="text" name="s" value="Search here.." onfocus="this.value=(this.value=='Search here..') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'Search here..' : this.value;">

                        <input class="searchBtn" type="submit" alt="Search" value="Search">

                        <div class="clear"></div>

                    </form>

                </div>

            </div><!-- EOF : headerRight CLASS -->

           

            <div class="clear"></div>

        </div>

    </div>

   

                <div id="nav">

                <div class="wrapper">                                 

            <ul class="menu">

                <li>

                    <a href="http://www.XXXXXX.xxx.xx/">Home</a>

                </li>

                <li>

                    <a href="http://www.XXXXXX.xxx.xx/mobile-plans/">Mobile Plans</a>

                </li>

                <li>

                    <a href="http://www.XXXXXX.xxx.xx/mobile-broadband-plans/">Mobile Broadband Plans</a>

                </li>

                <li>

                    <a href="http://www.XXXXXX.xxx.xx/tablet-plans/">Tablet Plans</a>

                </li>

                <li>

                    <a href="http://www.XXXXXX.xxx.xx/value-bundles/">Value Bundles</a>

                </li>

                <li>

                    <a href="http://www.XXXXXX.xxx.xx/my-account/">My Account</a>

                </li>

                <li>

                    <a href="http://www.XXXXXX.xxx.xx/about-us/">About Us</a>

                </li>

                <li>

                    <a href="http://support.XXXXXX.xxx.xx/">Support</a>

                </li>

            </ul>                   

                <div class="clear"></div>

        </div>

    </div>

January 25, 2013 05:42
User photo
Justin Seymour
Zendesk

Hi Sanjay: 

I don't quite follow what you're trying to do. Here are some articles with code examples for header customization: 

https://support.zendesk.com/entries/20353251-source-code-for-css-cu...
https://support.zendesk.com/entries/20263417-replacing-the-header-l... 

If you're still having trouble getting things figured out, this would be better discussed in a ticket -- support@zendesk.com

January 25, 2013 09:05
User photo
Raoul Zaal
Elmar

Any ETA on the option for CSS? Agents have difficulties spotting the difference between hub and spoke. 

March 18, 2013 03:34
User photo
Oscar Tobar
Zendesk

Hi Raoul,

There is no plan to allow CSS customization of the Agent interface. Feel free to suggest this idea in our feature request forum: https://support.zendesk.com/forums/1848-Feature-Requests

April 04, 2013 12:41
User photo
Raoul Zaal
Elmar

Hey Oscar,

What is this? This was possible in the old zendesk and is a necessity in a multi-brand desk! Agent scan hardly see the domain they’re in and is is a guarantee for misstakes.

Old to new should be improvements, not losing functionality. If we can’t customise, the alternative is that Zendesk implements a strong visual/UI division between brands.

I will suggest a feature request (under protest), but this is pretty ridiculous. It was already in place, now it is gone…

Raoul

April 09, 2013 10:29
User photo
Max McCal
Product Manager

Hi, Raoul - 

Can I just verify with you exactly what the concern is? I believe you're saying that the problem is that you have multiple instances of new Zendesk open, and cannot tell which of them you're looking at, because the UI is not customizable, is that correct?

The reason I ask is because generally an agent in a multi-branded help desk shouldn't need to log into multiple agent portals at the same time. There will be occasional need to open one for administrative tasks or for managing forums, but there shouldn't be any need to have multiple help Zendesk agent open at the same time for working on tickets generally as long as you're using ticket sharing to send all the brands' tickets to a single Zendesk account, as outlined here

If you're actually managing more than one separate Zendesk account, I can definitely see how this is a problem, and it's one we should be able to solve in the future by allowing you to update your favicon for each account, and match your branding colors in the interface. Full CSS customization of the page is very unlikely, however, and would be much more difficult to support without breaking your customizations regularly.

April 09, 2013 10:58
User photo
Raoul Zaal
Elmar

Hi Max,

Thnx for your response. This may be true / workable in a scenario multi-brand has advanced. We share all tickets. However, today there's multiple issues with multi-branded environment. Today, there's still a number of reasons forcing our agents to have both instances open. For instance, not all data is shared between hub and spoke. Customer data (-requester) is an example. Suspended mail is not shared, new tickets should be created from the spoke, etc. etc. In practice, this means working from both. And its not occassionaly, ... unfortunately. We don't want this and I am sure this is not as ZD intended it to be. The idea is to work from the hub. 

We see no value in customizing all over. The user story here is: being able to clearly see the difference. Being able to change the colours, as suggested, would do. 

One final remark: also in the hub, the difference between the brands for tickets could be emphasized a bit more as well. 

Thanks for your help!

Raoul

 

April 09, 2013 12:17
User photo
Max McCal
Product Manager

Hey, Raoul - 

All of this is true. We plan to solve these problems with improvements to multi-brand, as well as the basic customization options I've mentioned. Thanks for getting involved in the conversation. It's helpful to know where people's pain points are as we work out the solutions. Keep an eye out for updates coming soon.

April 09, 2013 13:28
User photo
Raoul Zaal
Elmar

Hi Max, will do! Thanks again for your support.

April 09, 2013 13:56
User photo
Stephen Pryke

We're in a similar situation to Raoul, in that we're constantly using two different installations of Zendesk. We are supporting external clients in one and supporting internal & external staff in another. For a multitude of reasons - privacy from financial information being one - we don't want to mix the two (although some ticket sharing is necessary), and we also have about 10 agents stuck in the middle (I'm one of them) who are using both installations at the same time, all day. 

I realise that we are definitely in a minority of users - we've adapted Zendesk to fit our needs and are not using it as a completely standard support ticket system, but even the ability to change the colour at the top from green would be a great help - although I know it's your corporate colour :)

At the moment, we cope by having a different profile pictures in the top right, but that's not the best solution. Sometimes it's only the lack of a particular tag from the suggestion list that helps you realise which installation you're in. 

Any basic styling would be a great help :)

July 05, 2013 05:36
User photo
Skye
gps

Just a thought that might help (since I do the same thing that Stephen Pryke does) - I use the left hand sidebar to add icons for other areas that are for each client, and to keep them all "straight" I use different types of icons.  So for our zendesk for instance, I use a pretty icon called "Blossom" - For the telecom site, I use plain circle icons, and for the IG site, I use little pictures without borders. 

It occurs to me though, that you could even create a "blank" icon per zendesk instance that is a representation of that site.  Even if you don't use the sidebar for additional icons.

I have attached a screenshot just to show you the differences, so you can see what I mean (cause Lord knows, at this time in the morning, no clue how my words are actually being put together.)

 

July 09, 2013 23:17
User photo
Jennifer Rowe
Zendesk

Stephen and Skye, thanks for the feedback and for sharing how you manage things!

Skye, great tip! Would you be willing to write your tip in a new post in our Tips and Tricks forum? That would be awesome--and it would make it easier for other users to find the tip. Don't worry about attaching the images again. If you create the post, I can add your images inline for you. :) Thanks!

 

 

 

July 10, 2013 09:53
User photo
Skye
gps

:) I can do that.  I can send new images though it did work as I thought, I was able to upload the logos for the companies, so if you want those images, let me know!  Headed over there now.

July 10, 2013 10:41
User photo
Quelyn Gretsky

Is there a list of the "containers" that are used in your CSS code so that if we want to modify a part of the page we can know what to reference? 

July 31, 2013 14:35
User photo
Laura D.
Zendesk

Hi Quelyn, 

Could this list of source code be what you're looking for? If not let me know and I'll do further research!

July 31, 2013 16:12
User photo
Quelyn Gretsky

Laura, 

That's definitely helpful!  I should have found this one, d'oh.

July 31, 2013 16:52
User photo
Laura D.
Zendesk

Awesome! Glad it was an easy answer :)

July 31, 2013 16:55
User photo
Renato Lyke
konysolutions

Hi,

I am trying to change the font color for the date & time that is received in the email.

I have tried to create a global CSS widget and it does not work.

The CSS id is:live.full

CSS code that i wrote is

live.full{

color: #000

font-weight: bold

}

could you please let me know where i am going wrong the date and time field still remains in the same font color

August 21, 2013 10:03
User photo
Bianca Llamas
Zendesk

Hi @Renato, I saw your ticket and your other forum post and wanted to add an update to your questions above.

Unfortunately, the font color in the notification emails are not editable. 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 10, 2013 13:01