Examples of styles in Lumos: Film details – Help Centre

This article contains examples of where different elements are displayed in the Film details page, and outlines how to control the stylistic features of each element using the Lumos CMS.

Film details elements (3).png

Label

The following settings are used to configure label text in the Lumos CMS.

Setting	Location
Label colour	Themes > [theme] > Global > Light/Dark mode > Typography
Label weight	Themes > [theme] > Global > General > Typography
Body font	Themes > [theme] > Global > General > Typography

Note: The showtime status and title of the film are always white.

Heading

The following settings are used to configure heading text in the Lumos CMS.

Setting	Location
Heading colour	Themes > [theme] > Global > Light/Dark mode > Typography
Heading font	Themes > [theme] > Global > General > Typography
Heading weight	Themes > [theme] > Global > General > Typography

Paragraph

The following settings are used to configure paragraph text in the Lumos CMS.

Setting	Location
Paragraph colour	Themes > [theme] > Global > Light/Dark mode > Typography
Body font	Themes > [theme] > Global > General > Typography
Paragraph weight	Themes > [theme] > Global > General > Typography

Link

The following settings are used to configure link text in the Lumos CMS.

Setting	Location
Primary colour	Themes > [theme] > Global > Light/Dark mode > Colours
Body font	Themes > [theme] > Global > General > Typography
Button weight	Themes > [theme] > Global > General > Typography

Button

The following settings are used to configure buttons in the Lumos CMS.

Setting	Location
Primary button text colour	Themes > [theme] > Global > Light/Dark mode > Typography
Body font	Themes > [theme] > Global > General > Typography
Secondary button text colour	Themes > [theme] > Global > Light/Dark mode > Typography
Button weight	Themes > [theme] > Global > General > Typography
Style	Themes > [theme] > Global > General > Primary/Secondary button
Border thickness	Themes > [theme] > Global > General > Primary/Secondary button
Colour	Themes > [theme] > Global > General > Primary/Secondary button

Note: The Colour setting is determined by the Primary colour selected in Themes > [theme] > Global > Light/Dark mode > Colours.

Secondary text

The following settings are used to configure secondary text in the Lumos CMS.

Setting	Location
Primary button text colour	Themes > [theme] > Global > Light/Dark mode > Typography
Paragraph weight	Themes > [theme] > Global > General > Typography
Paragraph colour	Themes > [theme] > Global > Light/Dark mode > Typography

Note: The colour of secondary text is automatically made a lighter shade of the colour selected in the Paragraph colour setting, so that secondary text is distinguishable from a regular paragraph.