The Site-Wide Styles settings allow you to define the default look and feel of your entire website. From colors and fonts to layout and button behavior, these settings help ensure a consistent, on-brand experience across all pages. Once applied, they affect the entire site but can still be adjusted at the content level when needed. A preview page shows how your changes appear in context, helping you maintain a polished, cohesive design.
Key Features
General Settings
Customize global interface elements, such as scroll bar color.
Layout Control
Define the order of page sections (e.g., ticker above hero).
Set different layouts for the homepage versus subpages.
Color Palette
Add up to 8 core brand colors (editable per component).
Include a muted color for less prominent elements (e.g., disabled buttons, pagination).
Typography
Set two font families: one for body text, one for headings.
Define font weights (e.g., normal=400, bold=700).
Support for system fonts, Google Fonts (free), Adobe Fonts (requires setup), or custom WOFF fonts.
Element Defaults
Style Sections, Articles, and Buttons with default formatting.
Configure section title alignment and color.
Add optional dividers with standard or custom styles.
Set default button appearance and hover behavior (darken or custom color change).
Preview & Reference
Use the “Sections and Articles” demo page to see how defaults look in real-world scenarios.
How to Use
Access Site Styles
Go to Back Office → Site Styles (or Branding).
Customize Settings
General: Pick site-wide interface colors.
Layout: Arrange key page sections.
Color: Add brand colors and select the muted shade.
Typography: Choose font families and weights.
Elements: Style section titles, dividers, buttons, and more.
Save and Preview
Click Save to apply your changes.
Review the demo page to see your styles in context.
Fine-Tune Content
Individual Sections or Articles can override default styles if needed.
Using Site-Wide Styles ensures that your event website remains visually consistent, professional, and on-brand, while still allowing flexibility at the content level.
Watch the Video Demo:
Video Transcript:
In here you'll be able to edit all the default colour and style settings for your entire website.
The General tab will give you simple options such as a scroll bar. This is the item that will appear down the side of your screen, and you can customise this to any colour.
The Layout tab will show you the order in which different sections appear on your website. For example, if you choose to have a ticker above your hero, you can move it simply like this. We allow you to have different orders for your homepage and subpage.
The next tab is your Colour. Please add all the colours in your colour palette. You have 8 different options here. Please note these are just default colours. You can also go on to customise each individual item as you enter them, such as article titles.
The muted colour is a special colour. Please always try to put a muted colour in this. This is used for certain modules and pagination. For example, if there isn't something available, we may use the muted colour to colour this up.
The Typography tab manages the fonts that you're using on your website. We allow you to have two different sets of fonts: one for your main body text and the second for any headings. If you know the name of your font, please pop it in.
The weights refer to the boldness of your fonts—for example, normal writing will be 400, and anything bold will be 700. For more details on the weights available in your fonts, please refer to your font supplier.
We can accept different types of fonts. System fonts are those usually available on most computers, such as Arial. Google Fonts can be used in the platform free of charge. These can be found by going to Google Fonts and searching for the fonts you need.
Adobe Fonts are also available, but you'll need your project manager to set this up for you. If you have a custom font, you will need to supply your project manager with the WOFF or WOFF2 file formats.
Your next tab is Elements. This is where you will set the default styles of your sections, articles, and buttons.
Starting with the sections, you can say that your section title will always appear in the centre and will be Colour One. Don’t forget this can always be overwritten in the actual content.
You can then go through to follow up and say whether a title above will appear and what colours it will be. You can add a divider—we have standard ones, or you can add a little custom divider. This may be a little icon. You can also add a description. These are words that will appear below the title for articles.
We have four different article types. For more information on this, please go to the articles video. This is where you will set up the default styles of each of these articles.
For example, you could say the Plain style will have an image that is square. It has a header that is left aligned and this size. These are all set up for each one in turn.
Your buttons are set up here as well. You have eight button styles available in the platform. For each one, you can select the font, the size, and the boldness. You'll be able to select the text colour and the background.
The background can be either a colour or a gradient. If you choose gradient, this can be linear—from top to bottom or left to right. You can choose the colours from the colour palette or you can set your own custom colour.
You may choose to put a border around your button. You can set the width and the colour. A corner radius refers to the roundness around the edges of your button.
For example, if you want a completely square-edged button, you would take this off completely. If you do want rounded edges, you can add a small, normal, or large-sized corner.
You will also be able to dictate what happens when the button is hovered upon. The default setting is that the button colour will go a bit darker. You can, however, customise this. This could be a completely different change of colour background, for example.
All of these default styles can be seen on your section and article example page.
Comments
0 comments
Please sign in to leave a comment.