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
This post has been closed. You can still view previous posts, but you can't post any new replies.

Fullscreen page bar

1428664594

Edited 1433787035
I know this could be posted as a suggestion but as it is not really dependent on any action of the developers I thought I wanted to share this with you guys as well. I have worked as web developer for some time and in my hobby time if stuff annoys me I feel the need to fix it. One of those things is the UI of the page bar on a PC. I do not know how others work when GMing their rounds but I love to have many many pages inside of a single campaign and the web interface at the moment annoys me a lot as the scrolling does not necessarily work properly if you drag the players marker from page 1 to page "54" and so you have to drag page by page and it makes me want to rage :) After having put some thought into it I thought: Why complain if you can simply fix the problem for yourself. So this is no rant but I simply I want to share the custom .css I use on my own to run campaigns on roll20. You don't need any .css knowledge to adapt the style if you want to use it, but if you have you can of course go even further - as I will do this maybe as well. Be aware, all the fixes I provide are of the style of a "hotfix". They require little work but they overwrite the official roll20 style and this means if the official style changes and stuff looks like it breaks its time to disable the custom .css again to see what changes are required. So first, how does the changes make your page bar look like? <a href="http://oi57.tinypic.com/2dba179.jpg" rel="nofollow">http://oi57.tinypic.com/2dba179.jpg</a> And how do you adapt it? First you require any browser plugin for custom .css. There are tons available and it does not matter which one you use. One available for chrome is: "Stylebot" <a href="https://chrome.google.com/webstore/detail/stylebot" rel="nofollow">https://chrome.google.com/webstore/detail/stylebot</a>... Once you have installed your custom css extension you usually have on button to open it. For Stylebot it is button labeled "css". The following is different for other extensions but overall you do the same steps: Launch the campaign. Custom .css is usually stored per domain and you want to be on app.roll20.net Click the button to open the extension (for stylebot "css") Click open stylebot Edit css Copy paste the custom css into the textbox Click save Enjoy your easier life as a GM (until they change the layout :) How to tweak this to your needs? If you want the toolbar to be only half a screen use 50% instead of 95%. If you want the text to be a bit larger change font-size:small to for example 1.1em and change the margin-bottom for availablepage as well (increase it if you increase the font-size). You do not really need to understand much .css to play with those values as most custom css editors have a live preview and you can simply tweak the numbers and see what happens. What breaks with this extension? During the drag and drop of the player button the player token is aligned wrongly but this does not really matter as it will work as expected! Drag and drop can become a little bit of a hassle to move a page to a specific position but it is still possible. You said you are a web developer, why do you do this so ugly? Fast. Cheap. Easy. That's why! I have no idea how the UI will change and it is not worth a minute to waste time with a proper change for something overwriting the official design. Good Games & Have fun! Custom:CSS #page-toolbar { height: 95%; } .availablepage { float: left; width: 80px; height: 80px; margin-bottom: 20px; } #page-toolbar .container { height: 100%; } #page-toolbar .pages .availablepage img.pagethumb { margin-left: auto; margin-right: auto; max-width: 80px; max-height: 80px; } #page-toolbar .pages .availablepage span { position: inherit; margin-top: 10px; font-size: small; } #page-toolbar .pages .availablepage .duplicate { background-color: #54C3E8; }
1428681515
Spren
Sheet Author
This is great. Definitely a needed addition. Thanks for taking the time to write it.
Thanks boss. Didn't know about style-bot and I appreciate your css. Believe it or not I had been opening developer tools and changing that manually.
This needs to be added to the repository of useful code!!
That's nice, but actually it also introduces some minor bugs and It would be way better to create a suggestion thread, s.t. it will be integrated into the original code because there is a lot of Javascript going on for the drag & drop code and therefore this is just a "hotfix" :)
1433923500
Gold
Forum Champion
Wandler said: That's nice, but actually it also introduces some minor bugs and It would be way better to create a suggestion thread, s.t. it will be integrated into the original code because there is a lot of Javascript going on for the drag & drop code and therefore this is just a "hotfix" :) Here is an existing Suggestion thread for a related idea. Please add your Comments and +1 vote if you agree, A Better Way To Organize Pages <a href="https://app.roll20.net/forum/post/1618045/a-better" rel="nofollow">https://app.roll20.net/forum/post/1618045/a-better</a>...
Thank you! I gave my upvote.