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.
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 Desk.com, 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 Desk.com 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:
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.
Let’s jump in and start editing.
- Within the Admin console, in the top navigation, click Channels.
- In the side navigation, click Support Center.
- Click Web Themes.
- Hover over Desk.com Default and click the pencil 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
The Look & Feel tab is a great starting point for anyone new to customizing the Web Theme within Desk.com. 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.
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.
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:
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:
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.
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.
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|
|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.