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?
http://oi57.tinypic.com/2dba179.jpg
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" https://chrome.google.com/webstore/detail/stylebot...
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:
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
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?
http://oi57.tinypic.com/2dba179.jpg
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" https://chrome.google.com/webstore/detail/stylebot...
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;
}
