Styling the Self Service Mobile Portal

You can configure the look and feel of the Self Service Mobile portal using the Self Service tab in the Style Editor.

The following are the steps to customize the Self Service Mobile portal:

1. From the Configuration console, click Build > User Interface Styles > Style Editor. The application displays the Style Editor page.
2. Click the Self Service tab.
3. Use the options in this tab to customize the Self Service Mobile portal to suit your taste.

Recommended color codes

This is introduced in 2021.2 and applicable for existing customers, new customers installing Neurons for ITSM version 2021.2 have is set up out-of-the-box.

1. In the Configuration, click Build > User Interface Styles > Style Editor.

2. Select Self Service and select a Theme.
3. It is recommended to set the color codes given in the below table for better user experience.

Section	Parameter	Description	Color Code
Common	Text	Text color of all items in the home page, including dashboard panels.	#222222FF
	Background	Background color of the home page.	#F5F5F5FF
	Link	Text color of any links on the home page.	#2286BBFF
	Border	The color of all borders on the home page, including borders around dashboard panels and borders under headings.	#D9D9D9FF
	Mouseover	Background color of text when you hover your mouse over it.	#F4F4F4FF
	Active	Background color of text when it is the active line in a list.	#DEEDFCFF
Panels	Background	Background color of all panels and dialog windows.	#EFF2F5FF
	Header Color	Text color of the text in all panel headers.	#222222FF
	Header Background	Background color of all panel headers.	#E3E8EDFF
Buttons	Text	Text color of buttons.	#2286BBFF
	Background	Background color of buttons.	#FFFFFFFF
	Highlighted Color	Background color of buttons that are highlighted.	#242933FF
	Highlighted Text	Text color of buttons when they are highlighted.	#FFFFFFFF
Header	Text	Text color of the header bar area.	#555555FF
	Background	For a gradient texture, use different colors for the Background and Background Center fields. For a solid texture, use the same color for both.	#EFF2F5FF
User Info Panel	Text	Color of text in the user info panel.	#FFFFFFFF
	Background	Background color of the user info panel.	#515E76FF
Navigation Menu	Text	Navigation menu text color.	#303540FF
	Background	Background color of the navigation menu.	#FFFFFFFF
	Mouseover	Navigation menu text color when you hover your mouse.	#F4F4F4FF
	Active	The color highlight of the menu that is currently selected/active.	#C2DDF2FF

Adding a New Logo to the Self Service Mobile Portal

In the Self Service Mobile portal, logos are scaled to fit a 27-pixel vertical space in the header. Because scaling reduces image quality, the preferred logo dimensions are 27 pixels high and up to 200 pixels wide. The maximum logo dimensions are 650 pixels high by 650 pixels wide.

The settings you make for Header also affect the Self Service Mobile user interface loading screen.

Self Service Mobile User Interface Loading Screen

To add a new logo to the Self Service Mobile user interface, do the following:

1.Access the Style Editor. See Accessing the Style Editor.

2.Click the Self Service tab.

3.From the Header section, click Upload file.

4.Click the Select File icon .

5.Browse for the logo on your to add and double-click the file name.

The application displays the new logo in place of the default logo and on the header in the right pane.

6.Click Save.

Restoring the Default Logo for the Self Service Mobile User Interface

To restore the default logo for the Self Service Mobile user interface, do the following:

1.Access the Style Editor. See Accessing the Style Editor.

2.Click the Self Service tab.

3.In the Header, click the current logo.

4.Click the Delete Uploaded File icon .

5.The application deletes the current logo and displays the default Neurons for ITSM logo in its place.

6.Click Save.