Forums/Documentation/Web portal (Zendesk Classic)

How to brand your Web portal

Anton de Young
posted this on July 12, 2011 08:36

Note: If you joined Zendesk on or after August 21, 2013, you have the Help Center instead of the Web portal. If you landed on this page by accident, see the articles on using the Help Center.

Zendesk provides both simple and quick branding and options for more extensively branding your Zendesk web portal. Simple and quick is done via admin settings to change the header and page background colors, the logo, and the name of your Zendesk. Beyond that, you need to create custom CSS (cascading style sheets) code and possibly JavaScript to skin your web portal to meet your branding needs (make it look like your company web site, for example).

Simple branding: Changing your Zendesk name, header logo, and colors

You can quickly change your Zendesk name as it appears to your end-users, add your own logo to the header, and change the default colors. These changes affect both your web portal and mobile web portal.

Note: In the new version of Zendesk, these changes only affect the customer-facing web portal, not the agent interface. In the Classic version of Zendesk, these changes affect both interfaces.
To make simple branding changes to your Zendesk
  1. Click the Admin icon () in the sidebar, then select Account.
    Zendesk Classic: Select the Settings menu, then select Account.
  2. Click the Branding tab.
  3. To change the name of your Zendesk, enter a new name in Your Zendesk account name.
  4. In the Header logo section, click Change, then click the Browse button that appears.

    Your logo should be 254 pixels wide by 50 pixels tall. Zendesk will scale the image to fit that space if it's not already that size.

  5. Select your image.
  6. If you'd like the logo to link back to your company web site, enter the URL in Website URL.
  7. To change the page header color, click the color bar beside the Page header label.
  8. In the color picker, select a color or enter the hex number for the color, then click off the color picker to close it.

    The Page Header is the color at the top and the Page background is the color on the sides.

  9. To change the page background color, click the color bar beside the Page background label and select a color or enter the hex number for the color.
  10. When you're done, click Save tab.

In addition, you can also add a custom favicon (the icon appears in the Web browser address bar and in the mobile version of your Zendesk).

On this settings page. you'll also see the Host mapping, Subdomain, and Mobile branding settings. These are described in the following topics:

Custom branding with CSS and JavaScript

If you want your Zendesk web portal to more closely match the look of your company's web site, you can modify the default elements and styles using CSS (cascading style sheets) code. This is easier to do if you're already familiar with CSS, but it's possible if you're not. You can modify your Zendesk using CSS widgets, which can be added by an administrator.
Important: If you're using the new version of Zendesk, you cannot customize the agent interface using CSS. It is currently not supported. You can however use CSS to customize your customer-facing web portal.

If you're not familiar with CSS, you may want to spend a little time learning about it first. However, if you have some knowledge of HTML, it shouldn't be difficult for you to understand the purpose and use of CSS. At it's simplest, it's a tool for applying style definitions to elements of an HTML page. You use it to set background and text colors; add, remove, or style borders; set the sizes and control placement of elements on a page, and so on.

A typical CSS statement refers to a page element and then sets properties that affect that element.

#footer {
	width:1000px;
    background-color:#333333;
}
The properties are contained within curly brackets and each property setting is terminated with a semi-colon. The code above is formatted for easy readability but it could also have been written like this:
#footer {width:1000px;background-color:#333333;}

When you're setting lots of properties, breaking code statements to multiple lines is much more readable.

The properties that can be modified depend on the type of element. For example, there are properties for positioning tables and other containers and properties for formatting text. Refer to the W3C CSS Reference for a complete list of CSS properties.

You can use the customization examples contained in the Zendesk CSS Cookbook as the basis for your design and not worry too much about the underlying low-level detail. You might just change colors of text and backgrounds or shift an element to be aligned center rather than to the right. If you want to know more about the page elements and how they've been styled with CSS, you can use browser tools to inspect the structure of a web page. See Inspecting Zendesk page elements below.

Note: There is no guarantee that page elements won't change in the future. However, these changes are infrequent and you'll be notified before they're made so that you can update your code.

Adding a global CSS widget

To get started customizing your Zendesk, you need to add a Global CSS widget. Only administrators can add widgets.

