Advanced Styling

The default.css file for each report contains the reports styling.

This page contains a variety of sample style code that you can use and adapt to customize your reports.

Do not overwrite your reports default.css file.

Take the css properties you require from these samples and add them to the default.css using the style editor or a text editor.

Change the size of the report. (v671)

See It In Action Get Source Top ▲

.ia-report
{   
    width:80%;
    height:80%;
}

Fix the size of the report. (v671)

See It In Action Get Source Top ▲

.ia-report
{   
    width:1000px;
    height:600px;
}

Change the report font. (v671)

See It In Action Get Source Top ▲

.ia-report
{       
    font-family:Helvetica; 
    font-size:14px;
    color:#106a80;
    font-weight:bold;
}

Style all panels in a report. (v671)

See It In Action Get Source Top ▲

.ia-panel-header
{
    text-align:center;
    font-family:Arial; 
    background-color:#1a7b93;
    color:#ffffff;      
    font-size:16px;
    font-weight:bold;
    border-bottom-width:0px;
    padding:8px;    
}
.ia-panel 
{   
    border-width:2px;
    border-radius:4px;
    border-color:#1a7b93; 
}

Style the map panel only. (v671)

See It In Action Get Source Top ▲

#map-panel-header
{
    text-align:center;
    font-family:Arial; 
    background-color:#e66c64;
    color:#ffffff;      
    font-size:16px;
    font-weight:bold;
    border-bottom-width:0px;
    padding:8px;    
}
#map-panel 
{   
    border-width:2px;
    border-radius:4px;
    border-color:#e66c64; 
    background-color:#fdf7f7;
}

Style the data explorer panels only. (v671)

See It In Action Get Source Top ▲

#dataExplorer-panel-header, #filterExplorer-panel-header, #geogExplorer-panel-header
{
    text-align:center;
    font-family:Arial; 
    background-color:#e66c64;
    color:#ffffff;      
    font-size:16px;
    font-weight:bold;
    border-bottom-width:0px;
    padding:8px;    
}
#dataExplorer-panel, #filterExplorer-panel, #geogExplorer-panel
{   
    border-width:2px;
    border-radius:4px;
    border-color:#e66c64; 
    background-color:#fdf7f7;
}

Change the colour of the border when a panel is hovered. (v671)

See It In Action Get Source Top ▲

.ia-panel:hover 
{   
    border-color:#ff7800; 
}

Add a drop shadow to the panels. (v671)

See It In Action Get Source Top ▲

.ia-panel 
{   
    box-shadow: 3px 3px 10px #888888;
}

Change the panel header font. (v671)

See It In Action Get Source Top ▲

.ia-panel-header
{   
    font-family:Georgia; 
    font-size:16px;
    color:#953d37;
    font-weight:bold;
    font-style:italic;
}

Style all buttons in a report. (v671)

See It In Action Get Source Top ▲

.ia-button 
{   
    background-color:#b0cdd4;
    color:#1a7b93;      
    border-width:2px;
    border-radius:5px;
    border-color:#1a7b93; 
}
.ia-button:hover
{   
    background-color:#b0cdd4;
    border-color:#e66c64;
}

Style the data explorer button only. (v671)

See It In Action Get Source Top ▲

#dataButton 
{   
    background-color:#b0cdd4;
    color:#1a7b93;      
    border-width:2px;
    border-radius:5px;
    border-color:#1a7b93; 
}
#dataButton:hover
{   
    background-color:#b0cdd4;
    border-color:#e66c64;
}

Style the filter explorer button only. (v671)

See It In Action Get Source Top ▲

#filterButton 
{   
    background-color:#b0cdd4;
    color:#1a7b93;      
    border-width:2px;
    border-radius:5px;
    border-color:#1a7b93; 
}
#filterButton:hover
{   
    background-color:#b0cdd4;
    border-color:#e66c64;
}

Add a drop shadow to the buttons. (v671)

See It In Action Get Source Top ▲

.ia-button 
{   
    box-shadow: 3px 3px 10px #888888;
}

Add a gradient to the buttons. (v671)

Get Source Top ▲

advanced.css contains the following style

.menuButton, #dataButton, #dataButton2, #dataButton3, #dataButton4, #filterButton,  #filterButton2, #geographyButton
{
    background-image:url(arrow_down_white.png); /** Menu buttons */
    background-repeat:no-repeat;
    background-position:center right;*/
    padding-right:30px;
}

In order for the gradient to work you must delete the above style from advanced.css, and add the following style to default.css

.ia-button 
{   
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e66c64), color-stop(100%,#953d37)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e66c64 0%,#953d37 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e66c64 0%,#953d37 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e66c64 0%,#953d37 100%); /* IE10+ */
    background: linear-gradient(to bottom, #e66c64 0%,#953d37 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e66c64', endColorstr='#953d37',GradientType=0 ); /* IE6-9 */
}