September 23, 2010

Modifying Surround SCM Stylesheets

Surround SCM
Reporting
Surround SCM reports use CSS stylesheets, which makes it easy to customize the look and feel of the reports. The stylesheets are stored in a StyleSheets subdirectory under the Surround SCM Server installation director. There are subdirectories for each type of report. For this example, I am going to edit the Default2.css stylesheet used for a History report, which is stored in the History subdirectory. TIP: Back up the stylesheet before making any changes so you can easily revert back in case you make a mistake. The following screenshot shows the default styles used for the selected History report:

For some users, the data in the cells may be hard to read. So I am going to make the text larger. In the Default2.CSS file, you will find this section:
/* Table cell data */
td
{
    padding: 10px;
    border: 1px solid #dddddd;
    font-size: 10px;
    background-color: #FFFFFF;/* overrides datarowaltclass background color */
}
To increase the font size, I need to change the font-size value to be greater that ten pixels. A simple edit changes the value to this:
/* Table cell data */
td
{
    padding: 10px;
    border: 1px solid #dddddd;
    font-size: 12px;
    background-color: #FFFFFF;/* overrides datarowaltclass background color */
}
If I run the report now, it looks like this:

I also noticed that the default CSS is overriding the alternating colors used for the rows. I want to use the alternating colors, so I am just going to remove the background-color section. The CSS section looks like this:

/* Table cell data */
td
{
    padding: 10px;
    border: 1px solid #dddddd;
    font-size: 12px;
}

Another change I am going to make is the color used in the column headers. This is set in the following section of the stylesheet:

/* Table Heading default */
th
{
    padding:10px;
    background-color: #e5e5e5;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #dddddd;
    text-align: left;
}
To set a different background color, I change the value used for the background-color.  I am going to go for a light blue, so now my stylesheet looks like this:
/* Table Heading default */
th
{
    padding:10px;
    background-color: #99CCFF;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #dddddd;
    text-align: left;
}

I have now removed an override on using color on alternating rows and changed the color of the headings. When I generate the report with the CSS stylesheet changes, it now looks like this:

Depending on your display settings, the color used for the alternating rows may not be dark enough to be noticeable. The following section allows you to modify this color.
.DataRowAltClass
{
    background-color: #f9f9f9;
}
Here is a screenshot of a report if the background-color is changed to #dddddd, which is a darker gray color:

For your convenience, you can download the modified stylesheet here. Remember to save the original before replacing it with this copy.