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                                           
$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                                     
$navpage-nav-app-text: #cfd4d8                                        
$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%)}