Theme Styles

Description of Dashboard Styles - IDs and Classes

Root-level Dashboard Styles

Styles that are defined using ID's (using '#') are singular... there is only 1 of each per dashboard.

Browser window background; overridden by everything else, but can contain properties of all items (text, etc.) not tagged with an explicit style.
```
	.body
	
```

Margin on left side of dashboard (when dashboard width < 100% and alignment is 'center')
```
	#west
	
```

Margin on right side of dashboard (when dashboard width < 100%)
```
	#east
	
```

The Dashboard
```
	#wrapper
	
```

Dashboard Banner (inside the 'wrapper'; includes horizontal tabs)
```
	#north
	
```

Body of the Dashboard. (all the pages, kpis, etc.) Wraps #content ID.
```
	#center
	
```

The page (content) area - both #content and .page refer to the same element. If you have things declared in #content, they will override attributes defined in .page because of style spedificity (ID=100 points, class=10 points)
```
	#content
	
```

Anchors (Links) - Normal
```
	a
	
```

Anchors (Links) - Hover
```
	a:hover
	
```

Set Spacing on page edges
```
	tr.layout
	
```

.layout is no longer used. Use tr.layout instead.

.layout td - no longer used. Was used to make the KPI fit in the iFrame without scrolling

Descriptive text used within KPIs.
```
	.desc
	
```

Used on help elements (NEEDS MORE INVESTIGATION)
```
	.help
	
```

Banner Item Styles

Date documentation... have to look in Builder help.. go to datafunnel, choose query-attributes, select data, then click the button.

body.banner is no longer used.

There's a div with id=banner, class=banner, name=banner

Banner - Entire content area
```
	table.banner
	
```

Banner Logo
```
	.logo 
	
```

Banner Title
```
	.title
	
```

Banner SubTitle
```
	.subtitle
	
```

Banner Date
```
	.date
	
```

.bannerlabel is no longer used. (VERIFY)

Wrapper for Banner Options (both icon and text-based)
```
	.banneroptions
	
```

Single Banner option button - normal
```
	.banneroption
	
```

Single Banner option button - hover state
```
	.banneroption:hover
	
```

Banner option button icon attributes (on banner and pages)
```
	.banneroptionicon
	
```

UI Control Styles

Radio Buttons
```
	.radiobutton
	
```

Drop Downs
```
	.dropdown
	
```

Checkboxes
```
	.checkbox
	
```

Text Entry - Used by text entry fields, both for the Entry Box and Entry button tags. (VERIFY how to override individually using the Entry Box and Entry button tags.)
```
	.textentry
	
```

Labels
```
	.label
	
```

