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.
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
Click the Admin icon () in the sidebar, then select Account.
Zendesk Classic: Select the Settings menu, then select Account.
Click the Branding tab.
To change the name of your Zendesk, enter a new name in Your Zendesk account name.
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.
Select your image.
If you'd like the logo to link back to your company web site, enter the URL in Website URL.
To change the page header color, click the color bar beside the Page header label.
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.
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.
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:
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.
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:
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
Click the Admin icon () in the sidebar, then select Settings > Extensions > Add widget.
Zendesk Classic: Select the Settings menu, then select Extensions > Add widget.
Locate and click the Global CSS widget.
Enter a name for the widget.
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.
Enter CSS code for the elements of the user interface you want to customize.
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.
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.
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.