Defining your own CSS

From version 5.3 of the Loader, some dialogs in SimSig can be customised using CSS. Some customisation was previously possible through external CSS files, but it is not built in to the Options (F3) screen. Press F3 and go to the CSS tab to access this. By default SimSig comes with pre-defined CSS which you can edit to your liking. If you already have external CSS files defined, you can copy the text from those into the Options window - the files are no longer used or needed.

There are three dialogs which can be customised:

Train List (F2)
Show Timetable (for a train)
Simplifier (F8)

If you wish to revert CSS back to the default, select the appropriate tab first (Train List / Show Timetable / Simplifier) and press the "Reset to Default" button.

It is recommended that CSS is validated externally before applying to the Options screen. One such option is from the W3C website. The production of CSS is beyond the scope of SimSig: there is plenty of documentation online teaching CSS. The "level" of CSS is determined by your operating system but is generally CSS2 levels of compliance. Please use the forum to ask any questions on CSS usage, or even to post your own extracts to help other users.

The default CSS contains most of the configurable options so it is recommended to start from that basis and modify from there.

Customisation Options

Train List

Header and body cells (th and td elements respectively)

Selector	Applies to
tid	Train Identity (Headcode)
uid	Train unique identity
tt	WTT Column
dir	Direction
status	Current train status (moving, stopped etc)
loc	Current/previous location
len	Length of train
passsig	Can pass signal at stop
nonstop	Non-stop next station
power	Power
desc	Description of Train
rules	Diving Rules
wks	Current Workstation

Example:

td.tid { color: red }

This changes the text colour of the train identity column (body only).

Body rows (tr elements)

Selector	Applies to
alternate1	Odd numbered rows (first entry is odd)
alternate2	Even numbered rows

Example:

tr.alternate1 { background-color:white; }

tr.alternate2 { background-color:blue; }

Sets rows to an alternating background colour of white and blue.

Show Timetable

Header and body cells (th and td elements respectively)

Selector	Applies to	th or td
id	Headcode of the Train	Both
desc	Description of the Train	Both
notes	Notes for the Train	Both
char	Characteristics of the Train	Both
status	Status of the Train	Both
delay	Delay status of the Train	Both
delayearly	Delay Status if train is running early	td
delaylate	Delay Status if train is running late	td
delayontime	Delay Status if train is running on time	td
ars	ARS status of the Train	Both
loc	Timetable Location	th
locpass	Location is a passing time	td
locstop	Train stops (or starts from, or terminates) here	td
arr	Arrival Time	td
dep	Departure or Passing Time	td
path	Path Code	td
plat	Platform Code	td
line	Line Code	td
engallow	Engineering Allowance	td
pathallow	Pathing Allowance	td
misc	Any Miscellaneous Information (Set Down, Stopping Position etc)	td
acts	Any Activities (Next, Divides etc)	td
mru	Most recently seen Path/Plat/Line code	Both

Only one of locpass or locstop is selected per row.

Only one of delayearly, delaylate, or delayontime is selected.

Body rows (tr elements)

This will affect the formating of the entire row

Selector	Applies to
alternate1	Odd numbered rows (first entry is odd)
alternate2	Even numbered rows
locpass	Location is a passing time
locstop	Train stops (or starts from, or terminates) here

tr.alternate1 { background-color:white; }

tr.alternate2 { background-color:blue; }

Sets rows to an alternating background colour of white and blue.

tr.locpass{font-style:italic;}

Sets all text on a passing location row to Italic style

Simplifier

Header and body cells (th and td elements respectively)

Selector	Applies to
id	Train Identity (Headcode)
uid	Train Unique Identity
arrive	Arrival Time
path	Path Code
plat	Platform Code
line	Line Code
description	Train Description
pass	Passing Time
depart	Departure Time
activities	Activities
delay	Delay
stock	Stock
origin	Origin
destination	Destination
originTime	Origin Departure Time
destinationTime	Destination Arrival Time
operator	Operator
notes	Notes

Body rows (tr elements)

Selector	Applies to
alternate1	Odd numbered rows (first entry is odd)
alternate2	Even numbered rows

Last edited by y10g9 on 14/07/2021 at 17:45