Theme

Updated 3 weeks ago by Geoffroy "Vomact" Piot

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.

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).


How did we do?