How to Customize Your Self-Service Portal Using Custom Stylesheets

Custom Stylesheets – What Are They? Why Should You Use Them to Customize Your Portal?

In Freshservice, organizations have many ways to customize and brand the organizational portal. One of the most versatile ways to modify the layout and style of the portal’s visual presentation is by adding Cascading Style Sheets (CSS).

Admins who are familiar with using CSS to design web pages can apply Custom Stylesheets to their Freshservice platform, providing even greater flexibility to customize the portal’s appearance beyond the default options.

This level of customization enables organizations to create a unique visual layout and provide a cohesive visual identity to their user community, tailoring the portal’s look to align with brand identity while enhancing the overall user experience.

We recommend having a basic understanding of CSS before attempting to customize the portal in this way.

Benefits - Custom Stylesheets with the Freshservice Portal

• Distinct Branding
• Flexible Layout and Design
• Visual Appeal
• Improved User Experience
• Look More Professional
• Compliance and Accessibility
• Highlight Important Information
• Improved Mobile Responsiveness

Freshservice Tips and Tricks to Always Remember

• Tip: To perform this action, you should have a good understanding of CSS syntax, selectors, and properties. If you are new to CSS, we recommend learning the basics before attempting to modify your Freshservice portal.
• Tip: Use the “Preview” button often to test your changes prior to publishing.
• Tip: After publishing your changes, view your portal on different devices to ensure that the portal’s design and branding are appearing as intended.

How to Use and Add Custom Stylesheets in Freshservice?

To use and add Custom Stylesheets in Freshservice, follow these steps:

1. Navigate to the Admin area of Freshservice.
2. Locate and click on the "Service Desk Rebranding" button.
3. Select the "Portal Customization" button.
4. From the available options, choose the "Stylesheet" tab.
5. In the Stylesheet tab, you have the option to upload your CSS file.
6. If you do not have a CSS file, you can build and/or modify the existing styles to suit your preferences. Scroll through the provided stylesheet code and locate the specific style rule you want to change.
7. If needed, add custom CSS code directly into the provided text area.
8. Be sure to preview your changes to avoid rework and ensure they are progressing correctly.
9. After making the desired changes, click the "Save" button.
10. Refresh your Freshservice portal to view the applied changes.
    
    

For more Freshservice Tips and Tricks videos, click here.

For more information about our Freshservice Professional Services, click here.