Home  >   Articles   >  Customizing your Self-Service Portal Theme Using CSS Styles
Articles in this section

Customizing your Self-Service Portal Theme Using CSS Styles

This article guides you through customizing your Self-Service Portal theme using CSS style guides.
A
Abdul Sameer
4 Apr, 2024 - Updated 7 months ago
Table of Contents

Introduction

Customer Portal in Vtiger CRM enables self-service to your customers. They can create a Case if there are any issues. It helps you manage a healthy Customer relationship. 

alt text


It also allows customers to view the Knowledge Base (FAQ), Invoice, Quotes, Products, Services, Documents, Contacts, Accounts, Assets, and Projects related to him/her and his/her Organization if enabled.

Vtiger CRM provides an option to change the default theme of the Menu bar appearing in the Customer Self-service portal. To do so, you just need to 

  • Create a Cascading Style Sheets (CSS) file per your business requirement.
  • Upload the CSS file to your server.
  • Paste the URL into the Customer Portal settings page. 

Key Terminology 

CSS

CSS describes how HTML elements are displayed on the screen, paper, or other media. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files.

Customer Portal

A customer portal is a personalized website offering customers a single point of access to relevant company information and self-service options.

Server

A server is a pooled, centralized resource hosted and delivered over a network and accessed on demand by multiple users. Cloud servers can perform all the same functions of a traditional physical server, delivering processing power, storage and applications.

Customizing Portal Theme

Creating a Custom Theme

Consider changing the color of the Menu bar from the existing color to a custom color. 

Follow these steps to create a custom theme:

  1. Create a CSS file in the following format. Visit w3schools to learn more.

.menu .navbar.navbar-inverse { background: #FFD700 !important; }

  1. Save the file locally.
  2. Upload it to your server to generate a URL. For example, https://grasspods-doc.od2.vtiger.com/portal_css_sample.css

In the sample above, the existing color of the Menu bar is changed to gold with code #FFD700.

Note: Visit the following website for preferred color code and free instructions to create CSS files - https://www.w3schools.com/cssref/css_colors.asp

Changing the Portal Theme

Follow these steps to customize the portal theme:

  1. Log in to your CRM account.
 
  1. Click the User Menu.
  2. Click Settings.
 
  1. Look for Configuration.
  2. Click Customer Portal.
 
  1. Copy and paste the generated URL into the CSS URL for custom theme field.
  2. Click Save.

Customized Theme

In the customized Customer Portal, the color of the Menu bar is changed to gold (#FFD700).

alt text
Was this article helpful?
0  out of  1  found this helpful.
Comments 0
Be the first to comment
© Copyright 2023 Vtiger. All rights reserved.