Home  »  Header & Footer Customization

Header & Footer Customization

Tags:  

Customize Header & Footer

The customize option enables you to change the header and footer of your portal by updating the relevant HTML Code. You can also use these options to relocate the side bar too. Doing this customization only needs HTML knowledge and some basic condition checks (like if conditions). Using this customization options, you can:
  • Remove all Zoho related links
  • Insert images, Ads, links and other branding information
  • Re-layout and customize standard menu options (like recent posts, new topic etc).


To customize portal header: 
  1. Go to Settings > Look & Feel section.
  2. Click on Customize > Customize Header and Footer tab.
  3. Specify the appropriate HTML code in the Header HTML field to change your portal header.

  4. Enable the "I want to customize the header" check-box (Mandatory).
  5. Click on Apply.
    Your portal header will be changed. Example: See image below: 

To customize portal footer: 
  1. Go to Settings > Look & Feel section.
  2. Click on Customize > Customize Header and Footer tab.
  3. Specify the appropriate HTML code in the Footer HTML field to change your portal header.



  4. Enable the "I want to customize the footer" check-box (Mandatory).
  5. Click on Apply.
    Your portal footer will be changed. Example: See screenshot below:
     

Customize Secondary Header

This section enables you to customize the header of your main login page, which appears when your users want to login to your portal. 

To customize secondary header: 
  1. Go to Settings > Look & Feel.
  2. Click on Customize > Customize Header and Footer tab.
  3. Specify the appropriate HTML code in the Secondary Header HTML field to customize the login page header.


  4. Enable the "I want to customize the secondary header" check-box (Mandatory).
  5. Click on Apply.
    The header of your portal login will be changed. Example: See screenshot below:
 

Create Custom Login & Description

This section enables you to customize the text messages of your portal login page and the user welcome screen. Portal login page is the main page, which is visible for all users who want to log into your portal , while user welcome screen is the page which appears when your users accept the user invitation.

To update custom login text: 
  1. Go to Settings > Look & Feel.
  2. Click on Customize > Customize Portal Login Message tab.
  3. Enter a short note about your portal, which explains the purpose your online community in the Login field.
  4. Enable the Login check-box (Mandatory).

  5. Click on Apply.
    Your portal introduction message will be updated. Example: See screenshot below:


To customize welcome screen description: 
  1. Go to Settings > Look & Feel.
  2. Click on Customize > Customize Portal Login Message tab.
  3. Enter the welcome message for your users in the Description field.
  4. Enable the Description check-box (Mandatory).
  5. Click on Apply.
  6. The welcome message will be updated. Example: See screenshot below:


Note: For all these customizations, you need to upload the associated CSS, so that the change will take effect accordingly.

Sample Templates

Below is a list of sample templates, which you can download and paste the HTML codes in the relevant fields to customize your portal. 

Template to customize header: Download

This specific template helps you to remove all Zoho related links like My Portal, Help, Switch To etc., from your portal header. See example below:


 

Template to customize footer: Download 

This specific template helps you to remove all Zoho related links from the footer. See example below:


Template to customize user login page: Download

This specific template helps you to remove all Zoho related links from your portal login page. See example below:

Sample Custom Style Sheet: Download

You need to upload this CSS along with the above mentioned HTML Codes.

Check-List: Before updating the templates, please make sure that you have followed the instructions listed below:
  • Replace the "portal name" text with your the exact portal name, which is updated in your general settings. Example: Replace <a href="http://commentbox.zoho.com/portalname"> with <a href="http://commentbox.zoho.com/testportal">
  • Modify the sample templates to update specific details like Logo, portal name etc. - according to your business need.

Sample Websites

Listed below are our popular customizations and this kind of customizations can also be done to your portal.
 

<< Portal Customization                                                                                                                                                               Portal Theme >>





 RSS of this page