Start tracking your progress
Trailhead Home
Trailhead Home

Use Web Themes to Customize Your Support Center

Learning Objectives

After completing this unit, you’ll be able to:

  • Edit the look and feel of your support center.
  • Describe where to add additional custom CSS styling to your web theme.
  • Locate the advanced theme editor tab where you can fully customize your web theme’s pages.’s Web Themes

We know what some of you might be thinking. Web theme? If that sounds a little technical for your liking, we’re here to put your mind at ease. With, you don’t need to have advanced web development skills to create a customized web theme for your business or brands. Phew! All you need is a little patience and imagination to give the default web theme a fresh coat of paint and a personalized feel. And if you already have some web development experience, that’s also great. This unit covers the various ways to bring your support center to life, including both beginner and advanced methods of customization.

Desk gives you a default web theme, which looks something like this:

Navigate to the Web Theme Editor

While this web theme is functional and provides you with everything you need to display your knowledge base, it may not match the look and feel that your business is going for. But we fix that with the web theme editor. Check it out.

The Web Theme Editor

Let’s jump in and start editing.

  1. Within the Admin console, in the top navigation, click Channels.
  2. In the side navigation, click Support Center.
  3. Click Web Themes.
  4. Hover over Default and click the pencil icon.
    pencile icon

This opens the editor. We focus on using three tabs of the editor to change the overall style and functionality of your web theme:

  • Look & Feel
  • Customize Content
  • Advanced Themes

    change web theme

Look & Feel

The Look & Feel tab is a great starting point for anyone new to customizing the Web Theme within Let’s start with your logo.

Add Your Logo and Favicon

Click Upload Image in your Web Theme editor. In the file manager, chose the logo for your support center, and click Upload.

click upload

A favicon is an image in ICO format that appears in your browser tab next to the title of the webpage.

Here is an example of a favicon:


To add a favicon, you first need to generate an .ico file. There are many tools online that convert images to favicon-ready files.

Change the Font

Scroll down from the Images section to find a list of fonts you can use in your web theme. You can choose a global font and specify fonts to use for the header and body text. You can also choose your desired font size, and in the Layout field, choose the text orientation.


Change the Color Scheme

Lastly, you can edit your support center’s color scheme by changing the color of a variety of different elements, including background, text, hyperlink, and more.


Try testing some of these different options now. You can view your updates without saving by clicking Preview at the top-right-hand corner of the web theme editor. When you’re done, don’t forget to click Update.

Customize Content

Now that you’ve mastered the art of basic global style changes, we can move on to a slightly more advanced method of customization. Navigate to the Customize Content tab. This tab provides you with even more control over the content you present in your support center.

Make Changes to the Header

The header is the bar at the top of each support center page that contains your company name and logo. You’ve already made some changes to this area, like adding a logo and changing the background color, but that’s just the start. You can also add custom HTML and CSS (Cascading Style Sheets). Let’s try this out by editing the Company Name as it appears in the Header.

Default header content:

Default header content

In this line of code, replace My Company with your own company name. Click Save and Continue Editing.

Contact Us Content

In this section, you can add your company phone number to the Support Center.

The information appears in the right-hand sidebar area of your Support Center like so:

right-hand sidebar area

Page Footer Content

The footer is the bottom section of the screen that appears the same on every page. You usually use the footer to display information that you want your customers to easily access and view, such as your sitemap, location, and more contact details. It’s blank for now. Leave it blank, or, if you know HTML and CSS, you can add content to display in the footer.

Custom CSS

CSS is a programming language that lets you style and shape the HTML that builds your support center. In this tab of the Web Theme editor, you can create global CSS styles that display throughout the web theme. Teaching you all about CSS is beyond the scope of this module, but we’ve listed some helpful resources at the end of this unit. Check them out if you want to learn more about CSS.

Advanced Themes

This tab of the theme editor is the most advanced of the lot. In advanced mode, you can completely customize not only the look and feel of your support site, but also the layout and functionality. In fact, you can do so much in this section that we can’t cover it all here. For now, we show you what the different elements of this tab are so you can troubleshoot any problems that arise.

On the left navigation, you see a list of files. Each file represents a section of a page of your support center. Click a name to see the file. These sections contain a combination of HTML, Liquid, and CSS.

File What it does
Header Contains metadata, links to external files such as CSS and JavaScript and global CSS styling
Layout This section displays the website header with company name and also the sidebar on the right
Page(Index) The home page and its content
Page(Article) The Articles page with a list of all articles available
Page(Topic) A specific topic page with a list of all articles about that topic
Page(Search Result) This page lists results from a search executed in the search bar
Q&A(Show) This page displays a list of all questions
Q&A(New) A form is displayed here for submitting questions
Q&A(Pre-Create) This page appears when you click to submit your question, displaying suggested questions that can help solve your issue and prompting you to submit your question
Email(New) This page displays the form to submit an email case
Email(Pre-create) This page appears when you click to submit your email, displaying suggested articles that can help solve your issue, and prompting you to submit your email
Email(Submitted) This page displays a success message once your email has been submitted
Chat(New) This page displays the chat form
Chat(Pre-Create) This page appears when you click to submit your chat question, displaying suggested articles that can help solve your issue, and prompting you to submit your chat question
My Cases(List) This page displays a list of your current cases (you must be logged in)
My Cases(Detail) A singular case detail in your account section
Login The login page
Registration The registration page
Forgot Password The forgot password page
My Account Your account profile
Verify Email The verify email page
CSAT(New) The form to submit a customer satisfaction rating
CSAT(Submitted) The success page that shows when your ratings have been submitted

Looks like you’ve leveled up in your technical skills! Now you know just what to do to customize your own support center.

In the next unit, we show you how to create a knowledge base for your customers.