Buttons, both text buttons and images used as buttons (doesn't apply to buttons attached to text entry fields. Those have the class 'textentry'.)
```
	.button
	
```

Images (need to VERIFY)
```
	.image
	
```

Line - It appears that this style is no longer output.
```
	.line
	
```

Dashboard-Level Control Styles

Dashboard controls content area (was 'body.dashboardcontrols')
```
	#dashboardcontrols
	
```

Dashboard controls individual items (was 'body.dashboardcontrols td')
```
	#dashboardcontrols td
	
```

Top Navigation Tab Styles

Horizontal Tab Navigation - Container for the tabs
```
	#tabs
	
```
Horizontal Tab Navigation - Single row of tabs
```
	.x-tabs-wrap
	
```
Horizontal Tab Navigation - This is the horizontal tab Background
```
	.x-tabs-strip-wrap
	
```
Horizontal Tab Navigation - The tabs themselves
```
	.x-tabs-strip
	
```
Horizontal Tab Navigation - The roll-over part of the tabs
```
	.x-tabs-strip a
	
```
Horizontal Tab Navigation - The right 'sliding door' part of a single tab
```
	.x-tabs-right
	
```
Horizontal Tab Navigation - The left-side 'sliding door' part of a single tab
```
	.x-tabs-left
	
```
Horizontal Tab Navigation - Area inside of a single tab
```
	.x-tabs-inner
	
```
Horizontal Tab Navigation - This is the text part of the unselected tabs
```
	.x-tabs-strip .x-tabs-text
	
```
Horizontal Tab Navigation - This is the text part of the selected tabs
```
	.x-tabs-strip .on .x-tabs-text
	
```

Left Navigation Styles

Left Menu Navigation, entire column
```
	#innerwest
	
```

Left Menu Navigation, menu block (where items are located)
```
	#mainmenu
	
```

Left Menu Navigation, all items
```
	.x-menu-list
	
```

Left Menu Navigation, single item
```
	.x-menu-list-item
	.x-menu-item
	
```

Left Tree Navigation Styles

#treenav
	.x-tree-root-node
	.leaf (or .x-tree-node-leaf)
	.x-tree-node
	.x-tree-node a span
	.x-tree-node a:hover
	.x-tree-node .x-tree-selected a span
	.folder (or .x-tree-node-expanded)
	.folder (or .x-tree-node-collapsed)
	.x-tree-node-indent

Page Styles

The page (content) area - both #content and .page refer to the same element. If you have things declared in #content, they will override attributes defined in .page because of style specificity (ID=100 points, class=10 points)
```
	.page
	
```

Content area of the page. Page title bar and content area (the container for KPIs) are within this.
```
	.pagetoolbartable
	
```

Page Toolbar. Includes the spacer, title, and options areas.
```
	.pagetoolbarwrapper
	
```

Page Toolbar Spacers - Left and right caps at ends of the toolbar.
```
	.pagetoolbarspacer
	
```

Page Toolbar Title - Area of page toolbar where the text is located
```
	.pagetoolbartitle
	
```

Page Toolbar Option Area - Contains the banner option elements at right side of page's toolbar
```
	.pagetoolbaroptions
	
```

.pagecontent is no longer used (VERIFY)

KPI Styles

KPI Wrapper Element (normally set with padding & margin of 0 to eliminate any 'white box' around the kpi.)
```
	.kpiblock
	
```

KPI - The KPI plus toolbar, plus a small margin around the outside.
```
	.kpicontent
	
```

KPI - The Entire KPI plus toolbar, plus a small margin around the outside.
```
	.kpicontent table
	
```

KPI - The Entire KPI plus toolbar, plus a small margin around the outside.
(VERIFY: FireFox does not handle "border: 1 solid black;" - might be old/obosolete info)
```
	.kpitoolbartable
	
```

KPI Toolbar. Includes the spacer, title, and options areas.
```
	.kpitoolbarwrapper
	
```

KPI Toolbar Spacers - Left and right caps at ends of the toolbar.
```
	.kpitoolbarspacer
	
```

KPI Toolbar Title - Area of page toolbar where the text is located
```
	.kpitoolbartitle
	
```

.kpitoolbaroptions - KPI Toolbar Option Area - Contains the banner option elements at right side of kpi's toolbar. (THIS IS NO LONGER OUTPUT... kpitoolbartitle IS OUTPUT INSTEAD!!)

KPI Root-level wrapper element when printing

.kpiprint

URL Styles

(No Longer Used) - These were used when you loaded a kpi by referencing a URL.

.urltoolbartable - no longer used.
.urltoolbartitle - no longer used.
.urltoolbaroptions - no longer used.

Footers

General Style for all footers

#footer

.foottext is no longer used; replaced by #footer. * Primary Footer Attributes

.footer1

Secondary Footer Attributes

.footer2

EXT Navigation Styles

Overall style for the body panel - DON'T USE.. use #wrapper instead

.x-layout-panel-body

Overall style for the leftnav panel - DON'T USE.. use #innerwest or #mainmenu

.x-layout-active-content

No Longer Used

.left-nav-title 
.left-nav 
.left-nav-solitary 
.center 
.content-header 
.content 
.cornerblack 
.corner 
.docs 
.tnotes 
.rnotes 
.vinfo

Duplicate if exists here

.body

Belongs in banner

.title

Don't use: use #west instead

.x-layout-title-west

Gap Styles

This is the gap at the corner when both top & left nav are used.

.x-layout-title-west

body.gap is no longer used (use .x-layout-title-west if necessary)
body.gaphastop is no longer used (use .x-layout-title-west if necessary)

Custom Paragraph Styles

Never generated by dashboard system, must be declared explicitly in a paragraph tag. See Login Dashboard for usage examples.) (VERIFY)

