R - Using and Understanding the Advanced Theme Editor

Last Updated -

If you have some HTML skills and want to deeply customize the appearance of your Support Center, the Advanced Theme editor is what you're looking for. The Advanced Theme editor gives you great freedom to customize the look and feel of your Desk.com Support Center, using the Liquid templating language (check out this reference for additional information).

This article details tips you may want to use while editing your Support Center and also highlights specific changes you may want to make on individual pages within your Support Center. The article is organized by the areas in the advanced editor to make it easier for you to identify the places where you may want to customize your Support Center and identify the common places you'll go to change these items.

At the bottom of this article, the Liquid Variables used in the Support Center are listed for you so that you can go beyond the basic examples provided in this article.

In this article:

Getting Started
General Tips
Header
Layout
The Index Page
Articles, Topics, and Search Results
Questions & Answers
Email form
Chat form
List of Available Variables in Help Center

Getting Started

Step 1: Create a new template (go to AdminChannelsSupport CenterWeb Themes and add a new theme). You can also duplicate your existing theme or edit your existing theme. Once you've got your theme, click the gear icon to edit and then click on “Advanced Themes” on the far right.

Step 2: Customize the template with your HTML and CSS, including any styles and colors that you create. See the various article sections for where to make those changes and examples.

Step 3: Preview your changes by clicking "preview" at the top right.

Step 4: Save the Theme when you're happy with your changes by clicking "Update" or "Save and Continue Editing".

Step 5: Set the system to use your new template as the default by clicking the "Default" button next to your template.

back to top

General Tips for your Support Center

Here are a few general tips you'll want to consider when customizing your Support Center:

  • Layout changes are specific to each page, with the exception of the Header and Layout pages. For example, if you want to include a script that runs on every page or set a CSS style element, place it in the Header. In addition, if you want a header or a footer link to appear on every page, place it in the Layout section.
  • You can use a dynamic variable set at the top of your page if you'd like to rewrite a variable later in the page, e.g. {%assign myVariable ="Hello"%} to set it and then {{myVariable}} to output it later in the page.
  • Your changes are live as soon as you click update (or save and continue editing). We suggest previewing your changes before saving if this is your default template.
back to top

Customizing the Header Section of your Support Center

The Header Section of the Advanced Theme editor provides you with a central place to manage your style declarations (CSS) and scripts. You can also use this area to dynamically change the title of the page.

Here are a few general tips you'll want to consider for the header section:

  • If you're using CSS to override a style element that's set somewhere else in Desk.com, you can use the "!important" suffix to make sure that your change is applied (if you need a good CSS primer, check out the W3C Schools CSS site or the handy Snippets at CSS Tricks.)
  • You can import external style sheets or scripts in this section
  • You can set page header values in this section
Example: Changing the Page Name depending on which Desk.com page is displaying

You can use the Liquid templating language to change the page dynamically in Desk.com. One way you might choose to change the page is to write a different message in the HTML title of the page.

This example demonstrates how you can add a value to the page title by customizing the html title tag in the Header section of the Desk.com Advanced Mode Support Center editor.

The possible values of the page variable are as follows:

  • page_index
  • page_search_result
  • page_search_topic
  • page_search_article
  • question_new
  • question_pre_create
  • question_show
  • email_new
  • email_pre_create
  • email_submitted
  • chat_new
  • chat_pre_create

Use the value of the page variable to create a page-specific layout or write out a specific message, e.g.:

<title>
  {{ site.company_name }} | 
  {% if page == 'page_index' %}
    Portal
  {% elsif page == 'page_search_result' %}
    Search Results
  {% elsif page == 'page_topic' %}
    {{ topic.name | clip:40 }}
  {% endif %}
</title> 
back to top

Customizing the Layout Section of your Support Center

Use the Layout Section of the Advanced Theme editor to set the general layout of every Support Center page. You will most likely use this area to set up the general structure of your page design or manipulate changes that appear on every page.

Here are a few general tips you'll want to consider for the layout section:

  • You can use the layout section to include areas such as a header or footer that you want to repeat on every page - this makes the customization process much faster
  • The default layout section contains the Search widget; if you'd like to customize them, you can do so here.
Example: providing a link to a specific topic in the sidebar

If you have topic information that your customers don't always use, you can create a specific list topics that appears in the sidebar of your Support Center to share valuable content your customers might have missed; in this case - the contents of a specific topic.

Use a for loop function in Liquid and some html layout to create this "teaser" in the "support-side" div of the layout section to write out the name and link of the first article in the "Hello World" topic, e.g.

{%for topic in topics%} 
      {% if topic.name == "Hello World"%}
	
      <h3>	{{topic.name}}</h3>

