Welcome to Portal

?Unknown\pull-down

Welcome to Zoho Cares

Bienvenido a Soporte de Zoho

Search our knowledge base, ask the community or submit a request.

Advanced Help Center Customization Using HTML and CSS

You can customize the appearance of the Help Center using the basic color themes. However, it has its limitations, as it doesn't allow you to rebuild the header and the footer completely as you like it to be. Here comes the advanced customization using HTML and CSS (cascading style sheets) for your rescue. Web-savvy Zoho Desk administrators can directly work on the Help Center's HTML and customize the site's CSS as per your requirements. Your Help Center can even look like an extension of your company's website.

With support for custom HTML, you can add or delete the tabs from the header section. You can also apply style definitions to the elements of your HTML, using  CSS code. For example, you can write style sheets to set background and text colors; move tabs to a different location; customize borders; set the font sizes and customize the placement of elements, etc.

Permission Required
Users with the Support Channels administrative permission can access this feature.
Check Feature Availability and Limits

Note:
  • HTML customization is available only for customers on the Enterprise edition.
  • CSS customization is available for customers on both Professional and Enterprise editions.

Customizing HTML Script
Customize the header and footer elements of the Help Center using HTML script. You can customize logo, provide Sign In; Sign Up; and Sign Out links, add your Company Name and so on.
To customize the HTML:
  1. Go to Setup (  ) > Channels > Help Center.
  2. Select the Help Center in which you want to customize the HTML.
  3. Click Help Center Customization under the Help Center sub-menu.
    The
    Themes list page is displayed.
  4. Click Customize corresponding to the published theme.



  5. Select the HTML tab on the Customize page's sidebar.
  6. Customize the elements for the Header by adding the appropriate code.
    Also, you can click
    Footer to customize its elements.
  7. Click Preview to review your changes.
  8. Click Publish.

Note:
  • The HTML section will contain the code for the default elements in the header and footer.
  • You can click Reset to default to restore the HTML content to the previously published state.
  • Tab customization is not available when you have customized the HTML.

Using Default HTML Placeholders
Zoho Desk provides you with a couple of default HTML placeholders that can be used to customize the Help Center. Here is the list of the placeholders available for the header and the footer areas:

Area
Placeholder Name
Available Themes
[Header]
Home
All

My Area
All

Community
All

Knowledge Base
All

Company Logo
All

Company Name
All

Sign In / Sign Out
All

Link Back URL
All

Add Ticket
Classic

Add Topic
Classic

Breadcrumbs
Classic

FormShortcut
Materialize

User Preference
Elegant and Materialize

Search
All

SearchHome
All

Welcome Text
Elegant and Classic

Welcome Description
Elegant and Classic



[Footer]



Help Desk
All

Help Desk Link
All

Help Desk Terms
All

Help Desk Terms Link
All

Help Desk Privacy
All

Help Desk Privacy Link
All

PoweredBy
All

To add a placeholder:
  1. On the HTML page, type '$' within the div tags to view a list of the placeholders.
  2. Click Enter(or Return) to add a placeholder. For example, Company Name.



  3. Click Preview to review your changes.
  4. Click Publish.

Note:
  • HTML customizations are not supported in the Flat theme.
  • Most of the placeholders are provided with hyperlinks. So, you are not required to give the 'href' attributes.
  • The community placeholder will be displayed only when you have enabled Community for your Zoho Desk.

Customizing CSS Code
You can use the CSS editor to customize the appearance of your Help Center. It works by allowing you to add your CSS styles, which overrides the default styles.

To customize the CSS:
  1. Go to Setup (  ) > Channels > Help Center.
  2. Select the Help Center for which you want to customize the HTML.
  3. Click Help Center Customization under the Help Center sub-menu.
    The 
    Themes list page is displayed.
  4. Click Customize corresponding to the published theme.
  5. Select the CSS tab on the Customize page's sidebar.



  6. Customize the style sheet elements.
  7. Click Preview to review your changes.
  8. Click Publish.
The custom CSS will be applied to all the pages on your Help Center. 

Another way of customizing CSS is to import them from an external resource. You can click the Import CSS icon (  ) to upload a CSS file into Zoho Desk. Please ensure that you upload a CSS file in .txt or .css format and not exceeding 1 MB in size.

Important:
  1. Use the existing id attributes for targeting your new CSS rules to the correct element. This is essential to retain the HTML structure and elements.

Helpful?1128
Updated: 5 months ago
Share :
4 comments

In the desk widget editor, when you click edit html and you set up an internal link

<a href="#web_hub ...

and you create an appropriate id selector

<h1 id="web_hub" ...

When you re-edit the desk widget, the id has been removed.

REALLY frustrating

We have custom CSS set up for the Knowledge Base part of our help centre. When we create a new article and preview it, the preview does not reflect the correct design. How do you configure the Preview to actually show what the article will look like?

 I run into the same problem, I just publish it, view it and edit. If it is not for public consumption or requires additional approvals before release, your team will  have to find a work around. 

Is there a placeholder for the language switch? I cannot find it.