Position the 'Manage Content' and 'Edit Menu' Buttons in the Experience Manager

Introduction

Goal

Position the Manage content and Edit menu buttons close to the related content or menu.

Background

When a channel is previewed in the CMS, a Manage content button can be rendered next to each document. When a channel is edited, an Edit menu button can be rendered next to each menu. To help a user identify which buttons opens what, the position of the buttons can be changed.

Position the Buttons

The HTML for each button consists of an 'a' tag with the class 'hst-fab'. The button floats, and has absolute position with top=0 and right=0. This means that by default, it will be rendered in the top-right corner of the first enclosing element that has the CSS property 'position' set.

The easiest way to render the button in the correct place (e.g. right of the title of your document) is to add the CSS property 'position: relative' to the element around the Freemarker tag. If necessary, override the 'top' and 'right'properties of the CSS class 'hst-fab' to tweak the position of the button.

The following example tweaks the position of an Manage content button. The position of Edit menu buttons can be tweaked the same way.

Markup Example

<div class="title">
  <@hst.manageContent hippobean=document />
  ${document.title?html}
</div>

CSS Example

.title {
  position: relative;
}
.title a.hst-fab {
  top: 10px;
  right: 10px;
}

This example will render the Manage content button 10 pixels away from the top-right corner of the div with the 'title' class.

Known Limitation

The buttons are shown using an overlay that is imposed on the site page that is shown. The buttons are not inserted in the DOM of the site page, so the layout of the site is not distorted by them. This approach has a limitation though. When the button is displayed for a document that can move in the site page, the button does not move together with that document. This is the case when the document is shown inside a scrollable area of a page. Or for example when an element of the page is moved by some JavaScript function, say in a carousel of banners.