To add a CSS widget

  1. Click the Admin icon () in the sidebar, then select Settings > Extensions > Add widget.
    Zendesk Classic: Select the Settings menu, then select Extensions > Add widget.
  2. Locate and click the Global CSS widget.
  3. Enter a name for the widget.
  4. Select one of the following availability options:
    • Anyone, including people who have not logged in
    • People who have logged in
    • People who have logged in and is an end-user
    • People who have logged in and is an agent
    • People who are not an agent

      In most cases, you'll want to select Anyone so that all your users see the changes. There are occasions when making changes just for end-users or agents is helpful.

  5. Enter CSS code for the elements of the user interface you want to customize.
  6. Save your widget by clicking Submit.

When you create a CSS widget it is automatically activated and the updates you make to it are immediately applied to your Zendesk. As you're creating your CSS code you may want to use more than one CSS widget and break the customization code into chunks so that you can test different parts of your customization separately. When you've completed the customization you can always pull all of the CSS code into one of the CSS widgets and then activate just that one.

Some customizations may also require JavaScript code, which is typically used to insert content into the page. For example, if you wanted to add links to your company's web site into the footer, you'd use a combination of JavaScript and CSS. Adding a JavaScript widget is similar to adding a CSS widget. Just follow the steps above to add a widget and select Global JavaScript.

Inspecting Zendesk page elements

The examples in the topics contained in the Zendesk CSS Cookbook provide you with easily reusable code that you modify to your own design. These examples also help you to identify by name the page elements that you are modifying. For example, the header is contained in a div calledheader. Once you know how the page is structured, the names of its elements, and what each element contains, you can apply your CSS skills to modify the default design.

Most modern web browsers provide tools for you to inspect the structure of a web page. For example, if you're using Mozilla Firefox there is an add-on called Firebug that does just that. Some browsers, like Google Chrome, have these tools built in.

Here's an example of using the Developer Tools in Chrome to inspect the page elements.

As you select elements of the code, the corresponding section of the user interface is highlighted. In this example, the top menu background is selected. You can also see that this tool displays the underlying CSS so that you can see exactly how an element has been formatted. Taking these CSS style definitions as a starting point, you can modify to look of your Zendesk web portal to match your company's branding.

Next steps

The CSS customization examples in the CSS Cookbook describe a number of typical customizations. Add a CSS widget to your Zendesk and try out some of the code to get started.

Also, if you're interested in how we customized our own web portal home page (https://support.zendesk.com/home), see Custom skinning your web portal.

 

Comments

User photo
Chongan Chan
avantime

Is this possible in Zendesk new UI?

September 17, 2012 01:48
User photo
Justin Seymour
Zendesk

You can customize the colors of the new Zendesk for your agents, but these CSS changes still apply to the web portal at the end-user level. In other words, CSS edits will not affect the new UI. 

https://support.zendesk.com/entries/21239957-branding-your-zendesk

September 17, 2012 06:32
User photo
Krissy
tetrisonline

It says "To get started customizing your help desk, you need to add a Global CSS widget."... I know how to do this in Classic Zendesk.  How do I do it in the new Zendesk?

November 06, 2012 16:21
User photo
Chongan Chan
avantime

hi Krissy .. like justin said its will not affect the new UI. i have tried this but they have scripted the UI. soo that it will reload to default values when the site refresh . and the answer i got was that its not in any future deploys. sry

 

November 07, 2012 03:52
User photo
Justin Seymour
Zendesk

Correct! Aside from some basic branding options, the new agent interface will not accept CSS changes at the moment. CSS and Javascript modifications will apply to your public web portal only. 

November 07, 2012 05:08
User photo
Brian Adkins
precisionlender

