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

Custom sheet CSS not loading

July 22 (10 years ago)
Joe F.
Sheet Author
Hi, I've run across an issue while building some roll template CSS; it only started happening after the update today. I'm seeing these errors (http://i.imgur.com/HnoPULv.png) in the console. I have found a couple issues that seem related (one which claimed it was due to a Kaspersky product, I do not run any such product) and a couple about the black-loading-screen issue (which I do not have). 

This directory: https://www.dropbox.com/sh/28ycuvkwrs334ns/AABWtLC... has the CSS and HTML used to generate the error:

**To Reproduce**

Create a game, load the custom CSS and HTML at the location provided as the. Load in Chrome w/ no addons loaded (I only use Chrome for development, my FF is loaded with addons, so it's not a valid test environment). Notice the 3 errors and 2 warnings generated. I think the warnings are probably okay, but the errors seem to prevent the CSS from loading (based on the resources tab in chrome: http://i.imgur.com/3BTKIVW.png)



July 22 (10 years ago)
Loading custom CSS and HTML worked fine on our end. The errors you got are unrelated to the problem I believe. Can you link the custom HMTL/CSS you are using so I can test it on my end? You can private message me if you want with a link.
July 22 (10 years ago)
Joe F.
Sheet Author
Yes, it's linked in the OP (the dropbox link), Individual files:

css: https://www.dropbox.com/s/klyro0wxfq8v2nd/Stars_Wi...

html: https://www.dropbox.com/s/ncac0pog4gzfw2u/Stars_Wi...

I'm going to make a guess based on your name that you may be @RHallinan from the charsheet repo. If so, I can also give you a direct github link if that's preferable. The intent is to get this merged into the community sheet, eventually - so it's no issue with it being public.
July 22 (10 years ago)
I am @RHallinan. I must have completely read over the dropbox link. Sorry. The dropbox link is fine. I'll pull the files in and test them.
July 23 (10 years ago)
Everything seems to be working correctly on my end. Can you check if you are still having this issue?
July 24 (10 years ago)
Joe F.
Sheet Author
I tried re-uploading the sheets. No dice, the roll template still isn't getting styled, and I still get 3 errors in the console. That said, it occurs to me now that I have committed the dreaded X-Y problem. If you click on the roll icon for 'Physical Save' it should be using a roll template which is defined at the top of the .html, and styled at the bottom of the .css. In particular, it should look vaguely similar to: http://i.imgur.com/UPf3uew.png, mod size of window and inevitable bugs. I more or less copied the approach from the working Burning Wheel sheet; but it is definitely not loading those styles (or, at least, chrome inspector isn't finding them when I look at the style trace for those elements).
July 24 (10 years ago)
Riley D.
Roll20 Team
The roll templates being at the bottom shouldn't matter, since those are processed at the start of the game, not when you click the button.

I mean, are you saying that your Network log is telling you app.css is never loading? If so that would definitely be a major problem...
July 24 (10 years ago)
Joe F.
Sheet Author
app.css is loading, but it's not loading my styles for the roll templates. i.e., the app.css is styling the character sheet, but not the roll templates in the chat window.

Here's what I'm seeing. I am not opposed to this being PEBKAC on my end, but hopefully this elucidates the problem enough that we can figure out how badly I've screwed things up. :)

Styled sheet, unstyled roll template

http://i.imgur.com/5p0ixIa.png


App CSS loads:

http://i.imgur.com/gtKYdPO.png


But the styles don't apply:


http://i.imgur.com/Kq8NOSP.png



When I look at the resulting app.css, doing a text search in notepad, I can't find the 'swn' style anywhere. IDK if custom css gets loaded elsewhere, though:


http://i.imgur.com/DihNF5h.png








July 24 (10 years ago)
Riley D.
Roll20 Team
Yeah, if you look in the head tag after the fonts are loaded, you should see a style element, that's where your custom sheet CSS is, including roll template CSS. If you look through it maybe you will see it is something to do with our CSS sanitizer messing things up?

http://i.imgur.com/iS81l7I.jpg
July 24 (10 years ago)
Joe F.
Sheet Author
Okay, I see the tag now, and the sheet appears to have loaded correctly. Not sure whether the CSS Sanitizer would straight up not load the CSS or if it applies after the fact, but all the CSS appears to be there. Still not sure why it's not effecting the roll-template nodes. Will investigate.


Is there a doc showing what CSS would get sanitized and what wouldn't? Might be another path to debugging what's causing the problem. I'm guessing it doesn't like something in here (maybe on of the vendor specific bindings, or something).
July 24 (10 years ago)

Edited July 24 (10 years ago)
Joe F.
Sheet Author
I think I found the issue.

My assumption was that it would be possible to simply specify the container of my div, and not queue off the roll-template's class. That appears to be incorrect. I found this by reducing the roll-template css to the minimum possible value ("background-color: #FF9999"), and then trying to get that single garish style to take.There was / is an element of PEBKAC here, I had thought of this before, but when I went to try the same test, I entered the wrong class.

Basically, my bad. Now that I know I *have* to queue off the roll template class name and that I simply had the wrong one there, it seems to work fine. Thanks for the help, Ryan (EDIT: And Riley, failed my perception test there)! (and expect more SWN-related PRs soon).

July 24 (10 years ago)
Riley D.
Roll20 Team
No problem, glad you got it figured out! :-)