Knowledge Base Zoho Desk For Administrators Multi-channel Support

            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.


            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. Click the Setup icon ( ) in the top bar.
            2. In the Setup Landing page, click Help Center under Channels.
            3. In the Access Settings page, click Help Center Customization from the left panel.
            4. In the Help Center Customization page, click Customize.
            5. On the Widgets page, click HTML from the left panel.
            6. In the HTML page, you can 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 the changes you'd done.
            8. Click Publish.

            • The HTML section will contain the code for the default elements in the header and footer.
            • You can click Reset to restore the HTML content to the previously published state.

            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:
            • Home
            • My Area
            • Submit a Ticket
            • Knowledge Base
            • Community
            • Company Logo
            • Company Name
            • Sign In / Sign Out
            To add a placeholder:
            1. In the Help Center Customization page, click HTML from the left panel.
            2. In the HTML page, type '$' within the div tags to view a list of the placeholders.
            3. Click Enter(or Return) to add a placeholder. For example, Company Logo.
            4. Click Preview to review the changes you'd done.
            5. Click Publish.

            • The placeholders, namely Home, My Area, Submit a Ticket, Knowledge Base, and Community 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. In the Help Center Customization pageclick CSS from the left panel.
            2. In the CSS page, customize the style sheet elements.
            3. Click Preview to review the changes you'd done.
            4. 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 Import CSS 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. 
            Help us to make this article better
            0 2