This is the documentation for an older version of Scroll Viewport. Here you can view the most up-to-date version of the Scroll Viewport documentation.

Override the default Viewport Control Opener

SINCE 2.0

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.

Example

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>
</button>

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: