Be a part of Diziana Community to get advice from our customer service pros and try various tips and tricks.

Making coding changes to a Theme

If you're a web designer or a web-savvy administrator, you can work with the page code used to build the Help Center. The code is contained in editable templates that define the layout of each page type, as well as the global header and footer of the Help Center. Special templates let you add JavaScript or customize the site's CSS.

Customizing the HTML

Customizing the CSS or JavaScript

Using variables in the CSS

Allowing unsafe HTML in pages

Uploading and using your own assets

Customizing the HTML

The HTML for the Help Center is contained in editable templates that define the layout of each page type, as well as the global header and footer. You can customize the template of any of the following page type or element:

the Help Center home page

category landing pages in the knowledge base

section landing pages in the knowledge base

article pages in the knowledge base

the search results page

the error page

the header and footer

the document's head tag

the request list pages

the community pages

the submit a request page

To edit the HTML

Click Customize design in the tools panel on the lower-right side of the page. The Help Center switches to Preview mode with the currently applied theme at the top of the sidebar.

Click Edit Theme.Zendesk make a copy of the existing theme. Any changes you make are applied to the copy, not the original. You can revert to the original theme at any time.

Select a template to modify from the HTML menu in the Theme editor.

Use the code view to edit the template. You can add, remove, or reorder any the following:

Template components that represent elements that you can add to your pages. For example, the breadcrumbs component displays a breadcrumb navigation element on a page.

Dynamic content placeholders.

Embeddable widgets created by third parties (such as the Twitter search widget)

HTML markup

Click Preview to preview the effect of your changes on the page.

To save your changes, click Save at the top of the sidebar.The changes are not deployed to Help Center until you click Publish changes at the top of the sidebar. If you want to keep working on the theme later, click Close at the top of the sidebar. Your changes are saved.

When you're ready to deploy your changes, click Publish changes at the top of the sidebar.The changes are applied to every page that's based on the template or templates you modified.

Customizing the CSS or JavaScript

You can add JavaScript code or customize the site's CSS.

To customize the CSS or JavaScript

Click Customize design in the tools panel on the lower-right side of the page.

Click Edit Theme.Zendesk make a copy of the existing theme. Any changes you make are applied to the copy, not the original. You can revert to the original theme at any time.

Click the CSS or the JS tab in the Theme editor.

Add or modify the CSS or JavaScript in the code view.

Click Preview to preview the effect of your changes.

To save your changes, click Save at the top of the sidebar.The changes are not deployed to the Help Center until you click Publish changes at the top of the sidebar. If you want to keep working on the theme later, click Close at the top of the sidebar. Your changes are saved.

When you're ready to deploy your changes, click Publish changes at the top of the sidebar.

Allowing unsafe HTML in pages

By default, the Help Center quarantines unsafe HTML tags and attributes in pages to reduce the risk of somebody introducing malicious code. See the list of safe tags and attributes below.

Note: Even if the Help Center doesn't strip safe tags from the HTML used for the site design, the Help Center uses a third party HTML article editor called TinyMCE that may strip some safe tags from the HTML of articles. For example, the editor removes <i> tags with no content, such as those used to display Font Awesome icons.

Example: <i class="fa fa-eyedropper"></i>.

The unsafe HTML is not stripped from your pages on the server. Rather, it's not included in the HTTP responses sent to browsers. As a result, pages might not render as intended in browsers. You can override the default setting to allow all the HTML to be sent to a browser.

Warning: Making this change will allow potentially malicious code to be executed when users open a page in a browser.

To allow unsafe HTML in HTTP responses

In the Help Center, click General Settings in the tools panel on the lower-right side of the page.

On the General Settings page, select the Display Unsafe Content option.

You can upload assets such as images and files to the Help Center. The assets are stored in a web cache in a cloud delivery network (CDN). Web caches reduce bandwidth requirements and server load, and improve response times.

Note: The cache is refreshed on a weekly basis. If you modify an asset and upload it again with the same name, the file might not be refreshed in the cache for up to a week. A workaround is to upload the modified asset with a different name and update any links to it.

