- Dashboard Styles
Fusion Chart dashboards have been created in a manner that will allow a developer to modify the look and feel of the dashboard itself. With knowledge of Java, HTML and CSS a developer has nearly full control of the layout and styling of the dashboard.
Java and HTML knowledge may be required for extending or modifying the dashboardColumns2.jsp or dashboardRows2.jsp. We suggest you make a copy of the appropriate .jsp if you wish to make changes rather than changing the WOW default .jsp file. The following is a list of .jsp files that can be copied and used as templates for your own dashboard look & feel:
wow/fusion/jsp/fusionDashboardRows.jsp
wow/fusion/jsp/fusionDashboardColumns.jsp
wow/fusion/jsp/fusionDashboardRows2.jsp
wow/fusion/jsp/fusionDashboardColumns2.jsp
Each of these .jsp files have corresponding CSS records that can be used to change the colors, spacing, text and many other styles of the dashboard. These records are defined in a file named fusionDefaults.css which is found in wow/fusion/css/fusionDefaults.css
We suggest you include this css file in any custom theme you create for it to be included in your website's style sheets. We also suggest you copy and create your own custom fusionDefaults.css if you plan on changing any values. The current fusionDefaults.css will be overwritten if you ever update your version of WOW Fusion Charts.
The following is a list of CSS styles that can be used to modify the look & feel of your dashboard along with their default values:
/* +===================================================+ */
/* | Column Spanning Layout (fusionDashboardColumns.jsp) | */
/* +===================================================+ */
#layout_columns {
padding: 5px;
border: solid 2px #909090;
background: #F7F7F7;
font: Arial, Helvetica, sans-serif;
}
#layout_columns td.dash_header {
text-align: center;
font-size: 24px;
font-weight: bold;
padding: 2px;
width: 100%;
}
#layout_columns table.dash_pod {
width: 100%;
margin: 5px;
padding: 3px;
border: solid 1px #333333;
background-color: #EEEEEE;
}
#layout_columns td.dash_column {
}
/* +===================================================+ */
/* | Column Spanning Layout 2 (fusionDashboardColumns2.jsp) | */
/* +===================================================+ */
#layout_columns td.dash_header2 {
text-align: center;
font-size: 24px;
font-weight: bold;
padding: 2px;
width: 100%;
background-color: #E0E0E0;
}
#layout_columns td.dash_header_spacer2 {
padding: 2px;
width: 100%;
background-color: #E0E0E0;
}
#layout_columns tr.dash_body2 {
background-color: #E0E0E0;
}
#layout_columns td.dash_horiz_spacer2 {
width: 5px;
background-color: #E0E0E0;
}
#layout_columns table.dash_pod2 {
width: 100%;
margin: 5px;
padding: 3px;
background-color: #E0E0E0;
}
#layout_columns td.dash_pod2 {
border: solid 1px #AAAAAA;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #EAEAEA;
}
#layout_columns td.dash_column_spacer2 {
width: 3px;
padding: 2px;
background-color: #E0E0E0;
}
#layout_columns td.dash_column2 {
background-color: #E0E0E0;
}
#layout_columns tr.dash_footer_spacer2 {
width: 100%;
padding: 2px;
background-color: #E0E0E0;
}
/* +===================================================+ */
/* | Row Spanning Layout (fusionDashboardRows.jsp) | */
/* +===================================================+ */
#layout_rows {
padding: 5px;
border: solid 2px #909090;
background: #F7F7F7;
font: Arial, Helvetica, sans-serif;
}
#layout_rows td.dash_header {
text-align: center;
font-size: 24px;
font-weight: bold;
padding: 2px;
}
#layout_rows table.dash_pod {
margin: 5px;
padding: 3px;
border: solid 1px #333333;
background-color: #EEEEEE;
float: left;
}
#layout_rows td.dash_row {
width: 100%;
}
/* +===================================================+ */
/* | Row Spanning Layout2 (fusionDashboardRows2.jsp) | */
/* +===================================================+ */
#layout_rows td.dash_header2 {
text-align: center;
font-size: 24px;
font-weight: bold;
padding: 2px;
width: 100%;
background-color: #E0E0E0;
}
#layout_columns td.dash_header_spacer2 {
padding: 2px;
width: 100%;
background-color: #E0E0E0;
}
#layout_rows table.dash_pod2 {
float: left;
margin: 5px;
padding: 3px;
background-color: #E0E0E0;
}
#layout_rows td.dash_row2 {
width: 100%;
background-color: #E0E0E0;
}
#layout_rows tr.dash_body2 {
background-color: #E0E0E0;
}
#layout_rows td.dash_pod2 {
border: solid 1px #AAAAAA;
padding: 10px;
background-color: #EAEAEA;
}
For more information on CSS: http://www.w3schools.com/css/css_examples.asp
For more information on HTML color picker: http://html-color-codes.info/