Design Variables

Intro

The Design Variables file is a CSS file called variables.css. It can be found at STUK-NodeCG\graphics\variables.css. The HTML files for every layout refer to this variables file and the accompanying CSS files use these variables when declaring specific design elements. This allows you to declare colours, backgrounds and fonts in just this one file, and every layout will adjust.

Unlike configuration files, CSS files can be edited on the fly whilst the package is running - you won't need to restart NodeCG every time you update this file. Once you've made changes you'd like to see, save the file and then refresh any layout and it will update to reflect the changes.

Not every design element is editable within this file. For example, font sizes cannot be adjusted. The reason for this is that many design elements are intended to be fixed as an optimal variable has already been determined in the design, plus trying to include every design variable would make this document impossible to read and navigate. If you know what you're doing, you are welcome to directly edit the CSS files in the graphics folder, however guides for doing so are not provided.

The package includes the default STUK design, and the default variables are found at the end of this page should you want to revert back to them. However, one further intention with this method of variable management is that if you've seen another marathon using the STUK package, like their design and would like to use their design as a starting point to editing yours, I would encourage you to reach out and ask for their variables files and replace the text in yours with theirs.

Colours

CSS colours can be specified in a few different ways and you can use any combination of them in the variables file:

By colour names
There are 140 written colour names supported by CSS. Common names such as red, green, blue, black, and white are all acceptable names. A full list of colours can be found on W3Schools.
As RGB or RGBA values
RGB values specify the levels of red, green, and blue values of a colour, each value ranging from 0 to 255. These are written as rgb(155,23,178). You can also use RGBA to include an alpha decimal value from 0 (fully transparent) to 1 (fully opaque). These are written as rgba(160, 147, 10, 0.8).
As hexadecimal values
Hexadecimal values are simpler six digit hexacodes that also specify RGB values. These are written as #00AA9F. These can be written as an eight digit hexacode to include an alpha value from 00 (fully transparent) to FF (fully opaque). These are written as #4C9EC1EE.
As HSL or HSLA values
HSL values specify the Hue (0 to 360), Saturation (0% to 100%), and Lightness (0% to 100%). These are written as hsl(0,50%,50%). You can also use HSLA to include an alpha decimal value from 0 (fully transparent) to 1 (fully opaque). These are written as hsla(14,14,181,0.8).

Variables

Background

--background-image: set to none if you don't want to display a background image and just use colours. If you do want to set a background image, set this to url("{YOUR_IMAGE_URL}") - this can either be a URL to an online image, or you can drop the image you wish to use in the assets folder, and set the variable to URL("../assets/{YOUR_FILENAME_HERE}"). You can find more background image options on W3Schools.
--background-size: use auto to display the original size; cover to fill the entire space - this will stretch or crop the image if it isn't 1920x1080px; contain to resize the image so it is fully visible - any borders will be filled with the two gradient colours specified below.
--background-repeat: if the background is smaller than 1920x1080px, determines if the background should repeat until all space is filled. Use repeat if you've got a smaller texture that you want to repeat across the display, or no-repeat if you only want the image to appear once.
--gradient1: the first colour of the gradient background shown if no background image is used.
--gradient2: the second colour of the gradient background shown if no background image is used. If you want a solid colour as a background, set both --gradient1 and --gradient2 to the same colour value.
--gradient-speed: how long it takes for the gradient animation to play a single cycle.

Colors

--runner-name: colour of the runner's name only - the Twitch logo will always be white.
--runner-pronouns: colour of the runner's pronouns.
--runner-background: colour of the background of the panel that contains the runner's name and pronouns.
--game-name: colour of the game name.
--game-details: colour of the game category, console, and release year.
--game-background: colour of the background of the panel that contains the game's name, category, console, and release year.
--host-letter/--comms#-letter: colour of the 'H' or 'C' that precedes the Host or each Commentators' name.
--host-name/--comms#-name: colour of the Host or each Commentators' name.
--host-pronouns/--comms#-pronouns: colour of the Host or each Commentators' pronouns.
--host-background/--comms#-background: colour of the background of the panel that contains the Host or each Commentator.

Timer

--timer-running: colour of the timer when it is running.
--timer-stopped: colour of the timer before it has started running.
--timer-paused: colour of the timer when it has been paused during a run.
--timer-finished: colour of the timer once the run has completed.
--timer-glow: the size of the glow around the timer - the colour of the glow will always match the colour of the text.
--timer-background: colour of the background of the panel that contains the timer and estimate.
--estimate: colour of the estimate text.
--medals-background: colour of the background of the panel that contain the medals and finishing times during a race (same across all players).

Warning

--warning-text: colour of the warning text (same across all players).
--warning-background: colour of the warning text background (same across all players).

Borders

The following variables affect the borders of all panels, except for the omnibar as those are declared in separate variables below:

--border-style: use none to specify no border; dotted for a dotted border of small circles; dashed for a dashed border of small lines; solid for a solid border; double for a double-lined border; groove for a 3D grooved border; ridge for a 3d ridged border; inset for a 3D sunken border; outset for a 3D raised border.
--border-width: width of the border.
--border-color: colour of the border.
--border-glow: colour of the glow of the border.
--border-glow-spread: size of the the glow of the border.
--border-radius: size of the curved corners of each panel, set to 0 for no curved corners. This does not affect the game and camera borders which must remain square due to the masks needed over the layout background.

