CSS Theme Support

From ServiceNow Wiki
Home > Administer > Core Configuration > Navigation and UI > CSS Theme Support
Jump to: navigation, search
Note
Note: This article applies to Fuji. For more current information, see CSS Theme Support at http://docs.servicenow.com

The ServiceNow Wiki is no longer being updated. Please refer to http://docs.servicenow.com for the latest product documentation.


Navigation and UI Configuration
Related Topics

1 Overview

Themes give the user interface a specific look and feel by using different color combinations. System administrators can create new themes or customize the existing themes for a ServiceNow instance. To see existing themes, navigate to System UI > Themes.

2 Activating CSS Theme Support

Activate one of the following plugins to use themes:

  • UI15 and UI14: CSS Theme support - UI 14 (activated automatically with UI15 and UI14)
  • UI11: CSS Theme support

3 Enabling the Theme Picker

The system administrator can enable the theme picker by activating the ui_theme_changer UI macro. The theme picker adds a field to the system menu (UI15 and UI14) or the banner frame (UI11 and classic) that allows the user to quickly switch between CSS themes during the current browser session.

4 Selecting a Theme

  • UI15 and UI14: click the gear icon (GearIconUI14.png) in the banner frame to access the system menu and then select a theme from the Theme picker.
  • UI11 and classic: select a theme from the Theme picker in the banner frame.
UI14 Theme Picker

5 Specifying a Company Theme

System administrators can specify a default CSS theme for a given company. The theme appears for all users associated with the company unless they select a different theme. Specify a company theme on the company record.

  1. Navigate to System Properties > My Company.
  2. Configure the form and add the Theme field.
  3. In the Theme field, select a theme.
  4. Click Update.
    Users who have their Company set to this company will see the selected theme the next time they log in, unless they have selected a different theme.

6 Themes Starting with the Eureka Release

Several themes with pre-set color combinations are available starting with the Eureka Release.

  • System
  • Flamingo
  • High Contrast
  • Kiwi
  • Light
  • Sea Foam
  • Sky
  • Tangerine

Themes are user specific. Each user can select a different theme and the selection is stored as a user preference.

6.1 Creating or Customizing a Theme

System administrators can create new themes or customize existing themes.

  1. Navigate to System UI > Themes.
  2. To create a new theme, click New or to customize an existing theme, click on the theme name.
  3. Enter a name for the theme in the Name field.
  4. Add any of the default CSS styles in the CSS field.
  5. Select the Active check box.
  6. Select one of the following from the Device choice list to identify the user interface version for the theme:
    • Browser: identifies a UI11 theme.
    • Doctype: identifies a UI15 or UI14 theme.
  7. Click Submit.
    You must refresh the page to see the new theme in the theme picker.
Note
Note: In some cases the default style is not the only style definition for an object. In such cases, you can use the CSS important rule format to override any other style definitions with the default definition. For example, this definition overrides the mandatory text color: label.mandatory.text.color: #FF0000 !important


7 Themes in Versions Prior to Eureka

The following color themes are available in versions prior to Eureka:

  • light blue
  • blue
  • dark blue
  • green
  • dark green
  • brown
  • gold
  • orange

7.1 Creating or Customizing a Theme

System administrators can create new themes or customize existing themes.

  1. Navigate to System UI > Themes.
  2. To create a new theme, click New or to customize an existing theme, click on the theme name.
  3. Enter a name for the theme in the Name field.
  4. Add any of the default CSS styles in the CSS field.
  5. Click Submit.
    You must refresh the page to see the new theme in the theme picker.

7.2 CSS Color Theme Examples

Theme1.png

Theme2.png

Theme3.png

Theme4.png

Theme5.png

Theme6.png

Theme7.png

Theme8.png

8 CSS Styles

You can use CSS styles to control the appearance of elements in a theme. Your version of the UI determines which CSS styles you can use.

8.1 Default CSS Styles for UI14 and Up

This is the list of CSS styles that can be used in UI14 or later UI themes, shown with the default values.

base.color: rgb(102, 153, 204)
base.font-family: arial

$color-darkest: #343d47
$color-darker: #485563
$color-dark: #81878e
$color-light: #bdc0c4
$color-lighter: #e6e8ea
$color-lightest: #ffffff