To upload assets to the Help Center

Click Customize design in the tools panel on the lower-right side of the page.

Click Edit Theme.

Click the Assets tab in the Theme editor and do any of the following:

To upload an asset, click the Add file link. The file size limit is 50 MB.

To use an uploaded asset in your HTML, CSS, or JavaScript, copy the asset path and paste it in your template code.

To remove an asset from the list, hover the mouse over the asset and click the delete button that appears on the right.

Woking with the code

Header and footer

The header displays a logo and other components depending on the theme and user roles. You can use the footer to display related links, information about your company, or legal notices.

Change the background color of the header or footer

Change or add the background-color property in the following selectors.

.header {
background-color: #666;
}

.footer {
background-color: #333;
}

Change the height of the header or footer

Change or add the height property in the following selectors.

Header

.header {
height: 70px;
}

Footer

.footer {
height: 20px;
}

Change the space above or below the header or footer

Change or add margin-bottom and margin-top properties in the following selectors.

Header

.header {
margin-bottom: 20px;
}

Footer

.footer {
margin-top: 10px;
}

Change the appearance of the selected language Add the following selector and property:

.language-selector .dropdown-toggle {
color: green;
}

Change the appearance of the Submit a Request link Add or modify text properties in the following selector:

.submit-a-request {
font-size: 14px;
color: green;
}

Change the appearance of the Sign In link Add or modify text properties in the following selector:

.login {
font-size: 14px;
color: green;
}

Search

The search box looks for content in both the knowledge base and community and displays links on a results page. If you want, you can remove the search box.

To change the link color, add or modify the following selector and property:

.question-author a {
color: #484;
}

Because the question author's name, the time since the question was published, and the share link are usually grouped together on a page, it makes good design sense to make all three elements look the same. To do so, use the following combined selector:

To change the link color, add or modify the following selector and property:

.answer-author a {
color: #484;
}

Because the answer author's name, the time since the answer was published, and the share link are usually grouped together on a page, it makes good design sense to make all three elements look the same. To do so, use the following combined selector:

If you're a web designer or a web-savvy administrator, you can work with the page code used to build the Help Center. The code is contained in editable templates that define the layout of each page type, as well as the global header and footer of the Help Center. Special templates let you add JavaScript or customize the site's CSS.

Customizing the HTML

Customizing the CSS or JavaScript

Using variables in the CSS

Allowing unsafe HTML in pages

Uploading and using your own assets

Customizing the HTML

The HTML for the Help Center is contained in editable templates that define the layout of each page type, as well as the global header and footer. You can customize the template of any of the following page type or element:

the Help Center home page

category landing pages in the knowledge base

section landing pages in the knowledge base

article pages in the knowledge base

the search results page

the error page

the header and footer

the document's head tag

the request list pages

the community pages

the submit a request page

To edit the HTML

Click Customize design in the tools panel on the lower-right side of the page. The Help Center switches to Preview mode with the currently applied theme at the top of the sidebar.

Click Edit Theme.Zendesk make a copy of the existing theme. Any changes you make are applied to the copy, not the original. You can revert to the original theme at any time.

Select a template to modify from the HTML menu in the Theme editor.

Use the code view to edit the template. You can add, remove, or reorder any the following:

Template components that represent elements that you can add to your pages. For example, the breadcrumbs component displays a breadcrumb navigation element on a page.

Dynamic content placeholders.

Embeddable widgets created by third parties (such as the Twitter search widget)

HTML markup

Click Preview to preview the effect of your changes on the page.

To save your changes, click Save at the top of the sidebar.The changes are not deployed to Help Center until you click Publish changes at the top of the sidebar. If you want to keep working on the theme later, click Close at the top of the sidebar. Your changes are saved.

When you're ready to deploy your changes, click Publish changes at the top of the sidebar.The changes are applied to every page that's based on the template or templates you modified.

Customizing the CSS or JavaScript

You can add JavaScript code or customize the site's CSS.

To customize the CSS or JavaScript

