Support Help

Customizing Portal with HTML and CSS

Customize your customer facing self-service portal to more closely match the look and feel 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 (cascading style sheets) code. You can write style sheets to set background and text colors; customize borders; set the font sizes and customize placement of elements, etc.

Customizing HTML Script

Customize the header and footer elements of the portal 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, follow the steps given below:

  1. Click Setup.
  2. In the Channels section, click Customer Portal and then click Portal Customization.
  3. In the Portal Customization page, click Customize and then toggle to HTML from the left panel.
  4. In the HTML page, you can customize the elements for the header by adding the appropriate code.
  5. Click Preview to review the changes you'd done.
  6. Click Publish.

You can similarly customize the elements in the Footer section of your portal.

Note:

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

Default HTML Placeholders

You're provided with certain default HTML placeholders to customize the portal.

Here is the list of available placeholders:

  • Home
  • My Tickets
  • Submit a Ticket
  • Solutions
  • Community
  • Company Logo
  • Company Name and
  • Sign In/Sign Out

Note:

  1. The placeholders like Home, My Tickets, Submit a Ticket, Solutions and Community are provided with hyperlinks and hence the 'href' attribute will be auto-specified.
  2. The Community placeholder will be displayed (even on addition) only when your account is enabled for Community Forums.

To add a placeholder to the HTML section, follow the steps given below:

  1. Go to HTML section in the Portal Customization page.
  2. In the HTML page and within the appropriate div tags, type '$' to list the default placeholders.
  3. Hit Enter(or Return) to add a placeholder. Say, Company Logo.
  4. Click Preview to view the logo that has been added.
  5. Click Publish.

Customizing CSS Code

Customize the CSS of your customer portal, to tailor its look and feel to your users.

To customize the CSS (cascading style sheets) code, follow the steps given below:

  1. Click Setup.
  2. In the Channels section, click Customer Portal and then click Portal Customization.
  3. In the Portal Customization page, click Customize and then toggle to CSS from the left panel.
  4. In the CSS page, you can customize the style sheet elements entirely from scratch.
  5. Click Preview to review the changes you'd done.
  6. Click Publish.

The custom CSS will be applied to every page on your customer portal.

Import Style Sheets

You can import style sheets from an external resource into Zoho Support.

To import CSS (cascading style sheets) code, follow the steps given below:

  • Go to CSS section in the Portal Customization page.
  • In the CSS page, click Import CSS.
  • In the following window, click Upload to select a file.
  • The CSS from the uploaded file will be copied to the page.
  • Click Preview to review the changes you'd done.
  • Click Publish.

Note:

  1. The uploaded CSS file should be about 1MB or less in size.
  2. The CSS file should be in .txt or .css format.

Top