CSS variables scope

Hi ... I've been wanting to use css variables in my custom char sheet CSS file.  specifically I want to put my URL's for my various logos and backgrounds into variables at the top of the CSS file so while I testing with different looks I don't need to change all locations, just change the vars at the top of the CSS file. I figured out that the scope for all variables in the sheet you can put them into the . charsheet style ... .charsheet { --charsheet_background: url("your path here"); --charsheet_hdr_background: url("your path here"); --titles_background: url("your path here"); } And then reference them throughout the rest of the CSS classes. For examples, for images I use in multiple places now I can just do this ... background-image: var(--titles_background); If I want to change the background of my titles I just change the one var at top. I also want to use variables for my rolltemplates css classes, however they don't seem to play like the classes in the charsheet (no surprise). :root  does not work. I have numerous rolltemplates in my HTML, and such have numerous corresponding classes in my css, but I cannot determine how to scope the variables so they work across all rolltemplate classes in the css. Anyone have a suggestion? Cheers!

Jakob posted a custom rolltemplate ages ago that used variables in the rolltemplate:&nbsp; <a href="https://gist.github.com/joesinghaus/28173990b3235365f6e13fb9f834aa5d" rel="nofollow">https://gist.github.com/joesinghaus/28173990b3235365f6e13fb9f834aa5d</a> It looks like you do have to define them inside the rolltemplate code. rolltemplates are pretty restricted, because styles there could affect the entire interface, not just the chat window, if not locked down pretty severely. That leads to them being a bit less flexible in some ways than other CSS elements.

can you simply include the roll template class names when you declare the variables? .charsheet, .sheet-rolltemplate-general, .sheet-rolltemplate-attacks, .sheet-rolltemplates-spells { --charsheet_background: url("your path here"); --charsheet_hdr_background: url("your path here"); --titles_background: url("your path here"); }

Yeah, I probably should have said I'm not too savvy on css ... thanks Vince, your suggested worked perfectly. Cheers!

Eric said: Yeah, I probably should have said I'm not too savvy on css ... lol Me neither. ;-)