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

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}