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 .
×
Create a free account

[HELP] Can't get rid of the default white background

December 12 (2 years ago)

Hi, since Roll20 added their new darkmode, they added two new CSS classes outside of the character sheet CSS that adds a white background to every single character sheet.

Here is a video showing the issue

The class is part of a form that the custom CSS can't reach, I've already tried to change the background color by adding this on my CSS :

.sheetform {    
background-color : transparent;
}

.sheet-darkmode {
background-color : transparent;
}

But nothing happens, obviously..

Any idea on how to get rid of that white background anyone ? :(

December 14 (2 years ago)

Edited December 14 (2 years ago)
(Felipe) Boku
Sheet Author

I'm having the same problem, trying to implement DarkMode to a character sheet and nothing seem to change the padding white background.


---------------


Edit: 
Don't ask me to explain, but something in the css was making the sheet unable to really change. Them i got into the Wiki and decided to look at the sheet implementation examples, and noticed that the Ironswornd - Starforged one had something that kept the sheet centered in its window. Decided to use the snippet and their .sheet-darkmode.

It just worked. Its been bothering me for a couple weeks now, and it was just like that. 

Link to the Wiki
https://wiki.roll20.net/Character_Sheet_Development/Dark_Mode#Theme_Switch

And the code snippet i imported from them

.charsheet {
  width: 750px !important;
  margin: 0 auto !important;
  padding: 5px;
}
.sheet-darkmode {
  background: #1f1f1f;
  color: #c0c0c0;
}
.sheet-darkmode .sheetform {
  background-color: #1f1f1f;
}
December 14 (2 years ago)

Edited December 14 (2 years ago)

Sadly,

.sheet-darkmode {
background: #1f1f1f;
color: #c0c0c0;
}

.sheet-darkmode .sheetform {
background-color: #1f1f1f;
}

Doesn't change anything :/

December 14 (2 years ago)
GiGs
Pro
Sheet Author
API Scripter

That sounds terrible.

I'd suggest trying to increase the specificity. When inspecting the html, include a bunch of classes and elements that contain those. It might not work, but it's worth a try. Learn about specificity here: https://cybersphere.me/specificity-and-inheritance/