Customize your ServiceNow Geneva Interface in 5 easy steps

Theme feature, that was already available in Eureka, has taken a new dimension with ServiceNow Geneva and its new User Interface. So we thought it would be a good time to share with you how you can use and modify themes to easily customize your interface in ServiceNow.

Administrators can create a dedicated theme and define a customized CSS. You can make your portal even more user friendly and adapt it to your corporate design.

In order to customize your interface you just have to follow the 5 simple steps below. Repeat the step 2 for every CSS tag you’d like to customize. To help you know which tag affects which part of your interface, have a look at the visual guide available further down.

Steps for customization

  1. Go to System UI and then click on Themes.
  2. Create a new theme and then add the code as follow: $[tagname]: #colorcode (e.g: $navpage-nav-bg: #ff0000) to the CSS. Repeat for every tag you’d like to customize.
  3. Save your theme
  4. Select your theme from the top right gear box (you will see a specific tab “Themes”)
  5. Refresh and you will see the changes

Geneva CSS

Visual Guide for tags customization 
(click to enlarge)

Screen Shot 2016-02-03 at 12.09.10

mm
Manolis is a certified ServiceNow System Administrator and certified Implementation Specialist with 5 years experience in ServiceNow. He works as Technical Consultant at our Nyon Office since 2012 and has a strong experience in configuration and implementation for various major European companies.
Recent Posts
Showing 2 comments
  • Timothy Johnson
    Reply

    But how do you enforce that for all users as their default theme?

    • mm
      Manolis Sgouros
      Reply

      Hello Timothy,

      You can apply a company Theme, there is a wiki article that explains step by step how you can do that. Here is the LINK.

      For some more technical details, there is a user preference which keeps the theme that each user has selected.
      To find this user preference you need to go to “User Administration -> User Preferences” (You will need one of the following roles in order to see this application menu/module: admin or role_delegator or user_admin).
      In that list of records, you can filter them where the name is “glide.css.theme.ui16”. You will see records for specific users and the values either “undefined”, which is the system theme, or a sys_id from a specific Theme record.

      I hope this information answers your question.

      Best regards,
      Manolis Sgouros.

Leave a Comment

Start typing and press Enter to search