Theme
The Theme section lets you declare all things style-related, from colors to match row styles with everything in between. You can choose which font to use (all Google Fonts are supported), the text and buttons styling etc.
You also have access to several types of spacing and navigation items, that you can customize to fit your needs. These will be usable across your whole website.
Here is the complete list of available settings, and description of how they work:
Theme
Colors
You can select 5 base colors to build your website color palette, which is displayed at the top. Selection is made via a color picker, or the color code can be directly entered (Hex, RGB or HSL).
Note that you will have access to these 5 colors, and their full spectrum from white to black (with up to 12 color variations for each).
You can also choose between a light and dark theme for your website overall, which will invert the spectrum of each selected color.
Fonts
Here, you can add any Google Font to be used for your text styles.
Polices may have different weights available, and a preview of each one will be displayed upon selection.
Text styles
This will let you define precisely each style of text that will be displayed on your website, with 6 different Headings and 3 Paragraph styles.
For each one, you can select the font to be used (and its weight if available), set it in italic, and precisely define its size (in pixels) and line height (in em, which depends on the text size).
A dynamic preview is available at the bottom, to previsualize any change.
Spacing
You can define the size of the spacings to be used on your website.
You have 5 different values to work with: Tiny, Small, Medium, Large and Huge, with default values.
Buttons
You can configure up to 5 different button styles, to be used throughout your website. Each button style lets you set three different settings:
Global
Choose the text style and color, along with the horizontal and vertical padding to be applied to the button.
You also have options to define the border thickness and radius.
Hover
Define the style of the button when it is hovered, by selecting the text, border and background colors.
Active
Define the style of the button when it is active, by selecting the text, border and background colors.
Navigation
You can configure up to 5 different navigation styles, to be used throughout your website. Each navigation style lets you set four different settings:
Type
Opt for a Pills or Tabs general display for your navigation bar, with Pills having a background behind the navigation items, while Tabs only have an underline (which can be removed).
Global
Choose the text style and color, along with the horizontal and vertical spacing to be applied to the navigation bar.
You also have options to define item spacing and background radius in case of a pills style.
Current
Choose the text style and color, along with the horizontal and vertical spacing to be applied to the currently active item in the navigation bar.
You also have options to define item spacing and background radius in case of a pills style.
Hover
Choose the text style and color, along with the horizontal and vertical spacing to be applied to the currently hovered item in the navigation bar.
You also have options to define item spacing and background radius in case of a pills style.
Competition
Rankings
You can configure up to 4 different ranking styles, to be used throughout your website. Each ranking style lets you set several different settings, and displays a preview at the bottom of the interface:
Global
Select values for horizontal and vertical spaces to be applied across the ranking block.
Heading
Define the style of the ranking headings, with a text style and a color selected from your theme.
Divider
Define the thickness and color of the dividers. You can set the thickness value at 0 to hide the dividers.
Rank
Define the size and text style of the Rank column.
Participant
Define the size and text style of the Participant column, and the size of the visual asset displayed. You can also select the color for the placeholder.
Statistics
Define the size and text style of the Statistics column.
Points
Define the size and text style of the Points column.
Brackets
You can configure up to 4 different bracket styles, to be used throughout your website. Each bracket style lets you set several different settings, and displays a preview at the bottom of the interface:
Global
Choose the vertical spacing for the bracket, which will dictate the space between the round titles and the matches.
Round
Define the style and color of the round titles. You can also change the aspect of the round block, by changing its border radius, thickness and color, and its background color.
Bracket box
Define the style of each match box, with a width/height field, a vertical margin to choose the space between matches and border parameters.
Bracket connector
Define the style of the connectors that link your matches in the bracket, by choosing a width, thickness and color.
Match
Choose values for the internal padding and spacing of the match boxes.
Participant
Define how participants are displayed in the bracket, alongisde their logo or flag, and the colors for placeholder, winning and losing participants.
Result
Define the style of the results in the bracket, with a set size in the match box and colors for each case (win, loss, forfeit...).
Matches
You can configure up to 4 different match styles, for both mini and row displays, to be used throughout your website. Each match style lets you set several different settings, and displays a preview at the bottom of the interface:
Mini - Global
Choose the minimum width of a mini match, its padding and spacing, background and border settings.
Mini - Participant
Define how participants are displayed in the mini matches, alongisde their logo or flag, and the colors for placeholder, winning and losing participants.
Mini - Result
Define the style of the results in the mini matches, with a set width in the match box and text colors for each case (win, loss, forfeit...).
Row - Global
Define the settings of a row match: its padding and spacing, border and background settings.
Row - Schedule
Define the size of the date area in the row matches and the style to apply to the text (color, alignment etc.).
Row - Context
Define the style of the additional context of the row matches, by choosing the text style, colors and alignment.
Row - Participant
Define how participants are displayed in the row matches, alongisde their logo or flag, and the colors for placeholder, winning and losing participants.
Row - Result
Define the style of the results in the row matches, with a set width in the match box and colors for each case (text and background).
Tournaments
You can configure up to 4 different tournament styles, for row displays, to be used throughout your website. Each tournament style lets you set several different settings, and displays a preview at the bottom of the interface:
Global
Define the padding, background and border settings of your tournament row.
Logo
Choose the size of the tournament logos in the list.
Identity
Define the style of the identifying information of tournaments in the list.
Circuit
Define the style of the circuit information for tournaments in the list.
Event
Define the style of the event information for tournaments in the list.
Size
Define the style of the size of tournaments in the list.
State
Define the style of the tournament state in the list.
Hover
Define the border and background settings when the tournament row is hovered.
