Follow these guidelines when setting up colours for your sales channels in the Lumos CMS.
Note:
- Shades of each colour will be automatically determined by the hex value you choose, such as a different shade for when the mouse hovers over a button.
- You can't configure the shades used.
- You can't apply colour gradients, only single hex codes.
Buttons, accents, and notifications
Configure colours for the following elements in Themes > [Theme name] > Global > [Light/Dark mode] > Colours.
| Setting | Usage | Example colour | Example element |
| Primary | Main elements of your sales channels, such as primary buttons | ||
| Secondary | Elements that require less impact, such as secondary buttons | ||
| Accent | Highlights certain elements, such as the selected tab | |
|
| Success | The background and border of success notifications | ||
| Warning | The background and border of warning notifications | ||
| Error | The background and border of error notifications |
Fonts
Configure colours for your fonts in Themes > [Theme name] > Global > [Light/Dark mode] > Typography.
| Setting | Usage | Example colour | Example element |
| Heading colour | Page headings | ||
| Paragraph colour | Most body text | ||
| Secondary text colour | Text requiring less impact | ||
| Label colour | Text appearing in tags and other labels | ||
| Primary button text colour | Text inside primary buttons | ||
| Secondary button text colour | Text inside secondary buttons |
Cards
Cards are elements on your website, similar to buttons, but containing more information, and often containing an image.
Configure colours for your cards in Themes > [Theme name] > Global > [Light/Dark mode] > Card.
| Setting | Usage | Example colour | Example element |
| Card fill colour | Background of cards | ||
| Card border colour | Border of cards |
Hero attributes
Configure colours for your background in Themes > [Theme name] > Global > [Light/Dark mode] > Background.
| Setting | Usage | Example colour | Example element |
| Hero attribute colours |
Background of showtime attributes. Configure each attribute individually by referencing the attribute's code in Head Office. |
Backgrounds
Configure colours for your background in Themes > [Theme name] > Global > [Light/Dark mode] > Background.
| Setting | Usage | Example colour | Example element |
| Header background colour | Background of the header on your sales channels | ||
| Body background colour |
Background of the body of your sales channels. Used for tablet, and mobile views. Also used for web desktop view if no body background image is provided. |
See also:
Comments
0 comments
Please sign in to leave a comment.