Thank you for your feedback.
Form temporarily unavailable. Please try again or contact docfeedback@servicenow.com to submit your comments.
Versions
  • Madrid
  • London
  • Kingston
  • Jakarta
  • Istanbul
  • Helsinki
  • Geneva
  • Store
Close

Default CSS styles

Log in to subscribe to topics and get notified when content changes.

Default 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.

Default CSS styles for UI16

$search-text-color: #e7e9eb                         
$navpage-header-bg: #303a46                         
$navpage-header-color: #ffffff
$navpage-header-divider-color: #455464
          
$nav-highlight-main: #3D4853                        
$subnav-background-color: #455464                   
$navpage-nav-bg: #303a46                              
$navpage-nav-bg-sub: #455464                           
$navpage-nav-color-sub: #bec1c6                        
$navpage-nav-mod-text-hover: #ffffff                   
$nav-hr-color: #303a46                              
          
$nav-highlight-bar-active: #278efc                  
$nav-highlight-bar-inactive: #828890                
$navpage-nav-selected-bg: #4B545F                   
$navpage-nav-selected-color: #ffffff                  
$navpage-nav-unselected-color: #bec1c6              
          
$connect-latest-message: #cfd4d8                    
$nav-timeago-header-color: #303a46                  
$navpage-nav-app-text: #cfd4d8                      
$navpage-nav-app-text-hover: #ffffff                  
$navpage-nav-border: #ddd                        
$navpage-button-color:  #fff  
$navpage-button-color-hover: #7EC24F 
    

Default CSS styles for UI15

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


# UI15 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%)}

Default CSS styles for UI11

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}
Feedback