H2R Graphics
  • What is H2R Graphics?
  • Getting started
  • Elements
    • Lower thirds
    • Ticker
    • Time
    • Logo
    • Message
    • Break
    • Chat
    • Image
    • Score
    • Draw on screen
  • Outputs
    • Chroma
    • Key/Fill
  • Settings
  • Advanced
    • Custom CSS
    • OSC API
    • YouTube API key
  • Common issues
Powered by GitBook
On this page
  • Adding CSS
  • CSS resources
  • Themes

Was this helpful?

  1. Advanced

Custom CSS

PreviousAdvancedNextOSC API

Last updated 3 years ago

Was this helpful?

Many elements within H2R Graphics will allow you to add Custom CSS in order to style them as you wish.

Head into any element and open the Options section. At the bottom will be any Custom CSS selectors.

Adding CSS

Each selector is listed as a separate input box.

In this example, I have two selector boxes.

.lower_third_text_name_left will allow me to add CSS to the text of a left-aligned lower third.

If, for example, I wanted to make that text upper case. I can add text-tranform: uppercase; to the left box.

CSS resources

Detailing all CSS options is outside the scope of this documentation.

There are many wonderful resources online that can help though.

Themes

When you have added your Custom CSS, you can save that as a theme within the Settings tab.

From this section, you can Save, Save As..., and Delete any theme.

You can also Load any of your previously created themes.

are a personal favourite.

MDN CSS docs
Lower third custom css section
Themes section in the settings tab