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.
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.
Comments
0 comments
Please sign in to leave a comment.