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

CSS Makeover for Default Template

1547869152

Edited 1547869508
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I've often pushed the technique of Chat Menus and Note Tokens . But not all sheets have roll templates suitable for efficient display. The big pink buttons of the default template can take up an awful lot of real estate, and it's not well-suited for big blocks of text.&nbsp; Therefore I have created this Stylus template. For those who are not familiar with Stylus, it is a browser extension that re-interprets the style of a web page on-the-fly. Here is an example of a typical default template with a number of buttons: Here is the same roll template with the Stylus CSS code activated: Here is the Stylus code that made the change: .textchatcontainer a[href^="~"] { &nbsp; &nbsp; background-color: transparent; &nbsp; &nbsp; padding: 0px; &nbsp; &nbsp; color: #ce0f69; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; border: none; } .sheet-rolltemplate-default td:first-child { &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; text-align: right; &nbsp; &nbsp; min-width: 1px; &nbsp; &nbsp; padding-right: 5px; } The first section eliminates the button and it's padding, formatting it like a typical text link. This gives you a lot more buttons in a lot less space and makes them flow cleanly in-line. The second section gives maximum space to the lefthand column if not label is present in the first column. This is for making a notes token, where you might have a lot of text to display and don't want a big empty lefthand column. Here is the macro code that produced the template. Note that for the text to take up the maximum space, don't use a title, just the equals sign: &amp;{template:default} {{name=Modified Default Template}}{{=This is an image: [image](<a href="http://kacurtis.com/FHB_COVER.jpg" rel="nofollow">http://kacurtis.com/FHB_COVER.jpg</a>) This is an in-line [button](~Result) that just looks like a simple text link **Here is a list of buttons** [button 1](~Result) [button 2](~Result) [button 3](~Result) [button 4](~Result) }} Some things to remember: 1) Use Stylus, not Stylish. The latter has had some sever privacy problems. 2) This will only change the display on your local computer. It's a solution intended for a single user. If you want all your players to see a modified roll template, you will need to change the definition in the css for the sheet. I'm not even sure if you can change the default definition this way, or just the sheet dependent templates. 3)&nbsp; If anyone can break this or suggest improvements, let me know . I'd like to post this in the Stupid Tricks thread. Normally I don't like Stylus tips in there, but this directly improves many of the tricks I've posted in there. However, I'd like to refine it here, rather than clutter up that thread with non-tip chatter. Image is by Keith Curtis, from the cover for Fantasy Hero Battlegrounds (c) Hero Games
1547880683
GiGs
Pro
Sheet Author
API Scripter
That looks great. I like having the button appearance (shaded background, in a box) that the default template gives, but you're right it is wasteful of space. Does your template tweak do anything with the odd behaviour of columns (when you have {{something=else}} )? With the default template, it's unpredictable exactly how the two columns will be divided, it's definitely not even width and seems a bit too much skewed to the right.
1547916395

Edited 1558629479
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Edited You might be able to tweak this by setting a fixed column width or max column width in the&nbsp; first-child&nbsp; definition, but my results always had some unforeseen drawback. You can also try messing with the table defaults for the whole template with the&nbsp; .sheet-rolltemplate-default td&nbsp; tag. But again, my results were not what I wanted.&nbsp; I did add some code to tweak the header display. The color can be changed to anything you want, and the header text is bold and the box smaller. Not all the tags in there are necessary (like the font definition), but I kept them in in case anyone wanted to play with that. /*Re-styles buttons into text links*/ .textchatcontainer a[href^="~"] { background-color: transparent; padding: 0px; color: #ce0f69; display: inline-block; border: none; } /*Reduces Row Height*/ .sheet-rolltemplate-default td { padding: 1px; line-height: 1.4em; vertical-align: top; } /*Enlarges Righthand Column when possible*/ .sheet-rolltemplate-default td:first-child { font-weight: bold; text-align: right; min-width: 1px; padding-right: 5px; } /*Recolors Header*/ .sheet-rolltemplate-default caption { background-color: #333; color: #eee; font-family: "Helvetica Neue",Helvetica,sans-serif; font-size: 1.1em; padding: 1px; font-weight: bold; }