Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Advertisement Create a free account

Updated my Dark CSS Stylish theme for the 5e Shaped Sheet

1530305098

Edited 1534962006
So now that I've finally &nbsp;started using the Shaped Sheet, I finally got around to updating my dark design CSS theme for it. I'm pretty happy with how it looks now, though I'm sure I've probably missed some little elements here and there. Here's what it looks like: It comes in a variety of color options and can be installed in one click via the Stylus (not Stylish!) extension for Chrome or Firefox (or a similar extension) here -&nbsp; <a href="https://userstyles.org/styles/151596/roll20-dark-matter" rel="nofollow">https://userstyles.org/styles/151596/roll20-dark-matter</a> I'd love to get some feedback on it. I'm not super happy with the roll templates in chat, like the critical effects showing on damage rolls, but I don't think I can do anything about those with just CSS. I'm guessing I need to change the HTML of the sheet itself and that's a big can of worms I'd rather not open.&nbsp;
1530322995
Kirsty
Pro
Sheet Author
This is just beautiful, Malachi. Job well done!
1530341490

Edited 1530341876
Snow
Pro
I feel like you undersold a critical feature of this, huge map pulldown; 3 rows, vertical scrolling &lt;3 &lt;3 &lt;3 Looks pretty good with the "5th edition (community contributed)" sheets as well. I did notice within a character sheet, on the "Attributes &amp; Abilities" tab if you add an "Abilities" to make macros or token actions the additional UI elements didn't get restyled. Doesn't change a whole lot on already dark sheets for "Shadowrun 5th edition (advanced)" or "The Sprawl" but everything looks better with the rest of the interface all dark and dystopian looking.
Old post, I know. But I certainly would love to make the actual text a colour that's a little easier to read! An already darkish grey that has a darker grey background, on the background of black, makes me kind of squint at the text in the chat box. I tried to modify it, but I really don't know how to program this. What exactly in the edit panel, with all this code business, determines the colour for text in the right side-bar and on character sheets, handouts etc?
1534949447
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I'm not going to comment on the CSS code, since that's a pretty time-consuming task better answered by Malachi, but I will chime in to add that Stylish has recently been found to have some pretty severe privacy problems. Currently Google/Chrome recommend against using it. There is a virtually identical extension called Stylus that eliminates these concerns. If you intend on using this excellent offering, I would recommend using Stylus to implement it.
1534961980
Stavica said: Old post, I know. But I certainly would love to make the actual text a colour that's a little easier to read! An already darkish grey that has a darker grey background, on the background of black, makes me kind of squint at the text in the chat box. I tried to modify it, but I really don't know how to program this. What exactly in the edit panel, with all this code business, determines the colour for text in the right side-bar and on character sheets, handouts etc? It depends on which sheet you're using. A way to find the code you need to edit is to use your browser's Inspect tools. Right-click on the element you want to change and select "Inspect Element" or hit F12 on Chrome or Firefox and it'll bring up the dev tools. You can then see the HTML that makes up the page, as well as the CSS that modifies each element. You might need to search around on a few lines to find what you need. But for the text in the chat, for example, just right-click on the text and Inspect Element, it'll bring up the CSS which shows the color is set to #666. That's the line of code you need to find in my theme's CSS and change. For the Shaped Sheet, the line for the chat text color is ".sheet-rolltemplate-5e-shaped .sheet-rt-content{ #666; }". keithcurtis said: I'm not going to comment on the CSS code, since that's a pretty time-consuming task better answered by Malachi, but I will chime in to add that Stylish has recently been found to have some pretty severe privacy problems. Currently Google/Chrome recommend against using it. There is a virtually identical extension called Stylus that eliminates these concerns. If you intend on using this excellent offering, I would recommend using Stylus to implement it. Yeah, I use Stylus myself now and recommend people to use that one. I'll update the original post for that as well.