×

You're using an outdated browser

For a better experience, keep your browser up to date. Check here for the latest version.

Manual

Override the default Viewport Control Opener

Thomas Walker

Thomas Walker Last update: Oct 16, 2017

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:

2x2.11
We use cookies to create a secure and effective browsing experience for our website visitors and to understand how you use our site (i.e. Google Analytics). For more information: click here.
Ok