Is there a r20 CSS template or sheet for reference? I am confused by what I can and cannot style with classes and IDs and by what is automatically styled behind the scenes.
Generally, I can style elements using the editor, but not classes or IDs.
I can't find a general r20 CSS reference - the CSS Wizardy doc is too narrowly focused by topic to help me understand the big picture.
Any links or tips are appreciated.
Are you wanting to style a character sheet and roll templates, or the roll20 editor? Sheet's and roll templates do not use id's and any classes you create should start with "sheet-". (https://wiki.roll20.net/Building_Character_Sheets#CSS_Styling) Hope this helps.
Thanks, Vince - I started there. I'll go capture a more specific instance of what I mean. I am using the editor under game settings.
One example that comes to mind: the document you reference cites a 2colrow and a 3colrow class selector. Does that live somewhere I can see? When I try to style .col width, for example, in the game settings editor, nothing seems to happen in the preview. Also wondering if I can do things like call in webfonts (as .css rather than .js).
I don't believe there's a wiki reference (on my phone currently...) although I know they've been used in various sheets on roll20 since sheets were added 4-5 years ago. I'm guessing that if you add "sheet-2colrow" to an element, you should be able to style it. I recommend just creating your own classes for layout/design, that way there's no guessing. ;-) AFAIK, webfonts are not available. Also, js/sheetworkers cannot effect the DOM on roll20. ;-(
Word. Thank you! Will do.
Vince said:
...I recommend just creating your own classes for layout/design, that way there's no guessing. ;-)
Chad S. said:
One example that comes to mind: the document you reference cites a 2colrow and a 3colrow class selector. Does that live somewhere I can see? When I try to style .col width, for example, in the game settings editor, nothing seems to happen in the preview.
Roll20 automatically adds .sheet- to the start of all class names. So if you have in your character sheet, class="col", in your CSS, you target that with .sheet-col not .col
By the way, the preview isn't always reliable. If your sheet gets complex, you cant trust the view there and have to load the campaign.
G G said:
Chad S. said:
One example that comes to mind: the document you reference cites a 2colrow and a 3colrow class selector. Does that live somewhere I can see? When I try to style .col width, for example, in the game settings editor, nothing seems to happen in the preview.
Roll20 automatically adds .sheet- to the start of all class names. So if you have in your character sheet, class="col", in your CSS, you target that with .sheet-col not .col
By the way, the preview isn't always reliable. If your sheet gets complex, you cant trust the view there and have to load the campaign.
True, although it has gotten a lot more reliable. I use it for quite a bit of stuff before I load the campaign to reduce the number of times I need to load.
Finderski, I'm glad you said that. I looked at the big sheet I was working on a few months back, and the preview does show up now. It was completely blank for the full year I was working on it. I wonder what changed, but I'm happy it's usable now.
Greetings!
The other authors have provided useful guidance so I'll just comment on templates. :) There is a simple example on the repo called kitchensink which contains the bare basics example of a sheet. I have started creating my own personal template for Roll20 sheets. If this would be helpful let me know. I will expand on it and add more comments so its useful to other sheet authors.
Okay - thank for the clarifications, G G & Finderski. I got thrown on the .sheet prefix as I found it worked for some elements, but seemed unnecessary for others. I'll try it consistently now and go from there.
That'd be rad, Cassie. I did check out the kitchensink sheet, but the .css there didn't seem to use the .sheet prefix on elements. I appreciate the share of your template, as well - will fork.
Cassie said:
Greetings!
The other authors have provided useful guidance so I'll just comment on templates. :) There is a simple example on the repo called kitchensink which contains the bare basics example of a sheet. I have started creating my own personal template for Roll20 sheets. If this would be helpful let me know. I will expand on it and add more comments so its useful to the sheet authors.
Thanks,
Cassie
Chad S. said:
That'd be rad, Cassie. I did check out the kitchensink sheet, but the .css there didn't seem to use the .sheet prefix on elements.
To be clear: you don't need to use sheet- in the html (and in fact, you shouldn't, because roll20 will add it anyway). But you do always need to use it in the css.
You dont use it on bare elements like p or div. It's on named classes where it needs to be used.
G G said:
To be clear: you don't need to use sheet- in the html (and in fact, you shouldn't, because roll20 will add it anyway). But you do always need to use it in the css.
You dont use it on bare elements like p or div. It's on named classes where it needs to be used.
That's a really good tip that we should document somewhere. I'll look over adding it to the wiki.