[Tips & Tricks] Customize ServiceDesk Plus the way you want

Before finalizing on customization:

Do research: Look at other portals your organization uses, or your organization's website to see what design appeals you and what colors and images best fits you.
Keep your potential users in mind: Of course , we want the portal to match your personality. But never lose focus on how our design will speak with the customers.

How should you customize ServiceDesk Plus:

Keep in mind that ServiceDesk Plus comes with preconfigured design language, which means it comes with certain pre-set colors, themes, fonts, page layouts, so on and so forth.

Try to keep the design elements as it is and change the most common things such as fonts, colors, background, padding, size, etc.

When it comes to design there are four key areas:

Background. Change the color, texture, or image for the background of your site to fit your brand.

Colors. Choose a palette that works well with your template or create or replicate one that matches your brand color scheme, we will be using only these colors.

Fonts . Readability is most important when it comes to fonts. When choosing fonts, make sure your choice creates the right image for your business.

Text Style. There are sizes, colors, and styles of text for different sections within ServiceDesk Plus. You can modify things such as paragraph titles, menus, and page titles (using pagescripts)

Let's dive into the how-to section:

Understanding page layouts, HTML elements, and knowledge of CSS is necessary.

To begin, you should inspect the webpages and you should understand the HTML rendered. Why? As we mentioned earlier, it comes preconfigured with a design language which we need to manipulate as per our liking.

How to inspect a webpage on Chrome or Mozilla?

Just right-click and click Inspect Inspect Element or press Command+Option+i on your Mac or F12 on your PC.

Now, this will allow you to see all the HTML elements and the best part about this dev tool option is that you can change all CSS properties on the go without touching the CSS file.

Now the most important thing is, identifying the class names and the HTML elements that we should target.

Once we identified the respective HTML and CSS names, we can now update the syles on the pane and we can see the changes in real-time.

For reference, I've updated the table header of the request detail view page. Screenshots attached below:

Using the devtool, we are selecting the CSS styles

CSS properties updated to change the color, background and the font style

.tableComponent th, .tableComponent .tableHeader, .tableComponent .sortedTableHeader {
background-color: #a4e7fc;
border-bottom: 1px solid #70b0d3;
padding-bottom: 0;
position: relative;
white-space: nowrap;
height: 50px;
font-family: montserrat;
}

Now, the above code is responsible for changing the color of that heading bar in the request list view. We just need to copy this and paste these in the file custom_style.css found in

<Installed Directory> \ManageEngine\ServiceDesk\custom\style

Once you update that file, clear cache and refresh and you should see the changes on the webpage.

Now you will need to repeat the process to style all each and individual items or elements as per your liking.

Our application is styled with Bootstrap and some other custom styles on our own. If you bootstrap or if are familiar with HTML and CSS, you could change a lot in our application.

If you are experienced with JavaScript, you can make use of pagescript to inject/remove classes and even HTML elements individual pages of ServiceDesk Plus and could gain more control over it.