Skip to main content
Skip table of contents

Override the default Viewport Control Opener

By default, Scroll Viewport renders a a hamburger icon (the "Viewport Control Opener") that allows users with the appropriate permissions to open the Viewport Control. However, in some themes the control might look good. Therefore it is possible to simply override the Viewport Control Opener.

To do so, a theme developer can simply create his own icon/HTML element and mark it with an id of sp-viewport-control-opener.


The following example is taken from the Bootstrap theme.

By default, the Viewport Control Opener in the Bootstrap theme looked like this:

As you can see the visual appearance does not quite fit to the Bootstrap style, so we've added a button.

<button id="sp-viewport-control-opener" type="button" class="btn btn-default pull-right" style="margin: 8px -15px 0 30px;">
    <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>

The only thing to notice here, is id="sp-viewport-control-opener". When the viewport with this theme enabled is loaded in the viewport, there are two possible situations:

  1. the current user does have the permissions to access Confluence: Scroll Viewport hooks up an event handler on that element, that will open the Viewport Control on click.
  2. the current user does not have the permissions to access Confluence: Scroll Viewport simply removes the element. Therefore make sure the alignment of your page looks well too, when the element does not exist.

The result looks like that:

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.