Last updated: 2026-03-16
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 - Portal home - Login page - New user signup - Search results 2. Solutions - Solutions home - Article list - Article view - Solution Category Home 3. Discussions - Discussions home - Discussion category home - Topic list - My topics - Topic view - New topic 4. Tickets - New ticket - Ticket list - Ticket details
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.