Removing Gray Space (Game Table Border)

Is there a way to remove the gray space (see screenshot) and have it black.  If I am correct its a background image embedded in the roll20 page source. However for purposes of streaming on twitch it would be nice to swap out the gray space for a pure black background.

Alexander said: If I am correct its a background image embedded in the roll20 page source. Correct. Is there a way to remove the gray space (see screenshot) and have it black. Yup, you can accomplish this by customizing the in-game CSS with the help of a third-party browser extension (e.g. Stylish): @-moz-document url-prefix("<a href="https://app.roll20.net/editor/" rel="nofollow">https://app.roll20.net/editor/</a>"), url-prefix("<a href="https://app.roll20dev.net/editor/" rel="nofollow">https://app.roll20dev.net/editor/</a>") { body { &nbsp; &nbsp; background-color: #000; &nbsp; &nbsp; background-image: none; } } After installing Stylish for Firefox or Chrome , save the code above as a New Style.

I do it a different way. &nbsp;Make a larger Page Size (such as 80x80) and put your Map content centered. This will not get rid of the grey background margins, but it will let you scroll the screen to focus on the centered content and have just empty background margins of whatever Page Color you choose. &nbsp;This method gives you better scrolling ability, in my experience, as you can really get the edges of your map centered on the screen.

Oh dear Silvyre. It looks like you've shown me one step down the rabbit hole. So I saw the Dark Theme Fix for Roll20 on Stylish. Great, but doesn't work for Shaped Sheet as Mark Lenser has his own colours, backgrounds, etc.&nbsp; So I started edited Dark Theme Fix on Stylish to try to override some of the code Mark had written. Unfortunately I only got so far with some success. I managed to change the main character sheets background from an image to a colour. However the NPCs character sheet background on Shaped Sheet will not change no matter how much I input&nbsp; .sheet-section-npc .sheet-npc-content-wrap { &nbsp; &nbsp; background: #333333; &nbsp; &nbsp; box-shadow: 0 0 1.5em #867453; &nbsp; &nbsp; font-size: 14px; &nbsp; &nbsp; margin-left: 2px; &nbsp; &nbsp; margin-right: 2px; &nbsp; &nbsp; padding: .2rem } The only way at the moment is to edit the sheet directly in CSS Game Settings. Which is not ideal if I ever do not feel like using Stylish.&nbsp; I also need a way to edit the content colour of a box model. Shaped Script leaving me with White Boxes is not cool. But far from anyone's fault.

Try applying the !important modifier for CSS: .sheet-section-npc .sheet-npc-content-wrap { &nbsp; &nbsp; background: #333333 !important; &nbsp; &nbsp; box-shadow: 0 0 1.5em #867453 !important; &nbsp; &nbsp; font-size: 14px !important; &nbsp; &nbsp; margin-left: 2px !important; &nbsp; &nbsp; margin-right: 2px !important; &nbsp; &nbsp; padding: .2rem !important; }

I will try it. I am testing out different colours from the CSS.&nbsp; Do I have to input&nbsp; .sheet-section-npc .sheet-npc-content-wrap { background: #333333 !important; box-shadow: 0 0 1.5em #867453 !important; font-size: 14px !important; margin-left: 2px !important; margin-right: 2px !important; padding: .2rem !important; } Or is&nbsp; .sheet-section-npc .sheet-npc-content-wrap { background: #333333 !important; } Enough?

Okay thanks Aaron that works . I have quite a bit of work in front of me if I want to mod the whole sheet to this theme. Maybe a side project. ;-)

The way CSS works is by using the most specific setting for any given element. What's probably happening is the Shaped Sheet's CSS is more specific than yours. Adding !important tells the browser to treat you property as more specific and thus override more specific rules... provided they aren't themselves !important.&nbsp; Start by adding it on a property that seems to not be picked up. You only need to add it when it doesn't work otherwise.&nbsp;

Seems to work. I imagine you're right about specifics.&nbsp; I've found a way to change every instance of #000 hex code in the CSS of Shaped Sheet. Yet adding !important to each of these is another matter. <a href="http://css-color-replace.orca-multimedia.de/" rel="nofollow">http://css-color-replace.orca-multimedia.de/</a> I'm just starting to attempt to find and fill in all the #000 boxes with #333. By rummaging around the code and just trying to get lucky. Do you know any easy way around this. I am not sure really where to start.

Are you modifying the file, or creating the styles in Stylish? &nbsp;Probably there's some tool that would extract all the styles and let you edit them... not sure what that would be though..

Phew.... This is the way I work with code. Do things, search, try things out *rub your back* because you realise your sitting in the most uncomfortable position and eventually you find... .sheet-wrap-box { background-color: #333333 !important; border: 1px solid #000; border-radius: 3px; padding: 2px }

There ya go!

Well that was a good one... but there's still other to find....&nbsp; I am submitting styles in Stylish. Because I want my players to have the ability to use the original script how Mark wrote it.&nbsp;

<a href="https://userstyles.org/styles/146048/shaped-sheet-" rel="nofollow">https://userstyles.org/styles/146048/shaped-sheet-</a>... Now I am finished. So I am getting my players to test it out now. Just wanted to say thank you to Sylvyre and The Aaron for the help.

Nice!