$color-positive: ${$color-green}
$color-warning: ${$color-orange}
$color-negative: ${$color-red}
$color-info: ${$color-blue}

$color-text: ${$color-darkest}

$color-accent: ${$color-blue}
$color-accent-light: ${$color-blue-lighter}

$color-primary: ${$color-accent}

# Banner branding styles
banner.background.attachment: scroll
banner.background.color: #FFF
banner.background.image:url("../images/s.gifx")
banner.background.position: center bottom
banner.background.repeat: repeat-x


# UI14 and above with Bootstrap

$navbar-default-bg: #f8f8f8
$navbar-default-color: #777777
$brand-warning: #df8a13
$brand-primary: #428bca
$brand-info: #5bc0de
$jumbotron-bg-color: #428bca
$panel-bg: #ffffff

$state-success-text: ${g_darken($color-positive, 25%)}
$state-success-bg: ${g_lighten($color-green-lighter, 20%)}
$state-success-border: ${g_lighten($color-positive, 30%)}

$state-info-text: ${g_darken($color-info, 25%)}
$state-info-bg: ${g_lighten($color-blue-lighter, 8%)}
$state-info-border: ${g_lighten($color-info, 30%)}

$state-warning-text: ${g_darken($color-warning, 25%)}
$state-warning-bg: ${g_lighten($color-orange-lighter, 10%)}
$state-warning-border: ${g_lighten($color-warning, 30%)}

$state-danger-text: ${g_darken($color-negative, 25%)}
$state-danger-bg: ${g_lighten($color-red-lighter, 8%)}
$state-danger-border: ${g_lighten($color-negative, 30%)}

8.2 Default CSS Styles for UI11 and Classic

This is the list of CSS styles that can be used in UI11 or classic themes, shown with the default values.

base.color: rgb(102, 153, 204)
base.font-family: arial
base.font-size: 10pt
# application font size
menu.font-size: smaller

mobile.font-family: ${base.font-family}
mobile.font-size: ${base.font-size}

mobile.touch.font-family: ${base.font-family}
mobile.touch.font-size: 13pt

button.action.text.color: ${base.text.color}
button.action.background.color: ${base.color}
button.action.border.color: #666666
button.action.border.width: 1px

button.login.text.color: ${base.text.color}
button.login.background.color: ${base.color}
button.login.border.color: #666666
button.login.border.width: 1px

banner.title.color: ${base.color}
banner.description.color: #808080
text.caption.color: ${base.color}

# Banner branding styles
banner.background.attachment: scroll
banner.background.color: #FFF
banner.background.image:url("../images/s.gifx")
banner.background.position: center bottom
banner.background.repeat: repeat-x


body.background.color: ${base.background.color}

table.background.color: ${base.background.color}
table.column.head.background.color: ${base.color}
table.column.head.text.color: ${base.text.color}

button.header.text.color: ${base.text.color}
button.header.background.color: ${table.column.head.background.color}
button.header.border.color: white
button.header.border.width: 1px

label.text.color: black
label.background.color: #dddddd
label.mandatory.text.color: ${base.text.color}
label.mandatory.background.color: #cc0000
label.mandatory_populated.text.color: ${base.text.color}
label.mandatory_populated.background.color: #cc7777
label.read_only.background.color: orange
label.changed.background.color: #00cc00
label.foreign.text.color: black
label.foreign.background.color: silver
label.error.text.color: black
label.error.background.color: khaki
label.debug.text.color: black
label.debug.background.color: khaki
label.debug.success.text.color: black
label.debug.success.background.color: #99FF33
label.debug.failure.text.color: black
label.debug.failure.background.color: #FF9933

list.base.text.color: black

list.row.even.background.color: #EEEEEE
list.row.highlight.background.color: #EEE

list.row.even.text.color: ${list.base.text.color}
list.row.odd.background.color: ${base.background.color}
list.row.odd.text.color: ${list.base.text.color}
list.row.low.background.color: khaki
list.row.low.text.color: ${list.base.text.color}
list.row.medium.background.color: orange
list.row.medium.text.color: ${list.base.text.color}
list.row.high.background.color: tomato
list.row.high.text.color: ${list.base.text.color}
list.row.survey.background.color: khaki
list.row.survey.text.color: ${list.base.text.color}
list.row.list_add.text.color: ${list.base.text.color}
list.row.vertical.align: top

