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

Alternative Layout for Chat Menu Buttons

I'm currently running a D&D 4th Edititon game where the players powers are displayed as big pink buttons in the default template in the chat pane (API Buttons, Command Buttons, Chat Menu Buttons, not sure what the correct term is, but I think you know what I mean), the buttons link to the Ability macros on the character sheet so players don't have to constantly open and close the character sheet to access their powers.  It works well. The problem for me is that my eyesight isn't good so the chat text is enlarged so I can read the normal chat, but as the buttons seem to be displayed in a larger font with a lot of wasted space, a list of 3 or 4 buttons will take up the whole chat pane.  I know I have seen an alternative to the standard template where the 'buttons' were just listed as text rather than with the bright pink background (I seem to remember it being either pink or purple text on a white background, but my memory my be wrong), however it was before I upgraded to Pro and I wasn't sure it was useable with a free of Plus account, now my Googlefu hasn't been good enough to find it again, so I'm hoping someone can help. Also, while I may have upgraded to Pro, my knowledge of how to make it do things wasn't upgraded automatically so i have no idea of how i would make a custom template work even if someone provided me the code for it so hopefully someone can give me some help with that as well (with the help of a lot of videos and Google searches I have managed to install one API scipt to automatically number monsters tokens as i drag them onto the map, but that is the limit of my achievements so far).  I have also only just started coding, I've done an HTML course, but I've only just started the CSS course, so things like Stylus which I've seen mentioned to change the look of the screen, are also rather beyond me at the moment, not sure whether it would help with my problem, but I thought i'd mention it before someone suggested it.
1607883080

Edited 1607883109
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I'll see if I can find time to make an installation video for Stylus; it really is the solution to your problem. I know you've cautioned against recommending it, but it literally requires no coding experience of any kind. It can be installed by clicking links, including the specific styles you need. If you are interested, I can look into creating the styles you need for the 4e roll templates. It shouldn't be too difficult. It's at least an order of magnitude simpler than trying to redefine a roll template on a custom implementation of a 4e sheet.
I don't code at all, and I only have basic knowledge of HTML and pretty much zero CSS, and I still didn't find it hard to use Stylus. Mind you, I was simply installing Stylus styles others had developed and then tweaking them as needed, but still. 
If Stylus is the best option then Stylus is what I will have to learn.  I rather got the impression that you need to know how to use CSS to style the page using it, but if there are ready done options or something like that I can use then I'll see what I can sort out.
1607891435

Edited 1607891518
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
If you are using the Roll20 default roll template, then there is a pre-built solution: Show Off Your Style 2: The Stylening  includes the installation instructions for the extension itself Default Roll Template Enhancement  describes the style and gives the code Install  will install the code with just clicking links if you don't want to modify anything (you still have to install the extension first.) If your character sheet uses custom roll templates, the style above may or may not fix the buttons. If it doesn't, post the name of the sheet you are using, and I or someone else can probably fix something up.
That could well be what I remembered seeing previously, the name is certainly familier. I'm just using the standard D&D 4th Edition Character Sheets and using the Default Template as i tend to write my own macros in the Abilities options I dont' even know if the sheet has its own template, I've never seen one. I'll give it a try tomorrow and see how i get on.
1607897036
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
If you are using the default template, that should do it for you. Give a post if you run into issues.
1607911042
Oosh
Sheet Author
API Scripter
If it makes you feel better, I had zero training or knowledge in HTML, or CSS when I installed Stylus, and I haven't ended the universe (yet).
Thank you so much Keithcurtis, that was the thread I was thinking off, even if i was wrong about what it was about.  After a bit of trial and error I've managed to install Stylus and copy and paste your code into it to get the more condenced version of the chat buttons in the default template. It may be a bit of an odd thing to say, but I love Roll20 for this, it really is giving me reasons to keep learning and trying new things.  If this hadn't come up, and people like yourself weren't there to give me advice I would never have tried adding a browser extention.  Roll20 may have its issues, but the community really makes it a great place to be.
1608136088
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Thanks Oenanthe! That means a lot. :) The style you installed has another feature you might find useful. When using the default template, if you don't include anything besides spaces before the = sign in one of the {{}} tags, it will make the left hand column as small as possible. This makes the template more useful for displaying a simple block of text.