Styling the Live Timetables

The Live Timetables offer customisable fonts and colours, enabling you to align their appearance with your website’s branding for a seamless visitor experience.

The customStyle object

Variable / Field	Field Function	Example value
button.color	Controls the text colour of the day/date selector when it is selected. NB when the day/date selector is not selected, the text colour will be black.	#FF0000
button.backgroundColor	Controls the colour of the day/date selector when it is selected and both of the booking buttons	#008000
hover.color	Controls the text colour of the time/date selector and both booking buttons when you hover over them	#ffff00
button.fontFamily	Controls the font style for the day/date selector and both booking buttons	Lato, sans-serif
filter.fontFamily	Controls the font style for the time and activity filters	Roboto
base.fontFamily	Controls the font style for the text in the timetable rows	Noto Sans Khojki

Example

customStyle: {
  button: {
    color: '#FF0000',
    backgroundColor: '#008000',
    ':hover': {
      color: '#ffff00',
    },
    fontFamily: 'Lato, sans-serif',
  },
  filter: {
    fontFamily: 'Roboto',
  },
  base: {
    fontFamily: 'Noto Sans Khojki',
  },
},

Caution

Where the font(s) you are using are not universally accepted fonts, they will need to be used in conjunction with the fonts array below.

The fonts array

Where the font(s) you are using are not universally available standard fonts, you will need to include a an external link to reference the relevant services/repositories being used to source web fonts, e.g. Google Fonts

Note

“Universally accepted fonts” refers to identifying fonts that are widely supported across different operating systems and devices. These fonts are likely to be pre-installed on most computers and browsers, ensuring that your web content appears consistently to all users.

They typically include fonts like Arial, Times New Roman, Courier New, Georgia, and Verdana, among others.

Example

fonts: [
  {
    cssSrc: 'https://fonts.googleapis.com/css?family=Roboto:300,400,700:latin',
  },
  {
    cssSrc: 'https://fonts.googleapis.com/css2?family=Noto+Sans+Khojki',
  },
],

Note

Where the font you are using is a universally available standard font, you do not need to use the fonts array.

customStyleForStyledComponents object

By default:

• Odd rows in the timetable match the background color of the page it’s on. For example, if the page background is black, these rows will be black too.
• Even rows are grey, providing contrast regardless of the page background.

The customStyleForStyledComponents object is handy for pages with non-white backgrounds, allowing you to manually set odd rows to white or any color you prefer, preventing them from blending into the page background. You also have the flexibility to customize colors for both odd and even rows as needed.

Variable / Field	Field Function	Example value
gridRow.odd	Controls the colour of the odd timetable rows	#800080
gridRow.even	Controls the colour of the even timetable rows	#ffc0cb

Example

customStyleForStyledComponents: {
  gridRow: {
    odd: {
      backgroundColor:'#800080',
    },
    even: {
      backgroundColor:'#ffc0cb',
    },
  },
},