Once I add the Global CSS widget and some CSS code....  how to I edit that code again?  (I can't find it again)

December 07, 2012 07:40
User photo
Brian Adkins
precisionlender

Never mind.... I'm finding that a lot of my problems are due to the ZD interface letting elements fall off the right side of the screen when my browser is not wide enough.  A little CSS on ZD's part could fix all that!

December 07, 2012 07:43
User photo
Karl Simms
chameleonsupport

If its the widget box on the homepage Brian:

Altering the code you need if it exists you need Manage > Extensions > "Your Java css widget"

/*Java Widget*/

.side-box-content, .blue_box_top, .blue_box_bottom, .side-box-with-image, .r_blue{
background: white !important;
width: 197px;
font-size: 12px;
padding: 6px 22px 0 22px;
color: #444;
margin-top: -5px;
}

.side-box-content, .blue_box_top, .blue_box_bottom, .side-box-with-image, .r_blue{
background-color:none !important;}

 

Hope this helps.

December 07, 2012 07:45
User photo
Justin Pollington-Woods
huddle

Hi,

Is it possible to change the banner colour in the agent screen from green to another colour?

Thanks

Justin

February 27, 2013 06:37
User photo
Justin Seymour
Zendesk

Not yet, Justin! We'll be introducing more branding options for the new agent interface in the near future. 

February 27, 2013 08:28
User photo
Justin Pollington-Woods
huddle

Hi Justin, thanks for updating me! I look forward to being able to change the colour :-).

 

Thanks

February 27, 2013 08:53
User photo
Tobias Braun
global

Hello,

currently there is a very nasty Flash of Unstyled Content when customizing using the widget. A very good example is support.zendesk.com which looks default before the inline CSS is being loaded for the new layout. Are you gonne do something against this? Maybe it would be really helpful if we could upload a css file which will be included in the header of the web portal. From a web developer perspective, this looks very unprofessional.

Tobias

February 28, 2013 13:58
User photo
Justin Seymour
Zendesk

Thanks for pointing that out Tobias. The default portal does flash really quickly before the CSS is loaded. I'll send your feedback on to the right people. 

March 01, 2013 02:22
User photo
Raoul Zaal
Elmar

Hi Justin,

We have just prepared our ZD for a third brand. We really (!) need the option to customize the agent UI. If only to change the colour of the header bar. With a tiny visual on the top right we will for sure make misstakes.

Can you please revert with an ETA?

June 04, 2013 07:26
User photo
Jennifer Rowe
Zendesk

Hi Raoul,

You can revert by going to yourdomain.zendesk.com/switch.

I've asked the PM for an ETA for you. Stand by!

Thanks!

 

June 04, 2013 08:03
User photo
Jennifer Rowe
Zendesk

Hi Raoul,

Sorry to say this feature will take a little more time. The ability to change colors in the agent UI will be available late this year. 

 

 

 

June 10, 2013 14:58
User photo
Ben Radcliffe
orgsync

Has any progress been made on the skinning functionality? As Tobias previously mentioned, the site flashes for the briefest of durations (115ms) in its unskinned state before the styling is rendered correctly. It's extremely annoying on every page load.

On another note, will the new web portal coming later this year have a true template editor with built-in HTML and CSS editing capabilities much like Desk.com offers?

June 12, 2013 12:38
User photo
Jake Holman
Product Manager

@Ben: If by "much like" you mean "much better than" - yes :)

June 14, 2013 13:28
User photo
Pierre Grenier
Product Manager

Jake's great answer has already been posted. Tks, Jake.

June 14, 2013 17:21
User photo
Jeremy Woollen

Can I upload an image which I can set as a background image in css? If so, how? Thanks.

September 13, 2013 08:52
User photo
Anthony Roman
Zendesk

@Jeremy - Yes you can. First upload your image in a public server. After this, create a CSS widget under settings > extensions > global CSS and use the following:

September 26, 2013 00:02
User photo
Michael Garrett
audatex

Hey guys!

 

Is there anyway we can apply a different CSS Style sheet when a certain customer logs into the portal? We have insurance companies who visit our support portal and it would be awesome if when they log in to check their requests or submit a new one, they can see a branded portal specific for them. 

 

Is this possible through the use of widgets and assigning them to organisations some how?

 

Cheers!!

 

Michael 

November 26, 2013 19:21
User photo
Trisha Patel
Zendesk

@Michael, Unfortunately not, it would be a generic template for all users before they log in I'm afraid. You're more than welcome to create a feature request about this here

November 28, 2013 03:05