link.text.color: WindowText
link.column.header.color: ${base.text.color}
link.button.color: black
link.breadcrumb.color: blue
link.web.color: blue
link.navigation.link.color: blue

spellcheck.message.color: ForestGreen

banner.line.color: black

outputmsg.info.text.color: black
outputmsg.info.text.font-size: normal
outputmsg.error.text.color: black
outputmsg.error.text.font-size: normal

nav.menu.background.color: #eeeeee
nav.menu.text.color: black
nav.menu.border.color: #bbbbbb
nav.menu.border.width: 1px
nav.menu.width: 18%
nav.menu.width.right: 82%

contextmenu.background.color: menu
contextmenu.border.color: ${base.border.color}
contextmenu.border.width: 1px
contextmenu.text.color: black

slush.header.border.width: 1px
slush.header.border.color: #CCCCCC;
slush.header.border.background.color: #F0F0F0

treeview.cell.background.color: #f0f0f0
treeview.outerbody.border.width: 1px
treeview.outerbody.border.color: #D0D0D0
treeview.outerbody.background.color: #F0F0F0

filter.table.border.width: 1px
filter.table.border.color: ${base.border.color}
filter.table.background.color: #F0F0F0

report.table.background.color: #F0F0F0

olap.column.head.background.color: #dddddd
olap.column.head.text.color: black

assistant.box.border.width: 1px
assistant.box.border.color: #bbbbbb
assistant.box.background.color: #F0F0F0

nav_header.font-family: verdana, arial
nav_header.font-size: 24px
nav_header.background.color: ${base.color}
nav_header.text.color: ${base.text.color}
nav_header.margin-left: 16px

drag.section.border: #d5d5d5
drag.section.border.dark: #999999
drag.section.selected.border: #aabbdd
drag.section.dragging.border: #222222
drag.section.hilight.border: #00ff00
drag.section.hilight.neighbors.border: #ff9900
drag.section.top.background.color: #eeeeee
drag.section.header.background.color: #eeeeee
drag.section.header.active.background.color: #ccddff

table.white-space: normal
table.cell.padding: 2px

input.disabled.text.color: #444444
input.disabled.background.color:#f6f6f6

input.ref_dynamic.border.color: #00CC00
input.ref_invalid.border.color: #DC143C

textsearch.kb.background.color: #f0f7f9
textsearch.catalog.background.color: #ffffdd

questionset.text.width: 250px
questionset.reference.width: 157px

user_image.max.height: 250px
user_image.max.width: 250px


# All the properties needs to be moved in a  new Table_UI_Properties file

# Tablet header and footer background
tablet.gradient.start: #666666
tablet.gradient.end: #111111

# Tablet header footer text color
tablet.headerfooter.text.color: #ffffff

script.editor.width: 80%

#mobile
m.label.color: #666
m.separator.color: #DDD
m.border-box: -moz-box-sizing: border-box; box-sizing: border-box;
m.context_menu.background: background: none repeat scroll 0 0 #FFFFFF;
m.context_menu.border: border: 1px solid darkgrey; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px;
m.context_menu.element.font: font-weight: bold; color: #000;
m.context_menu.element.padding: padding: 5px;
m.one-line-clipped: white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

m.message.background.error: #F2DEDE
m.message.error: background-color: ${m.message.background.error}; border-color: #EED3D7; color: #B94A48;
m.message.arrow.error: ${m.message.background.error}

m.message.background.info: #D9EDF7
m.message.info:  background-color: ${m.message.background.info}; border-color: #BCE8F1; color: #3A87AD;
m.message.arrow.info: ${m.message.background.info}

m.message.background.warning: #FCF8E3
m.message.warning: background-color: ${m.message.background.warning}; border-color: #FBEED5; color: #C09853;
m.message.arrow.warning: ${m.message.background.warning}
Was this article helpful?
Yes, I found what I needed
No, I need more assistance