CSS tricks for page toolbar

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 (https://chrome.google.com/webstore/detail/stylebot...) any other will do.

How to?

1. Install plugin
2. Open plugin on roll 20 inside of your campaign
3. Open edit css
4. copy paste
5. 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;
}

This needs to be the default.

Just fyi... you need to add !important to re-position the toolbar handle. The default positioning is set as a style element on the element itself instead of the css descriptor.

#page-toolbar .handle {
    position: absolute;
    right: 40px!important;
}

Awesome. Bookmarked.

Thanks for sharing Wandler.  I use the Stylish extension, but these should work as well.  
Here's a few that I use.  You may need to adjust to fit your setup.

Roll20 Game Settings (console view only)
Used for editing HTML, CSS, and Preview and hides everything else on the screen. URL's starting with: https://app.roll20.net/campaigns/campaignsettings/

body {
  background-color: #FAFAFA;
  margin-top: -1110px !important;
}
.globalfooter {
  display: none !important;
}
.btn-primary {
  margin-top: -80px !important;
}

Roll20 API Console (console view only)
Used for editing the API scripts and hides everything else. URL's starting with: https://app.roll20.net/campaigns/scripts/

body {
  background-color: #FAFAFA !important;
  margin-top: -290px !important;
}
.tab-content .toolbar {
  top: 580px !important;
  margin-top: -45px !important;
}
h3, .h3 {
  margin-top: -80px !important;
}
.tab-content .editor {
  top: 45px!important;
  height: 480px !important;
}
#apiconsole {
  height: 245px !important;
  margin-top:-50px !important;
}
.container {
  width: 90% !important;
  margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}
#consolepanel {
  height: 245px !important;
}
.ace_gutter .ace_layer {
  height: inherit !important;
}
.globalfooter {
  display: none !important;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  color: #F00 !important;
  border: 2px solid #F00 !important;
  border-bottom-color: rgba(0, 0, 0, 0) !important;
}
.nav-tabs>li {
  float: left !important;
  margin-bottom: 0px !important;
  margin-top: 15px !important;
  padding: 0px !important;
}
.nav>li>a {
  position: relative !important;
  display: inline !important;
  padding: 8px !important;
}

Thank you as well!

I don't suppose there is a Stylish method to improve the use of the preview pane, is there?

I wish. Half the time it doesn't work.

What do you mean with "preview pane"?

The preview pane for character sheets.

I've learned to work on chunks of code vs the entire sheet.  And using the Dev server instead of the main seems to help.

I always have another tab open with the game loaded which i refresh when i save some code, it's less than ideal but at least gives a 100% accurate reflection of how my code is looking (spoiler: clunky and simple... but does what it needs to ;) )

I do it the same way as Ziechael, as the preview sheet seems to be absolutely broken, I can't get half of my pretty complex shadowrun 5 sheet (~3.600 lines) to work. This is pretty annyoing and takes way more time. Also the editor is complete crap and not even the cursor positioning is right. my longer template call buttons already are about 5-6 characters off from the position the cursor displays it (which means i delete characters and they are 5 characters away from the cursor).

So what I do is have one screen with the character sheet open on the live game and edit on another screen in notepad++ with css or html settings enabled. Then I copy the chunk (usually some kind of logical html block like one ROW) back to the roll20 editor, save and refresh the live preview.

I was just wondering; the preview pane is a whole other topic, and I certainly didn't mean to derail this thread. 

I love the look and utility, and will have to see if its simple enough I can use it (laziness verus awesome)