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 .
×
May your rolls be merry + bright! 🎄
Create a free account

[Help] The CSS question of character sheets

Hi, I'm these days creating character sheets for some games (Expanding them, translating them, and Also I'm planning to introduce new ones) I'm basically a noob in the world of HTML and CSS, but, i've been asking for some help and some pros and it seems that the sheets in the github lack a fundamental CSS file (App.css and base.css I think) that's why i can't preview correctly any sheet in the browser) And I can't see properly the sheet until it's in Roll20 How can I preview them correctly? Or where can I find those rule-defining css files? (They aren't on the Github) It's very difficult for creating new sheets specially for newbies
1451338728
The Aaron
Roll20 Production Team
API Scripter
Moved to Character Sheets Forum. 
1451376926
vÍnce
Pro
Sheet Author
Hi Master Incomodo.  Many people code directly in the console. This seems to work better on the Dev BTW, at least if you are using the Preview tab.  You can use a "wrapper" that includes the other "roll20" css files.  This works OK.  I used to use this method in conjunction with Dreamweaver and previewing locally using a browser, but now I do most everything in notepad++ and the console view.  Here's a  dropbox link to the wrapper file and css I've used.  Hope you find it useful.  Cheers
I'm not skilled enough to do all in console yet, (My field is visual and programming refuses to be understandable in my head) so this will come very handy. I will give it a shot! Thanks a lot! :D If anyone else has some advice, extra files (or better some tutorials for creating sheets, I think I won't be the only one to thank you :) )
1451397858

Edited 1451397939
Alicia
Sheet Author
Like Vince said, I'll generally code everything using Notepad++ and then check the visual by pasting it into a campaign. Sometimes the preview will work, and if not then I'll save the code and open the campaign in a 2nd window to test things, which also has the advantage of making sure the auto-calc fields populate the way they should. If you use chrome (you can also do this in Firefox but I believe it requires a plugin. Don't use it so don't know for sure) you can go to the Elements log (shift+ctrl+I) and then directly manipulate the CSS and HTML right from there to make minor changes. You can also get to the console by right clicking around a field you want to change the look of and clicking "inspect element".
1451502314
chris b.
Pro
Sheet Author
API Scripter
yes in chrome or firefox, pull up the Developer window, (in chrome it's settings-> More Tools -> Developer Tools) then look for "Resources" or files, in chrome this will be on the top menu in the developer window, you may need to hit the >> to view the full menu. Resources will show you all the files that the browser has loaded. From there you can save the app.css and base.css, or copy / paste them, etc.