<ul>
	{% for article in topic.articles limit:1 %}
	<li>
		<a href="{{ article.public_url }}">{{ article.subject_plain | clip:40 }}</a>
	</li>
	{% endfor %}
</ul>
       {% endif %} 
{%endfor%} 
back to top

Customizing the Index Page of your Support Center

The index page is the "home" page of your Support Center and is the first page displayed.

Here are a few general tips you'll want to consider for the Index page:

  • The index page provides your general navigation - you can customize it to provide a dynamically generated list of topics rather than the default table design
  • You can change the layout for the index page while maintaining the overall look and feel of the overall layout
  • The index page contains liquid collections of topics; each topic contains a collection of articles
Example: change the default table to topics to a dynamically written out list

A common customization to the index page of the Desk.com Support Center is to write out a dynamic list of topics. The default HTML writes out this content as a table; however, you may want to write it out and style it differently.

{%for topic in topics%}
	<h3>
		{{topic.name}}</h3>
	<ul>
		{% for article in topic.articles %}
		<li>
			<a href="{{ article.public_url }}">{{ article.subject_plain | clip:40 }}</a></li>
		{% endfor %}
	</ul>
	{%endfor%}
back to top

Customizing the Article, Topic, and Search Results Pages of your Support Center

The Article, Topic, and Search Results pages are other frequently-visited pages in your Support Center:

  • The Article page of the Support Center provides the template for any page where an Article is displayed.
  • The Topic page of the Support Center is the template for a list of all the articles in that Topic.
  • The Search Results page provides a list of all the items returned from a dynamic Desk.com search. 

Here are a few general tips you'll want to consider for the article, topic, and search results pages:

  • Using a simple if statement or a case statement, you can provide specialized layout for each Topic page (e.g. the "Welcome" Topic may have a different background graphic than the "Advanced" Topic page
  • If you don't like the default search result you can change the styling so that items have longer or shorter preview length
Example: removing the pagination link on a topic page

Desk.com gives you the ability to page between available topics on a topic page.

If you'd like to remove this link and display only some of the topics (in this example, we're limiting the display to 5, simply make the following changes in the Advanced Mode editor on the Page(Topic) page:

  1. change {% for article in articles %} to {% for article in topic.articles limit:5 %}
  2. remove <div id='pagination'> {{ more_article_block }} </div>
Example: displaying only the first 100 characters of a link

You can apply a liquid filter to {{ article.body_text | truncate:100 }}

back to top

Customizing the Q&A Pages of your Support Center

The Questions and Answers pages (Q&A) are displayed when you enable Questions and Answers in a specific topic on your Support Center. Here are a few general tips you'll want to consider for the Q&A pages:

  • You may want to use some CSS styling to highlight a best answer.
back to top

Customizing the Email Pages of your Support Center

Desk.com uses two different kinds of email intake forms in the Support Center - the main one you're likely to use is the Email form - and you may also choose to use the email widget. Here are a few general tips you'll want to consider for the Email pages:

  • You can use the Email widget to style input from a mobile phone or tablet; you can also use the Email widget to place your Desk.com email form on another site than your Support Center.
  • You should consider using the email "Pre-Create" to offer additional options to customers and increase the likelihood that they will help themselves instead of creating a ticket.
Example: Changing the Fields on the Email Form to take First and Last Name

You may wish to ask for both first and last names when your customers email you - in that case, simply remove the {{interaction_name}} field from your email form and add in the following:

first: <input class="default l" id="customer_first_name" name="customer[first_name]" type="text" />
last: <input class="default l" id="customer_last_name" name="customer[last_name]" type="text" />  
back to top

Customizing the Chat Pages of your Support Center

If you enable Chat in Desk.com, there are two sets of pages that you can customize - the individual chat pages and a "Widget" that you can embed elsewhere. Here are a few general tips you'll want to consider for the Chat pages:

  • You can style both the initial chat page and the page that results when you've connected to the Desk.com Chat
  • If you'd like to display the Chat link only when Agents are available, you'll need to use the Chat Widget
Example: Making a field required on the Chat Form

To make a field required, you'll need to add to the existing jquery statement that's running in the page. For example, if you wanted the phone number to be required, you could add:

$("#interaction_phone").rules("add", { required:true, messages: { required: "! required" } 
back to top

Available Variables in the Support Center

A note on usage: if you're using a variable would like to output its value, use the curly brackets to tell the Liquid interpreter to output this variable, e.g. {{home_link}}). If you are using a variable name inside an expression or within another Liquid tag, you don't need the curly brackets. You can find the list of variables used in the Desk.com Support Center here: List of Liquid Variables in Desk.com


Note: The feature(s) in this article requires the Standard Plan or above. To upgrade your account, log in to the Admin panel and click "Billing" on the right. See the overview of our pricing plans or reach out to Sales for more info.