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

Using Codepen to edit sheets

I have started using codepen to create the layout of my new character sheet.  And while this is working mostly well, there are some elements that dont seem to translate over particularly well. I know I'm asking a question that has been answered somewhere in the forums somewhere in the past, but I cannot remember where, and couldnt find it when searching. There are a number of CSS files that r20 uses BASE.css and two others whose names i cannot recall.  I know that I have seen the full url for these documents to link to them using an external editor.  Also, I'd like to edit the document and have access to the pictos font for various navigational elements.  Is there a link i can use, or is that proprietary? Finally, is there a link to the javascript so things like sheet workers function properly for the navigation elements?  If not that's fine, I'm honestly doing this to build the general flow and layout.
1602669803

Edited 1602669829
GiGs
Pro
Sheet Author
API Scripter
I do not recommend using any codepen or any site external to roll20 for building sheets. There are too many elements internal to roll20 that wont be accounted for on those other sites. The best was is to use the custom sheet sandbox, and write your code in a good code editor, like VS Code or SublimeText. The sheet sandbox allows you to use roll20 the same way you are trying to use codepen: you can update your sheet instantly, and see changes you make almost as fast as you make them.  You dont need to refresh the campaign. 
I do appreciate the advice, but, for building layout, I don't at all care for the web editor r20 has, you cannot view the css and html at the same time, nor the preview for that matter.  And since with the web editor you cannot see sheetWorkers or the javascript properly anyways regardless, I feel I gain more from using it in codepen and then doing minor tweaks and edits after bringing it over. I used to have the links to the css files at one point, but I just misplaced them, it would make my life easier, but I can do without them.
1602678958

Edited 1602679622
Andreas J.
Forum Champion
Sheet Author
Translator
You're going to make thing unnecessarily hard for yourself with trying to do external testing, rather than use the Sheet Sandbox that is specifically made for this purpose. GiGs wasn't talking about the roll20 editor for custom games, Sheet sandbox is a separate thing. Use and external text editor like Sublime text or VSCode, and then use the Sheet Sandbox for testing the code, that's also how the Roll20 devs do it.
ᐰndreas J. said: You're going to make thing unnecessarily hard for yourself with trying to do external testing, rather than use the Sheet Sandbox that is specifically made for this purpose. GiGs wasn't talking about the roll20 editor for custom games, Sheet sandbox is a separate thing. Use and external text editor like Sublime text or VSCode, and then use the Sheet Sandbox for testing the code, that's also how the Roll20 devs do it. LOL, i typed out my message like 6 hours ago and thought I hit send.  Sigh, well at least i got some sleep before replying so I could correct my spelling. I didn't even know that was a thing; I thought the only editor was the custom game editor.  I will give that a shot and see how that works, if I dont need to refresh the page every time between, i am sure it will be a huge help.  I don't know either Sublime or VSCode (well, i know what they are, just never used em), I've always used Notepad++ Mostly, because its compact and It has an install that functions on Flash Drives which I LOOOVE.  I will check the other two out. Finally, I wanted to clarify, I understand that he made a suggestion and I seemed to turn it down out of hand; I didn't mean to come across as ungrateful, but the original reply wasn't answering the original question I had asked, which was about the css files, and didn't seem to address the reasons I had for wanting to use the external, real time code editor. I am ALWAYS happy and thankful to everyone here for the help they offer me, both staff and community members.  And to everyone reading this: ROLL20 ROCKS! Software, Staff and Community!
1602706722

Edited 1602706909
Andreas J.
Forum Champion
Sheet Author
Translator
but the original reply wasn't answering the original question I had asked, which was about the css files, and didn't seem to address the reasons I had for wanting to use the external, real time code editor. There exists some ancient attempt at it(from 5 years ago), and haven't really been much talk or attempts at recreating it since. And when the Sheet Sandbox was released early 2020, the need/interest for an environment like that decreased further. I glossed over that part of your question bc there isn't anything about it, and didn't realize it as important to you when GiGs didn't mention it either.
1602706871

Edited 1602707462
GiGs
Pro
Sheet Author
API Scripter
Toby said: Finally, I wanted to clarify, I understand that he made a suggestion and I seemed to turn it down out of hand; I didn't mean to come across as ungrateful, but the original reply wasn't answering the original question I had asked, which was about the css files, and didn't seem to address the reasons I had for wanting to use the external, real time code editor. I understand why it didnt look that way (especially if you were unaware of the Custom Sheet Sandbox), but just to clarify: I was answering your original question. It's just my answer was, "Don't do that, you wont be able to get it to work, and this other option that exists now actually does what you want." I didnt answer the css question specifically, because (a) I didnt know the answer, and (b) I was addressing the bigger question, the reason you wanted to get the CSS files: how to make roll20 sheets in a platform which allows you to see what you are doing as you do it. The custom sheet sandbox works great for that. It's not quite as live as Codepen (you still have to click a button and select a file to update changes every now and then), but its the best we can do and is a massive improvement over the old code editor.
Indeed, it is very much an improvement.