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

Hide the ENTIRE Avatar BAR(!) not just the picture, possible?

Hi there, I want to use roll20 to prep for my upcoming DM'ing of our offline group. I setup 2 accounts, 1 for me, 1 for the players. I intend to use a custom-case TV as a digital map on the table (instead of a blank map to draw on) using roll20. Setting up the maps etc is easy. I will have the GM view on my Laptop, and the party view of roll20 on the TV. However I would like to hide the Avatar-UI in the bottom left corner, and I don't mean the picture that you can set to "show names only". I want to hide the entire now blank bar (because I left both my name and the party name blank) also hiding the colored square. I googled and searched the roll20 forums, yet can't find anything of the sort. I just want to hide the empty bar and the colored square. Please help?
1699998817
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Hi wasted! This is entirely possible. You will need to install the Stylus browser extension. Here is a post describing the style; you can adjust it to hide and show any particular part of the interface. It's an old post, but I think the player area is still the same Div. Some of the other divs might need renaming, if you want to hide other parts. Hide Roll20 Interface  
Thanks i been looking for something like this for a while!
Thank you for the link. I got it to work, well everything except for the darkmode button. That kinda pisses me off xD Why are there two options anyway, 1 button right in the game space, the other one in the options where it belongs? So, how is that button named / how can I hide that with the stylus hide UI thingy? It would seem that I just have to type #darkmodebutton into the stylus thing, IF that extention is named like that. That does not apprear to be the name thouth.  Can anyone help?
Hi Wasted Before the UI redesign I had this in Stylus: .dark-mode-switch { display: none !important; } Just went back to older UI and toggled it and it works for me
1700578112
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I thought the dark mode button had been removed to sub menus. Are you using the old or new UI? It can certainly be set to not display, but it would be helpful to know which UI and exactly what is being hidden. A screen shot might help.
Thanks! that's awesome!!
1700855408

Edited 1700855997
Daniel S.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
I made a stylus style that does only this for myself, because it's quite annoying to have the mandatory names covering the screen. But sometimes you want to make them visible again real quick. I'm no coding wiz, and there might be something redundant or unnecessary in there, but this worked for me. Works with the new UI too. I think it frogs with the left toolbar some with the old UI, something to be aware of. If someone catches something problematic in there, feel free to correct me/my code. I think probably that .element.style is not necessary. .player .playername { background-color: rgb(0 0 0 / 0%); color: #ffffff00; } #playerzone .player { background-color: rgb(0 0 0 / 0%); color: #ffffff00; } .playercolor { background-color: rgb(0 0 0 / 0%); color: #ffffff00; } .element.style { background-color: rgba(91, 145, 151, 0); } .color_picker { background-color: rgb(0 0 0 / 0%) !important; color: #ffffff00 !important; } #floatingtoolbar { background-color: rgb(0 0 0 / 10%); } #floatingtoolbar li { color: #f0f8ff; border-bottom: none; background-color: rgba(0, 0, 0, .54); } #secondary-toolbar { background-color: rgba(255, 255, 255, 0) !important; }