Articles in this section
Authenticate Emails with SPF, DKIM, and SenderID Auto forward your emails to Vtiger Managing User Profiles Automate Outgoing Emails in Email Settings Automation - Approvals Automation - Assignment Rules Set up Multi-path Workflows Creating a Scheduled Workflow Automation - Scheduler Creating a Workflow Webforms in Vtiger CRM Set up a Workflow Action to Create Event Set up a Workflow Action to Create Records Set up a Workflow Action to Create Task Set up a Workflow Action to Invoke Custom Function Set up a Workflow Action to Create an SMS Task Set up a Workflow Action to Send Mails Set up a Workflow Action to Update Fields Automation - Workflow Action - Webhook Automation - Workflows - Vtiger Expressions Configuration - Business Hours Configuration - Company Details Configuration - Consents Configuration - Customer Portal Maps in Vtiger CRM Configuration - Usage Details Configuring Encrypted Data Fields in Vtiger CRM Configure Picklist Dependencies Considerations for Deactivating Vtiger Users Control Fields and Record Displays using Configuration Editor Create Reminders for Records and Inbox Create a field of a Grid type Dealing with Currencies and Taxes Enable Desktop Notifications on Chrome Web Browsers Vtiger CRM Add-ons IMAP Configuration - 2-way sync between Vtiger and IMAP providers Setting up Autopay & Payment Gateways Inventory - Tax Management Inventory - Terms and Conditions Login to Vtiger on SSO SAML using ADFS Mailroom Functionality for Different Scenarios Manage Multiple Currencies Marketing and Sales - Deal to Project Mapping Marketing and Sales - Lead Conversion Data Mapping Marketing and Sales - Profile Scoring Module Management - Labels Editor Module Management - Module Numbering Configure My Preferences Feature My Preferences - Calendar Settings Tags in Vtiger My Preferences - Notification Preferences SAML Support in Vtiger CRM Vtiger Mailroom Settings - Configure Module Settings Settings - Create Dynamic Fields and Layouts Module Management - Creating a Relationship Between Modules Settings - Customize Records and Fields for your Business Settings - How to set email autoresponder to Webform submission? Settings - Left Menu Settings - Manage Global Picklists in Vtiger Settings - Set up your Support Team Settings - Start Up Page Settings - Working with Picklist Values Module Management - Module Builder Support - SLA Policies Troubleshooting Login Issues Add-Edit Unsubscribe Links in your Email Template User Management - Authentication User Management - Encrypted Field Access Logs User Management - Groups User Management - Login History User Management - Profiles User Management - Roles User Management - Settings Log User Management - Sharing Rules User Management - Users User Management - Vtiger Support Access Vtiger Buzz - Chrome Extension for Notifications Vtiger Implementation wizard Vtiger Language Support Configuring Websense Trackers Websense - Widgets Module Management - Module Layouts & Fields Generate and Manage Third-party App Passwords in Yahoo Configuring App Passwords for Gmail Outgoing Server and Yahoo Mail Configuration - Storage Guard Automation - SMS Reply Actions Adding Hidden Fields to a Webform Configuring Dependent Fields and Blocks for Modules Auto forward Emails from Microsoft Office 365 Adding Custom Module Login Page Customization Settings - Personalize Module Layouts Module Management - Modules Duplicate Prevention in Modules Formula Fields Creating Custom Filters Adding a local DNS Entry

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
11 Feb, 2025 - Updated  2 months ago

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. 


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.
  2. Click the Main Menu.
  3. 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).
 

Home Privacy Policy Terms of Service Security Center Policy & Legal Center Contact Us
© Copyright 2025 Vtiger. All rights reserved.
Powered by Vtiger
Facebook Twitter Linkedin Youtube