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: #ffffff                         
$navpage-header-bg: #293e40                         
$navpage-header-color: #ffffff
$navpage-header-divider-color: #5A7F71
$navpage-header-button-color: #ffffff          
$nav-highlight-main: #576667                        
$subnav-background-color: #213234                   
$navpage-nav-bg: #293e40                              
$navpage-nav-bg-sub: #293e40                           
$navpage-nav-color-sub: #d1d6d8                                           
$nav-hr-color: #192628                              
          
$nav-highlight-bar-active: #82c9b8                  
$nav-highlight-bar-inactive: #213234                
$navpage-nav-selected-bg: #2f4f4e                   
$navpage-nav-selected-color: #82c9b8                  
$navpage-nav-unselected-color: #d1d6d8              
          
$connect-latest-message: #B8E0D7                                     
$navpage-nav-app-text: #ffffff                                        
$navpage-nav-border: #7a828a                        
$navpage-button-color: #ffffff  
$navpage-button-color-hover: #82C9B8 
    

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