Comment on page

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

Theme - Previous

Colours

Next - How to use with

ATEM

Last modified 1yr ago