Small viewer display bar

Question

The viewer display bar at the bottom of my exported document is very thin and not very noticeable and the display logo is illegible as it's so small. How do I increase the height of this to make it more visible please?

Comments

Perfect, thanks so much for your quick response! Is there anyway of making the icons  bigger within the viewer display bar (zoom in/out etc)?

Answer 1

You can add your own CSS in the Resources section of the Export HTML5 with in5 dialog (in5 > Export HTML5 with in5...) to increase the size of the Viewer Display. For example, if you wanted to increase it from the default height of 40px to 100px, you would add the following CSS in the Resources section:

#viewer-options-bar{
 height:100px;
}

Comments

Perfect, thanks so much for your quick response! Is there anyway of making the icons  bigger within the viewer display bar (zoom in/out etc)?

---

Changing the size of the icons gets a little more complicated. You will likely need to adjust the settings in the following CSS to see what works best for you, but the following will increase the size of all of the icons and the space where they go:

#viewer-options
 { text-align:right; min-width:700px;
 }
.viewer-option-btn
 { cursor:pointer;display:inline-block;margin-right:50px;width:50px;padding:0;
 }

You can either add the above CSS to same resource (resource-1.css) or press the "+" button to add a second resource. Make sure to rename it "resource-2.css".