The following variables affect the borders of the omnibar panels, the parameters are the same as those specfied above:

--omnibar-border-style:
--omnibar-border-width: does not affect the borders of the progress bars, these are a fixed width
--omnibar-border-color:
--omnibar-border-glow:
--omnibar-border-glow-spread: does not affect the borders of the progress bars, these are a fixed size
--omnibar-border-radius:

Omnibar

--donation-text: colour of the donation total text.
--donation-background: colour of the donation total background.
--time-text: colour of the date and time text.
--time-background: colour of the date and time background.
--omnibar-text: colour of most of the other omnibar text.
--omnibar-highlight: colour of highlighted text such as the marathon name, donation url, run names, and incentive names.
--omnibar-background: colour of omnibar background.
--omnibar-meter-background: colour of the progress bar backgrounds.
--bidwar: colour of the Bid War header.
--incentive: colour of the Incentive heading, incentive progress bar foreground, and bid war option 1 background.
--prize: colour of the Prize heading, and bid war option 2 background.
--milestone: colour of the Milestone heading, milestone progress bar foreground, and bid war option 3 background.
--up-next: colour of the Up Next heading, and bid war option 4 background.
--header-color: colour of the heading text, is the same across all heading types.

Intermission

The intermission has separate background settings so you can make the intermission look distinct from the game layouts if desired.

--intermission-background-image: set to none if you don't want to display a background image and just use colours. If you do want to set a background image, set this to url("{YOUR_IMAGE_URL}") - this can either be a URL to an online image, or you can drop the image you wish to use in the assets folder, and set the variable to URL("../assets/{YOUR_FILENAME_HERE}"). You can find more background image options on W3Schools.
--intermission-background-size: use auto to display the original size; cover to fill the entire space - this will stretch or crop the image if it isn't 1920x1080px; contain to resize the image so it is fully visible - any borders will be filled with the two gradient colours specified below.
--intermission-background-repeat: if the background is smaller than 1920x1080px, determines if the background should repeat until all space is filled. Use repeat if you've got a smaller texture that you want to repeat across the display, or no-repeat if you only want the image to appear once.

--top-bar-left-background: colour of the music panel background.
--top-bar-right-text: colour of the date & time panel text.
--top-bar-right-background: colour of the date & time panel background.
--shadow: colour of the shadow behind multiple elements, set to none if not wanted.
--supporting-message: colour of the "Supporting" text.
--up-next-header: colour of the "Starting Soon" text.
--up-next-background: colour of the starting soon background.
--up-next-game-background: colour of the starting soon game's background.
--on-deck-1-header: colour of the first up next text.
--on-deck-1-background: colour of the first up next background.
--on-deck-1-game-background: colour of the first up next game's background.
--on-deck-2-header: colour of the on deck texts.
--on-deck-2-background: colour of the on deck backgrounds.
--on-deck-2-game-background: colour of the on deck games' backgrounds.
--intermission-host-letter: colour of the 'H' that precedes the host's name.
--intermission-host-name: colour of the host's name.
--intermission-host-pronouns: colour of the host's pronouns.
--intermission-host-background: colour of the host's panel background.

Fonts

Fonts should be stored in the following location: ROOT > assets > stuk-nodecg > fonts.

Both TTF and OTF file types are supported, and they don't need to be installed to your computer for them to work. Once you've added a font, change the filename in the appropriate entry in the variables file to assign it; do not change any other text in these entries. These affect all layouts including intermission:

Names: names of runners, hosts, and commentators, and the 'Supporting' text on the intermission.
Pronouns: pronouns of runners, hosts, and commentators, and the 'Starting Soon/Up Next/On Deck' texts on the intermission.
Game: game names.
Game Details: category, console, release year, and estimate.
Timer: timer, including the schedule reveal timer.
Host/Comms Letter: 'H' and 'C' that precedes the host and commentators.
Medal Times: final time of each runner in a race, and the date and time on the omnibar, intermission, and schedule reveal.
Omnibar Donation: donation total on the omnibar.
Omnibar Text: all text in the central area of the omnibar.

Default Variables

