Sorry for the duplicate thread - I have no idea where I posted the last time. I have updated my css overwrite for the page toolbar and wanted to share it. Even without css knowledge you can easily play width the width, height values under #page-toolbar and #page-toolbar .availablepage. The first defines the whole toolbar, the second each individual item. You require A css overwrite plugin like stylebot for chrome ( <a href="https://chrome.google.com/webstore/detail/stylebot" rel="nofollow">https://chrome.google.com/webstore/detail/stylebot</a>... ) any other will do. How to? Install plugin Open plugin on roll 20 inside of your campaign Open edit css copy paste save Updates 19.09.2015 11:54 - Added hover to expand the page name and wrap it and changed positioning of text to work with the activepage and full width. Preview css #page-toolbar {
height: 89%;
width: 83%;
}
#page-toolbar .handle {
position: absolute;
right: 40px;
}
#page-toolbar .container,#page-toolbar .pages {
height: 100%;
}
#page-toolbar .availablepage {
float: left;
width: 50px;
height: 50px;
color: black;
margin: 5px;
padding: 0px;
}
#page-toolbar .availablepage img {
width: 100%;
height: 100%;
margin: 0px;
}
#page-toolbar .availablepage span {
font-size: 10px;
font-weight: bold;
color: black;
text-shadow: 0px 0px 10px white;
background: white;
height: 10px;
line-height: 9px;
margin: 0;
padding: 0;
width: 49px;
display: block;
top: 0px;
right: 0px;
left: 0px;
z-index: 99999;
text-align: center;
}
#page-toolbar .availablepage.activepage span {
font-size: 10px;
font-weight: bold;
color: black;
text-shadow: 0px 0px 10px white;
background: white;
height: 10px;
line-height: 9px;
margin: 0;
padding: 0;
width: 50px;
margin-left: 5px;
display: block;
top: 0px;
right: 0px;
left: 0px;
z-index: 99999;
text-align: center;
}
#page-toolbar .availablepage span:hover {
height: 100%;
white-space: normal;
word-wrap: break-all;
}
#page-toolbar .availablepage.activepage span:hover {
margin-top:4px;
}
