A note about CSS customizations in the new Zendesk

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. 

Have more questions? Submit a request

Comments

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

  • Avatar
    Justin

    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. 

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

  • Avatar
    Justin

    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-customization-examples

    https://support.zendesk.com/entries/20263417-replacing-the-header-logo-and-title 

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

  • Avatar
    Raoul Zaal

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

  • Avatar
    Oscar Tobar

    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

  • Avatar
    Raoul Zaal

    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

  • Avatar
    Max McCal

    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.

  • Avatar
    Raoul Zaal

    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

     

  • Avatar
    Max McCal

    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.

  • Avatar
    Raoul Zaal

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

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

  • Avatar
    Skye

    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.)

     

  • Avatar
    Jennifer Rowe

    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!

     

     

     

  • Avatar
    Skye

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

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

  • Avatar
    Laura D.

    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!

  • Avatar
    Quelyn Gretsky

    Laura, 

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

  • Avatar
    Laura D.

    Awesome! Glad it was an easy answer :)

  • Avatar
    Renato Lyke

    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

  • Avatar
    Bianca Llamas

    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.

     

     

  • Avatar
    Dave

    Is there a place where you can view a history of changes made to the CSS? Similar to versioning in coding? It would be preferable than having to keep copying the entire sheet and saving it locally to reference.

  • Avatar
    Jessie Schutz

    Hi Dave!

    There isn't any native mechanism for doing this, outside of the ability to save custom themes in the Customize design tool.

    If you navigate to that area from your Help Center, click on Switch theme, and scroll down, you'll see there are spaces where you can save your custom themes.

    Screenshot

    You could leverage this to keep several of the most recent interations of your Help Center. This will allow you to revert to a previous version if needed, as well as view the code and preview what it looks like to help make comparisons with your active theme.

    You can find out more about this function here: Making backup copies of your custom themes.

    Hope that helps!

  • Avatar
    Frederik Yssing

    Is there a way to change the background color of the tickets in a view?

  • Avatar
    Jessie Schutz

    Hi Frederik!

    It's not possible to change the background color of the agent interface, but we do currently have a beta going that allows you to change the green bar to a different color if you like. You can find more information about that in the comments here: Customize colors and logo in agent's interface (new Zendesk).

    Hope that helps!

Please sign in to leave a comment.