This article provides details on the advanced portal (theme) customization options that enable you to design your customer portal.


In addition to the basic color and font options, Freshdesk offers advanced portal customization capabilities that let you define every detail of your support portal. You can use the developer-friendly code editor to apply advanced CSS customization to design your portal structure and layout. For example, you can change the layout of the form buttons or modify the appearance of the Knowledge Base and Community sections.


Tip: You can use the different placeholders within the code editor to autmatically add elements.

View and access portal pages and layouts

To perform advanced layout and page customization using the code editor:

  1. Go to Admin > Portals and click edit next to any portal.
  2. Switch to the Appearance tab.
  3. On the Appearance tab, choose the theme you want to edit. If you want to edit a live theme, click Clone & Edit theme. To change other available themes, click Edit theme.
  4. You will be redirected to the portal customization page. 
  5. Switch to the Pages tab. Here you can customize the different sections of your portal.
  6. Click on each page/section on the left pane to view the corresponding CSS on the code editor. The different sections you can customize are:
    1. Layout
    2. Pages

Personalize page layouts

The Layout section allows you to customize the primary components of your portal such as header, footer, and page layout.


Header:

The header comprises of the tabs and top navigation elements you would like to display in your help desk. You can also add links to any external styles and preloaded scripts. You can call the header partial using the {{ header }} tag.


Footer:

The footer includes information like the copyright text. You can also external JavaScript snippets to third party tools. You can use the footer partial by using the {{ footer }} tag.


Page Layout:

This is the most important part of your theme; it controls the way everything works. The page layout should ideally include the following markups:


{{ header }} - will be replaced by your header code

{{ footer }} - will be replaced by your footer code

{{ content_for_layout }} - will be replaced by specific Page-level Customizations

(e.g. Portal home, Discussions home, Solutions home). Note: Please do not remove this placeholder from the code.


The {{ content_for_layout }} tag is the partial that will bring corresponding information from the specific portal pages. For example, when you click on a specific Solution Article, the page layout would display the {{ header }} on top, the {{ footer }} in the bottom, and replace the {{ Content_for_layout }} area with the solution article (and all it’s layout and style).


Customize page layouts

The customer portal contains 17 pages that can be easily customized and designed to match your brand and company style. The various portal section and the pages are

  1. General
  2. Solutions
  3. Discussions
  4. Tickets

General

Portal home

This is your portal’s home page. By default, your portal home shows a link to your recent Knowledge base, forum posts, and the option for your users to log in or submit a new ticket. You can add a welcome message, phone number, and links to some of the latest products in your store.

Login page

The login page for your users. Click on the Login page on the left panel to view the code. The code snippet used is {% snippet login_form %}.


New user signup

The signup page for your users. You can skip this if you already use single sign-on. The snippet for the form is

{% snippet signup_form %} {% snippet agent_login %}


Search results

Defines the layout of the results page when customers search for anything in the portal.  

Solutions

The hierarchy of solutions is Solution Category > Folder > Article. Every step has a separate page. For more information on creating solutions or Knowledge Base, see About Freshdesk Knowledge Base.


Note: You can enable or disable the Knowledge Base on your portal, control the visibility of Knowledge Base articles, and more. For details, see Manage Portal Sections.


Solutions home

This is the primary solutions page. You can customize it to show all categories, with the folders organized under each category. You can also display the Category Description under each category.


Article list

This is the list of articles under a specific folder. Consider adding a folder description.


Article view

This is the detailed view of each solution article. You can also define how attachments, images and the voting options should look. 


Solution Category Home

The Category Home page that displays a specific category and the folders, subfolders, and articles within the category. 

Discussions

The hierarchy of Forums is Category > Forum > Topic. For more information on creating forums and managing forums, see Setting up your Community Forums.


Note:You can enable or disable Forums on your portal, control the visibility of forum topics, and more. For details, see Manage Portal Sections.


Discussions home

This is the main forums page. You can show the various forum categories here.


Discussion category home

This page appears when you click on the category name. It consists of all the Forums and all the topics.


Topic list

This is the list of all topics under a particular Forum.


My topics

This page contains the list of topics that a user follows (by clicking on the follow button in the topic). This page will be seen only by a logged in user and only when the number of topics she follows is greater than 5. In the default view, the "My topics" section can be seen on the right panel of the Discussions home page. And the my topics page is brought up when the user clicks on the see all topics button.


Topic view

This defines how a specific forum topic thread would look. You can customize the way comments look, and stylize the look and feel of each thread based on the topic or forum type. 


New topic

This page appears when users click on the Post a topic button. The snippet for the new topic form is {% snippet new_topic_form %}.

Tickets

The Tickets section or option is enabled by default on the portal. However, you can disable it and also control the visibility of tickets, choose the ticket forms to display to your customer, and more. For details, see Manage Portal Sections.

New ticket

Customize and design the layout ticket forms. You can also decide the list of ticket forms that should be displayed for the customer. The ticket form appears when the customer clicks on Submit a ticket button on the portal. The snippet for the new ticket form is {% snippet new_ticket_form %}.


Ticket list

This page appears when a user clicks on the Check ticket status link. It lists down all the tickets created by that particular user and their statuses.


Ticket details

This page appears when the user clicks on a particular ticket they created to check the status. Customers can reply to the ticket, change the status and do more.