Click Customize design in the tools panel on the lower-right side of the page.

Click Edit Theme.Zendesk make a copy of the existing theme. Any changes you make are applied to the copy, not the original. You can revert to the original theme at any time.

Click the CSS or the JS tab in the Theme editor.

Add or modify the CSS or JavaScript in the code view.

Click Preview to preview the effect of your changes.

To save your changes, click Save at the top of the sidebar.The changes are not deployed to the Help Center until you click Publish changes at the top of the sidebar. If you want to keep working on the theme later, click Close at the top of the sidebar. Your changes are saved.

When you're ready to deploy your changes, click Publish changes at the top of the sidebar.

Allowing unsafe HTML in pages

By default, the Help Center quarantines unsafe HTML tags and attributes in pages to reduce the risk of somebody introducing malicious code. See the list of safe tags and attributes below.

Note: Even if the Help Center doesn't strip safe tags from the HTML used for the site design, the Help Center uses a third party HTML article editor called TinyMCE that may strip some safe tags from the HTML of articles. For example, the editor removes <i> tags with no content, such as those used to display Font Awesome icons.

Example: <i class="fa fa-eyedropper"></i>.

The unsafe HTML is not stripped from your pages on the server. Rather, it's not included in the HTTP responses sent to browsers. As a result, pages might not render as intended in browsers. You can override the default setting to allow all the HTML to be sent to a browser.

Warning: Making this change will allow potentially malicious code to be executed when users open a page in a browser.

To allow unsafe HTML in HTTP responses

In the Help Center, click General Settings in the tools panel on the lower-right side of the page.

On the General Settings page, select the Display Unsafe Content option.

You can upload assets such as images and files to the Help Center. The assets are stored in a web cache in a cloud delivery network (CDN). Web caches reduce bandwidth requirements and server load, and improve response times.

Note: The cache is refreshed on a weekly basis. If you modify an asset and upload it again with the same name, the file might not be refreshed in the cache for up to a week. A workaround is to upload the modified asset with a different name and update any links to it.

To upload assets to the Help Center

Click Customize design in the tools panel on the lower-right side of the page.

Click Edit Theme.

Click the Assets tab in the Theme editor and do any of the following:

To upload an asset, click the Add file link. The file size limit is 50 MB.

To use an uploaded asset in your HTML, CSS, or JavaScript, copy the asset path and paste it in your template code.

To remove an asset from the list, hover the mouse over the asset and click the delete button that appears on the right.

Woking with the code

Header and footer

The header displays a logo and other components depending on the theme and user roles. You can use the footer to display related links, information about your company, or legal notices.

Change the background color of the header or footer

Change or add the background-color property in the following selectors.

.header {
background-color: #666;
}

.footer {
background-color: #333;
}

Change the height of the header or footer

Change or add the height property in the following selectors.

Header

.header {
height: 70px;
}

Footer

.footer {
height: 20px;
}

Change the space above or below the header or footer

Change or add margin-bottom and margin-top properties in the following selectors.

Header

.header {
margin-bottom: 20px;
}

Footer

.footer {
margin-top: 10px;
}

Change the appearance of the selected language Add the following selector and property:

.language-selector .dropdown-toggle {
color: green;
}

Change the appearance of the Submit a Request link Add or modify text properties in the following selector:

.submit-a-request {
font-size: 14px;
color: green;
}

Change the appearance of the Sign In link Add or modify text properties in the following selector:

.login {
font-size: 14px;
color: green;
}

Search

The search box looks for content in both the knowledge base and community and displays links on a results page. If you want, you can remove the search box.

To change the link color, add or modify the following selector and property:

.question-author a {
color: #484;
}

Because the question author's name, the time since the question was published, and the share link are usually grouped together on a page, it makes good design sense to make all three elements look the same. To do so, use the following combined selector:

To change the link color, add or modify the following selector and property:

.answer-author a {
color: #484;
}

Because the answer author's name, the time since the answer was published, and the share link are usually grouped together on a page, it makes good design sense to make all three elements look the same. To do so, use the following combined selector: