3. Customisation

Theming

Creating your own theme

1. Navigate to the toolkit folder and go to \modules\plugin-theming\themes
2. Create a new folder for your theme
3. Open your theme folder
4. Create a file called theme.json with these contents (with your own name etc.):

{
  "name": "RCV Theme",
  "author": "RCVolus",
  "version": "1.0"
}

5. Create a file called index.scss with these contents:

:root {
  --blue-team: #029ef7;
  --blue-team-dark: hsl(202, 98%, 40%);
  --red-team: #ff5a64;
  --red-team-dark: hsl(356, 100%, 59%);
  --accent-color: #d8ef5e;
  --text-color: #fafafa;
  --background-color: #051c2c;
  --background-light-color: #051c2c;
  --primary-font-family: monospace;
  --secondary-font-family: sans-serif;
  --logo-path: url(/pages/op-themeing/active/logo.png);
}

6. Copy your logo to the folder as logo.png

• Note: Changing the logo-path currently has no effect, saving your logo (even a gif) as logo.png in the theme folder works

7. To apply your custom theme, head to the themeing module and apply your theme (reload themes to see new themes)

• any changes made to your theme need to be applied in order to show up

Almost all settings can be controlled by modifying index.scss in your theme. These settings apply across all modules to enable an uniform design.

Setting Fonts

The machine/browser displaying the UI must have the configured font available.

To set non-standard fonts, use this format (configures a font and a fallback in case the font is not available): --primary-font-family: "Helvetica", monospace;

Custom Logos/Overlays

To change/add logos or overlays, you will need to save the files in the ...\modules\themeing\your_theme\ folder

Finding CSS Selectors

To find the CSS classes and/or IDs needed to apply theming changes, you can just open the overlay page in a browser and use Inspect Element to see the selectors that apply. We try to give all selectors self-explanatory names and keep them consistent with updates.

Examples:

Changing the ingame overlay

To change the team tag background, add this to index.scss, with a replacement image present in the respective theme folder:

.rcv-teams-ingame-gfx #tag-container {
  background-image: url(/pages/op-themeing/active/tag_background.png);
}

To change the score display background, add this to index.scss, with a replacement image present in the respective theme folder:

.rcv-teams-ingame-gfx #score-container {
  background-image: url(/pages/op-themeing/active/score_background.png);
}

Modifying GFX Themeing

Themeing of components

Usually, all GFX elements are in the form of a web resource, that can be rendered by any web browser (especially the OBS/vMix integrated ones). Usually, they are consisting of HTML, JavaScript and CSS files. All of those files are provided by the GFX provider per default. They may just represent a graphical visualisation that the maintainer of the GFX provider likes and that could be more or less fitting in a lot of scenarios.

Global themeing overwrite

Usually you would want to set up one single theme that will then be used all across various GFX elements. This is where the global themeing overwrite comes into play. It allows you to specify one single CSS file, in which you can overwrite all the styling information from the CSS file that is provided by the component, and adapt the looks to the specific needs.

For GFX providers

To make this thing work, it's always important that you wrap your whole GFX component in a class (e.g. using an HTML div element) that is specific to your plugin and GFX (we recommend to use the plugin name). For plugins that describe multiple GFX elements, also describe what it is.

Example: The plugin "league-gfx" offers the views "Post Game Gold Graph" and "Post Game Gold Comparison".

The "Post Game Gold Graph" would be wrapped with the class "league-gfx-post-gold-graph". The "Post Game Gold Comparison" would be wrapped with the class "league-gfx-gold-comparison".

This allows to specifically only change one component in the global CSS.

For theme creators

If you want to create a theme, there are a few tricks and tipps:

• use CSS variables to define and apply things like colours, margins, borders, etc. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
• use the wrapper class if you only want to style a specific component, but set all things globally that you want to have set globally (e.g. fonts, colours).