Changing Colors on the Output Page of sqlReports

The following works with sqlReports 4.3 - 4.7, or if you're on sqlReports 5, with the output when Flash buttons are used.  I haven't looked into what would be used with sqlReports 5 for the output page when non-Flash buttons are used, but the css page for it is at /sqlReports5/DataTables5/media/css/sqlReports5.dataTables.css in case you want to try on your own.


All of the color commands are in the sqlReports4.dataTables.css file, which if you're using sqlReports 4.x is located at /sqlReports4/DataTables/media/css/, and if you're using sqlReports 5.x is located at /sqlReports5/DataTables/media/css/. Since it’s a css file, any changes you make may not appear until you either clear your browser cache and reload the page, or do a force reload by holding down the shift key and then refreshing the page.

The colors can be coded using words or hex color codes. A good resource for hex color codes is http://www.w3schools.com/html/html_colors.asp.   Hex color codes must start with a #, but words do not.

Important:  Any changes will appear on all reports and will be overwritten if you re-install or upgrade sqlReports. 

Change Header Row

Look for the following coding and add a background-color command -

Before

After

table.dataTable thead th {
                padding: 3px 18px 3px 10px;
                border-bottom: 1px solid black;
                font-weight: bold;
                cursor: pointer;
                *cursor: hand;
}

table.dataTable thead th {
                padding: 3px 18px 3px 10px;
                border-bottom: 1px solid black;
                font-weight: bold;
                cursor: pointer;
                *cursor: hand;
               background-color: red;
}

 

Change Row Colors

Look for the following coding and change what follows the color: parts -

table.dataTable tr.odd { background-color: #E2E4FF; }
table.dataTable tr.even { background-color: white; }

Change Column Sorting Colors

Look for the following coding and change what follows the color: parts -

table.dataTable tr.odd td.sorting_1 { background-color: #D3D6FF; }
table.dataTable tr.odd td.sorting_2 { background-color: #DADCFF; }
table.dataTable tr.odd td.sorting_3 { background-color: #E0E2FF; }
table.dataTable tr.even td.sorting_1 { background-color: #EAEBFF; }
table.dataTable tr.even td.sorting_2 { background-color: #F2F3FF; }
table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }

Change Row Selection Colors

Look for the following coding and change what follows the color: parts -

table.display tr.even.row_selected td {
                background-color: #B0BED9;
}

table.display tr.odd.row_selected td {
                background-color: #9FAFD1;
}

Change Row Grouping Color

Look for the following coding and change what follows the color: part -

td.group {

                background-color: #d1cfd0;
                border-bottom: 2px solid #A19B9E;
                border-top: 2px solid #A19B9E;

}

 

  Back to the List of Articles