Paragraphs - Main info content

p.infostandard

Paragraphs - Info Labels

p.infolabel

Paragraphs - Info Alerts

p.infoalertlabel

Paragraphs - Bolded Info

p.infobold

Paragraphs - Italic Info */

p.infolightitalic

Paragraphs - Info User Message

p.usermessage

Table Styles

Old Style Tables (deprecated)

td.table1_xxx td.table2_xxx

New Style Tables
These are of the form 'table.few' or 'table_XXX'. (NEED TO DOCUMENT HERE)
Dashboard Access List Styles (ex: login dashboard)
Common style for controlling how dashboard access lists are diplayed

a.dashaccesslistitem0, a.dashaccesslistitem1, a.dashaccesslistitem2

Dashaccesslistitem0 is used on dashboard links with no security

a.dashaccesslistitem0
a.dashaccesslistitem0:hover

Dashaccesslistitem1 is used on dashboard links with valid user only security

a.dashaccesslistitem1
a.dashaccesslistitem1:hover

Dashaccesslistitem2 is used on dashboard links with group access only security

a.dashaccesslistitem2
a.dashaccesslistitem2:hover

Image Template Styles & Attributes

Global Image Template Style.

Chart
  color
  border-color
  gradient-color
  gradient-type

Graph Styles (Color1-Color16 attributes are for series colors)

Graph
  Color1
  Color2
  Color3
  Color4
  Color5
  Color6
  Color7
  Color8
  Color9
  Color10
  Color11
  Color12
  Color13
  Color14
  Color15
  Color16

Text Boxes (often used for a title bar)

Textbox
  font-color
  fill-color
  border-color
  drilldown-font-color

Maps (area, or shape layers)

Map.Areas
  no-data-color
  out-of-range-low-color
  out-of-range-high-color
  range1-color
  range2-color
  range3-color
  range4-color
  range5-color
  hover-font-color
  hover-fill-color
  hover-border-color
  drilldown-font-color
  drilldown-fill-color
  drilldown-border-color

Printing Styles

When printing pages and KPIs, the styles pageprinttheme.css and kpiprinttheme.css are added. In these files, you can override any styles, including those that are defined in theme.css. * The default versions of these two files define these styles: pageprinttheme.css

body.page (This has to be body.page instead of .page because when we print the body class is "page kpi" and the kpi style from theme.css gets used.)
.label
#banner (normally only has position:static which sets a default positioning)

kpiprinttheme.css

body.kpi (This has to be body.kpi instead of .kpi because when we print the body class is "page kpi" and the kpi style from theme.css gets used.)
.label
#banner (normally only has position:static which sets a default positioning)

Additional Tips

Layout

By default, the dashboard takes the entire window space. You can center or left-align the dashboard using attributes in dashboard-settings:
width=#pixels or percentage; default 100%
align=left, center; default left

Lightness, Saturation, Complements

Theme File Tips

#The variable %EXT_BASECOLOR_1% colorizes all the ext-based content. Normally you'd think this is just the UI elements (tabs, controls, etc.) but surprisingly, there are also styles used in the dashboard content that are also included. As an example, if you set your dashboard to be center-aligned and not take up the entire window, the panels on the sides of your dashboard use the style 'x-layout-container'. You will have to override this style (with !important) in your theme.csx, in order to override the colorization effects you will encounter as you change %EXT_BASECOLOR_1% to tint your tabs.

HOW EXTJS STUFF WORKS (work in progress)

The EXT Tabs backgrounds are represented by:
tab-sprite.gif
The top part is the selected tab, the bottom is un-selected.

For information about migration issues, see CenterView 2.x to CenterView 3.0 Post-Migration and Conversion Issues.