:root {

/* Background: set background-image to 'none' to use gradient colors */

--background-image: none; /* 'url(IMAGE URL HERE)' or 'none' */

--background-size: cover; /* 'auto' = original size, 'cover' = fill */

--background-repeat: no-repeat; /* 'no-repeat' or 'repeat' */

--gradient1: #4973fe;

--gradient2: #f207e9; /* set the same as gradient1 to have solid color background */

--gradient-speed: 30s;

/* Colors */

--runner-name: #FFFFFF;

--runner-pronouns: #FFFFFF;

--runner-background: #1e1e1e82;

--game-name: #FFFFFF;

--game-details: #FFFFFF;

--game-background: #1e1e1e82;

--host-letter: #FFFFFF;

--host-name: #FFFFFF;

--host-pronouns: #FFFFFF;

--host-background: #1e1e1e82;

--comms1-letter: #FFFFFF;

--comms1-name: #FFFFFF;

--comms1-pronouns: #FFFFFF;

--comms1-background: #1e1e1e82;

--comms2-letter: #FFFFFF;

--comms2-name: #FFFFFF;

--comms2-pronouns: #FFFFFF;

--comms2-background: #1e1e1e82;

--comms3-letter: #FFFFFF;

--comms3-name: #FFFFFF;

--comms3-pronouns: #FFFFFF;

--comms3-background: #1e1e1e82;

/* Timer */

--timer-running: #FFFFFF;

--timer-stopped: #adadad;

--timer-paused: #ff4040;

--timer-finished: #00ff22;

--timer-glow: 10px;

--timer-background: #1e1e1e82;

--estimate: #FFFFFF;

--medals-background: #f207ea3f;

/* Warning */

--warning-text: #FFFFFF;

--warning-background: #f207ea3f;

/* Borders */

--border-style: solid;

--border-width: 3px;

--border-color: #FFFFFF;

--border-glow: #FFFFFF;

--border-glow-spread: 4px;

--border-radius: 0px;

--omnibar-border-style: solid;

--omnibar-border-width: 3px;

--omnibar-border-color: #FFFFFF;

--omnibar-border-glow: #FFFFFF;

--omnibar-border-glow-spread: 4px;

--omnibar-border-radius: 0px;

/* Omnibar */

--donation-text: #FFFFFF;

--donation-background: #4a0848;

--time-text: #FFFFFF;

--time-background: #4a0848;

--omnibar-text: #FFFFFF;

--omnibar-highlight: #ffdf81;

--omnibar-background: rgba(33, 52, 113, 0.9);

--omnibar-meter-background: #1e1e1e82;

--bidwar: rgb(155, 23, 178);

--incentive: rgba(24, 97, 12, 1); /* also used for bidwar option 1 */

--prize: rgba(14, 14, 181, 1); /* also used for bidwar option 2 */

--milestone: rgba(147, 21, 21, 1); /* also used for bidwar option 3 */

--up-next: rgb(160, 147, 10); /* also used for bidwar option 4 */

--header-color: white;

/* Intermission */

--intermission-background-image: none; /* 'url(IMAGE URL HERE)' or 'none' */

--intermission-background-size: cover; /* 'auto' = original size, 'cover' = fill */

--intermission-background-repeat: no-repeat; /* 'no-repeat' or 'repeat' */

--intermission-gradient1: #4973fe;

--intermission-gradient2: #f207e9; /* set the same as gradient1 to have solid color background */

--intermission-gradient-speed: 60s;

--top-bar-left-background: rgba(14, 14, 181, 0.8);

--top-bar-right-text: white;

--top-bar-right-background: rgba(49, 0, 75, 0.8);

--shadow: rgb(39, 39, 39); /* set to 'none' if not wanted */

--supporting-message: white;

--up-next-header: white;

--up-next-background: rgba(74, 8, 72, 0.5);

--up-next-game-background: rgba(33, 52, 113, 0.5);

--on-deck-1-header: white;

--on-deck-1-background: rgba(70, 70, 70, 0.8);

--on-deck-1-game-background: rgba(33, 52, 113, 0.8);

--on-deck-2-header: white;

--on-deck-2-background: rgba(70, 70, 70, 0.8);

--on-deck-2-game-background: rgba(33, 52, 113, 0.8);

--intermission-host-letter: #FFFFFF;

--intermission-host-name: #FFFFFF;

--intermission-host-pronouns: #FFFFFF;

--intermission-host-background: rgba(14, 14, 181, 0.8);

}

/* Fonts - Change URLs Only */

@font-face {

font-family: 'Names';

src: url('../../../assets/stuk-nodecg/fonts/Audiowide-Regular.ttf');

}

@font-face {

font-family: 'Pronouns';

src: url('../../../assets/stuk-nodecg/fonts/Aldrich-Regular.ttf');

}

@font-face {

font-family: 'Game';

src: url('../../../assets/stuk-nodecg/fonts/Aldrich-Regular.ttf');

}

@font-face {

font-family: 'Game Details';

src: url('../../../assets/stuk-nodecg/fonts/Aldrich-Regular.ttf');

}

@font-face {

font-family: 'Timer';

src: url('../../../assets/stuk-nodecg/fonts/Maxter\ Board\ St.ttf');

}

@font-face {

font-family: 'Host/Comms Letter';

src: url('../../../assets/stuk-nodecg/fonts/Maxter\ Board\ St.ttf');

}

@font-face {

font-family: 'Medal Times';

src: url('../../../assets/stuk-nodecg/fonts/BPdotsUnicaseSquareBold.otf');

}

@font-face {

font-family: 'Omnibar Donation';

src: url('../../../assets/stuk-nodecg/fonts/Audiowide-Regular.ttf');

}

@font-face {

font-family: 'Omnibar Text';

src: url('../../../assets/stuk-nodecg/fonts/Aldrich-Regular.ttf');

}

Back to Assets

Page updated

Google Sites

Report abuse