HTML CSS editing

HTML CSS header editing

To allow the customisation of DSRC HTML exports i.e. race and series results, a separate CSS file has been created which can be user (admin) edited via the Settings screen.

Although I'm no CSS expert, the intention of this page is to go through some areas of simple changes that can be fairly easily made to the CSS which impact the 'look' of the HTML exports.

Firstly, here is the DSRC V3.5 'default' CSS, which you could consider as a 'starting point', and I'm going to highlight the areas to be discussed, as:

• Background colours - Yellow

• Text alignments - Green

Note - There are further customisations e.g. table padding, table border thickness, but here I've concentrated on the main ones requested to get things rolling...

<style type="text/css">

h3 {text-align: center; font-size: 1.2em;}

p {text-align: center;}

div {text-align: center;}

body {

font: 80% arial, helvetica, sans-serif;

background-color: #0099cc;

text-align: center;

}

.hardleft {text-align: left; float: left; margin: 0px 0px 0px 0px;}

table {

width: 100%;

border-collapse: collapse;

}

table.center {

margin-left: auto;

margin-right: auto;

}

th, td {

padding: 2px;

border: 1px solid blue;

text-align: center;

}

/* Table header row background colour */

th {background-color: #aaf;}

/* Table odd/even rows background colour */

tr:nth-child(even) {background-color: #ddf;}

tr:nth-child(odd) {background-color: #bbf;}

/* table row hover highlighting */

tr:hover {background: #ffff99;}

td:hover {background: #ffff00;}

/* Custom settings for each data column utilised */

.tdrank {padding: 10px;text-align: center;}

.tdhelm {padding: 10px; text-align: left;}

.tdclass {padding: 10px; text-align: left;}

.tdsail {padding: 10px; text-align: left;}

.tdraceresult {text-align: center;}

.tdtotal {padding: 10px; text-align: right;}

.tdnet {padding: 10px; text-align: right;}

.tdlap {text-align: center;}

.tdlaps {text-align: center;}

.tdfinish {text-align: center;}

.tdpyn {text-align: center;}

.tdcorrected {text-align: center;}

.tdposition {text-align: center;}

/* Highlighting for 1st, 2nd, 3rd */

.tdraceresultrank1 {background-color: #ffd700; text-align: center;}

.tdraceresultrank2 {background-color: #c0c0c0; text-align: center;}

.tdraceresultrank3 {background-color: #e1b384; text-align: center;}

</style>

Now let's take a look at how to customise the background colours and text alignments to meet your needs:

Background colours

Page background

Default code:

body {

font: 80% arial, helvetica, sans-serif;

background-color: #0099cc;

text-align: center;

}

Within the body, the line:

background-color: #0099cc;

controls the page background, is RGB, and can be set to anything between 000000 (black) and FFFFFF (white).

Table Header row background

Default code:

/* Table header row background colour */

th {background-color: #aaf;}

This controls the table header row background colour (i.e. Helm or Rank, etc.), is RGB, and can be set to anything between 000 (black) and FFF (white).

Table Odd/Even row background

Default code:

/* Table odd/even rows background colour */

tr:nth-child(even) {background-color: #ddf;}

tr:nth-child(odd) {background-color: #bbf;}

These controls the table odd/even result rows background colour, is RGB, and can be set to anything between 000 (black) and FFF (white).

Table Odd/Even 'hover over'

Default code:

/* table row hover highlighting */

tr:hover {background: #ffff99;}

td:hover {background: #ffff00;}

These controls the table odd/even result rows row/cell 'hover over' colour, is RGB, and can be set to anything between 000000 (black) and FFFFFF (white).

Top position background colours

Default code:

/* Highlighting for 1st, 2nd, 3rd */

.tdraceresultrank1 {background-color: #ffd700; text-align: center;}

.tdraceresultrank2 {background-color: #c0c0c0; text-align: center;}

.tdraceresultrank3 {background-color: #e1b384; text-align: center;}

For series exports, the 1st, 2nd, and 3rd individual race scores are highlighted.

The defaults are Gold, Silver, and Bronze, but you can alter then to whatever colours you prefer.

Each one is RGB, and can be set to anything between 000000 (black) and FFFFFF (white).

Text Alignments

Each results (race or series) field's text alignment can be set to left, center, or right.

For example the series Rank field's default is - .tdrank {padding: 10px;text-align: center;} i.e each rank will be center aligned in its column within the table.

But let's say for example you want the Rank field to be left justified. Simply change 'center' to 'left' e.g. .tdrank {padding: 10px;text-align: left;}