Custom CSS

H2R Graphics theme editor makes it easy to change the overall look and feel of your graphics - however, you may want to dig a little deeper than that.

Adding Custom CSS

To add some Custom CSS to your theme, go to the Theme tab, scroll down and open the CSS section.

Opening the CSS input area

When opened, you can enter any CSS you want to make changes to your theme.

CSS Selectors

The CSS selectors in available in H2R Graphics are the following...

.large_text

Refers to any Large Text item on your rundown, no matter what Theme is applied to it.

.small_text

Refers to any Small Text item on your rundown, no matter what Theme is applied to it.

.h2r_base_theme_large_text

Refers to any Large Text within the h2r_base_theme.

.h2r_base_theme_small_text

Refers to any Small Text within the h2r_base_theme.

You can switch out h2r_base_theme for your own theme short name. You will find that name within your CSS editor as it is generated automatically.

Simple Graphics

.lower_third

Refers to any Lower Third graphic on your rundown, no matter what Theme is applied to it.

.message

Refers to any Message graphic on your rundown, no matter what Theme is applied to it.

.time

Refers to any Timer graphic on your rundown, no matter what Theme is applied to it.

.image

Refers to any Image graphic on your rundown, no matter what Theme is applied to it.

.ticker

Refers to any Ticker graphic on your rundown, no matter what Theme is applied to it.

.social

Refers to any Social graphic on your rundown, no matter what Theme is applied to it.

.webpage

Refers to any Webpage graphic on your rundown, no matter what Theme is applied to it.

.score

Refers to any Score graphic on your rundown, no matter what Theme is applied to it.

.checklist

Refers to any Checklist graphic on your rundown, no matter what Theme is applied to it.

Pro graphics

.big_time

Refers to any Big Timer graphic on your rundown, no matter what Theme is applied to it.

.lower_third_animated

Refers to any Lower Third Animated graphic on your rundown, no matter what Theme is applied to it.

.icon_with_message

Refers to any Icon with Message graphic on your rundown, no matter what Theme is applied to it.

.credits

Refers to any Credits graphic on your rundown, no matter what Theme is applied to it.

.animated_background

Refers to any Animated Background graphic on your rundown, no matter what Theme is applied to it.

.celebration

Refers to any Celebration graphic on your rundown, no matter what Theme is applied to it.

.image_with_message

Refers to any Image with Message graphic on your rundown, no matter what Theme is applied to it.

Theme and Graphic specific

.h2r_base_theme_lower_third

Refers to any Lower Third graphic using the h2r_base_theme.

Replace h2r_base_theme or lower_third with any theme or graphic.

Theme, Element and Graphic specific

.h2r_base_theme_lower_third_large_text

Refers to Large Text on any Lower Third graphic using the h2r_base_theme.

Replace h2r_base_theme or lower_third or large_text with any theme, graphic or element.