Navigation Pane Elements

The following navigation pane elements can be customized:

Left Navigation Area

  1. Background
  2. Section header background
  3. Section area
  4. Section header
  5. Selected section item
  6. Expand/collapse button
  7. Section item
  8. Context help
  9. Bottom section

 

 

 

Customization samples

UI Element

Selector

CSS code sample

  • Background

body

body {

background-color: #6e89dd;

}

  • Section header background

.navOpened

.navClosed

.navOpened,.navClosed {

background-color: #ffffff;

}

  • Section area

.tree

.tree {

background-color: #d6dff7;

}

  • Section header

.navOpened .navTitle .titleText

.navClosed .navTitle .titleText

.navOpened .navTitle .titleText,

.navClosed .navTitle .titleText {

color: #215dc6;

}

  • Section header (mouse over)

.navOpened .navTitleOver .titleText

.navClosed .navTitleOver .titleText

.navOpened .navTitleOver .titleText, .navClosed .navTitleOver .titleText {

color: #428eff;

}

  • Selected item

.nodeActive .name

.navTitleOver .titleHandle {

background-color: #428eff;

}

  • Section area

.tree

.tree {

background-color: #d6dff7;

}

  • Selected section item

.nodeActive .name

.nodeActive .name {

background-color: #3878bf;

}

.nodeActive .name a:link,

.nodeActive .name a:hover,

.nodeActive .name a:visited,

.nodeActive .name a:active

{

color: white;

}

  • Expand/collapse button

.navTitle .titleHandle

.navTitle .titleHandle {

background-color: #215dc6;

}

.nodeActive .name a:link,

.nodeActive .name a:hover,

.nodeActive .name a:visited,

.nodeActive .name a:active {

color: white;

}

  • Expand/collapse button (mouse over)

.navTitleOver .titleHandle

.navTitleOver .titleHandle {

background-color: #428eff;

}

  • Section item

.name

.name a:link, .name a:visited, .name a: active {

color: #215dc6;

}

.name a:hover {

color: #428eff;

}

  • Context help

#contexthelp

#contexthelp {

color: #555555;

border-top: 1px solid #a7b8eb

}

  • Bottom section

#poweredBy

#copyright

Logotype image is presented by the following file (images/swsoft-small-logo.gif)

#poweredBy a:link,

#poweredBy aLvisited,

#copyright a:link,

#copyright a:visited {

text-decoration: none;

font-size: 10 px;

color: #bcc9f0;

white-space: nowrap;

}