Zoho Backstage: Change the Active Tab Highlight Colour

Zoho Backstage: Changing the Active Tab Highlight Colour on a Microsite

On a Zoho Backstage event website, the link for the page you are currently on is shown with a highlight, for example a coloured pill behind the Home tab. Many organisers want that highlight to match their brand colour. This article explains where to set it, and what to do if you cannot find the setting.

The issue

You want to change the colour of the active tab highlight, for example from a default pink to a brand blue, but you cannot find where to do it.

Where to change it

Zoho's documentation for the navigation bar describes two settings that control the active link, both in the Navigation Bar Settings panel of the Website Designer:

  1. From the Dock, go to Design, then Website, and click Edit Website.
  2. Hover over the navigation bar in the preview and click the Settings icon.
  3. Choose the shape. Under Active Link Style, pick how the active link is highlighted: Box, Rhomboid, Pill, Underline, Upperline, or Border. Choose Pill for the rounded capsule look.
  4. Choose the colours. Click Navigation Bar Colors and set Active Link Background, which is the colour behind the active link, and Active Link Text, which is the text colour on it.
  5. Click Republish to make the change live.

For the full list of navigation bar settings, see Zoho Backstage: Managing the Navigation Bar, Links and Buttons.

If you cannot find that setting

  1. Check the Navigation Bar Colors panel in your own account, and confirm Active Link Background is there.
  2. If it is missing, open the microsite's theme settings, choose a theme that suits your design, and set the focal colour to your brand colour or the closest available. The highlight is likely to follow it.
  3. Preview before you publish. A change to the focal colour is likely to affect other elements that use the same accent, so review the whole microsite and not only the tab bar.

How to check it worked

  • Open the microsite in a private browser window, so you are not looking at a cached copy.
  • Click through each tab and confirm the highlight, links, and buttons look as intended.
  • Check the result on a phone, because accent colours can look different on smaller screens.
Need help? As a Zoho Partner serving the UK and Ireland, we can set up and brand your Zoho Backstage microsite. If an exact brand colour for the active tab is essential and neither route gives it to you, we can look at what is achievable. Email zoho@1cloudconsultants.com or raise a support request with 1 Cloud Consultants.