You are here: Wiki > start > usertrack > ssrun > css

Table of Contents

Defining your own CSS
Customisation Options
Train List
Show Timetable
Simplifier

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:49