FAQs: Modifying CSS to customize Help Center | Zoho Desk

FAQs: Modifying CSS to customize Help Center

Preparing CSS Safely

What file format and size are accepted for custom CSS?
Upload the stylesheet as a .css or .txt file. The file must not exceed 1 MB.

Keeping the file within the limit is particularly important when it contains extensive branding rules. Avoid embedding unnecessarily large content so the stylesheet remains manageable and eligible for upload.
Should existing element IDs be changed when writing custom CSS?
No. Retain the existing id attributes and use them as selectors when targeting Help Center elements.

The existing IDs are tied to the Help Center’s structure. Changing them can prevent styles from reaching the intended element and may interfere with the expected page layout. A safer approach is to write rules that target the supplied IDs rather than replacing the attributes themselves.
For example:
  1. #existing-element-id {
  2.   background-color: #123456;
  3.   color: #ffffff;
  4. }
Replace existing-element-id only with an ID already present in the Help Center structure.
What types of visual changes can CSS make?
CSS can be used to alter the appearance and positioning of existing Help Center elements, including:
  1. Background and text colors
  2. Fonts and font sizes
  3. Borders
  4. Spacing and visual placement of elements
  5. Styling applied to HTML elements already available in the Help Center
For example, a company can apply its brand colors to the header, enlarge article headings for readability, and soften card borders—without changing the Help Center’s content or navigation structure.
Can CSS add a missing button, tab, or form field?
No, CSS does not add new functional interface elements. It can style an existing button, tab, or field, but it cannot create one.
Use HTML customization when the required element must be added to the header or footer. If the requested change requires behavior rather than appearance—for example, showing or hiding content based on a condition—custom JavaScript may be relevant, subject to its availability and enablement requirements.

Working With HTML and Theme Elements

Can custom CSS be used with customized HTML?
Yes. Custom HTML and CSS can work together where both capabilities are available. HTML defines or adjusts the header and footer elements, while CSS controls how those elements appear.

For example, an Enterprise customer could customize the header to include the company name and sign-in link, then use CSS to apply the company’s font, spacing, and color palette to those elements.
What happens to tab customization after HTML is customized?
Tab customization is unavailable once HTML has been customized.

This is an important planning consideration: if the organization needs to control header tabs through the standard tab customization experience, complete that work before moving to a custom HTML implementation. Once custom HTML is in use, header navigation should be managed through the HTML itself.
Can Help Center placeholders be styled with CSS?
CSS can style the rendered elements associated with placeholders when they are present in the Help Center’s HTML. Placeholders are available for items such as the company logo, company name, sign-in/sign-out link, search, knowledge base, community, and footer links.

The availability of certain placeholders varies by theme. For example:
  1. Add Ticket and Add Topic are available in the Classic theme.
  2. Breadcrumbs are available in the Classic theme.
  3. FormShortcut is available in the Materialize theme.
  4. User Preference is available in Elegant and Materialize themes.
  5. Welcome Text and Welcome Description are available in Elegant and Classic themes.
Before writing styles for a theme-specific element, confirm that the selected theme supports the corresponding placeholder.

Previewing and Publishing

Should changes be published immediately after uploading CSS?
No, Review the result in Preview before publishing.

Previewing helps identify issues such as low-contrast text, overlapping navigation, spacing problems, or a selector affecting more elements than intended. Once the appearance is confirmed, publish the changes to apply them to the Help Center.

A practical review should include the header, footer, search area, navigation links, and article pages—not only the Help Center home page.
What should be checked before publishing a new stylesheet?
Review the following areas:
  1. Brand colors remain readable against their backgrounds.
  2. Font sizes are legible in navigation, headings, and body content.
  3. Borders and spacing do not obscure content or make controls difficult to identify.
  4. Rules target existing IDs and do not depend on altered Help Center markup.
  5. Theme-specific elements used by the stylesheet are available in the active theme.
  6. The stylesheet is in .css or .txt format and is no larger than 1 MB.
For instance, a dark header may look appropriate until the sign-in link inherits a dark text color. Previewing exposes this type of contrast issue before visitors encounter it.
When is HTML customization a better option than CSS?
Use HTML customization when the goal requires changing the header or footer’s actual content or structure—for example:
  1. Adding or removing header tabs
  2. Adding a company name or logo arrangement not supported by the standard layout
  3. Adding sign-in, sign-up, or sign-out links in a custom arrangement
  4. Reorganizing header or footer elements
HTML customization is Enterprise-only. CSS remains the suitable option when the desired result is purely visual.
When is JavaScript needed instead of CSS?
Use JavaScript only when the Help Center needs behavior that CSS cannot provide, such as:
  1. Adding third-party analytics, chat, or payment scripts
  2. Dynamically showing or hiding elements based on conditions
  3. Interacting with Help Center components or extending interface behavior
JavaScript customization is an Enterprise capability enabled on request. The Custom Script setting must also be enabled in the Help Center access settings before the JavaScript customization tab is available.
Can third-party analytics or chat widgets be added through CSS?
No, CSS only controls presentation. Third-party scripts, including analytics trackers and chat widgets, require JavaScript customization.

Inline scripts can be used for third-party code, while custom functions belong in the JavaScript function area. This capability must be enabled before it can be used.