Take the components overlay into account in edit mode texts

Many templates of essentials features show some text that help editors configuring and using components in the channel manager. For example after adding an essentials banner component to a container no document to show is available yet. The component must be clicked to be configured.

The edit mode hints are generally added in an else branch:

<#elseif editMode>
  ...
</#if>

For the banner component the text is "Click to Edit Banner".

This text is not accurate anymore since the introduction of the two overlay modes of a channel. If the components overlay is not active a click will not work. There is an easy trick with css to show different texts if the overlay mode is active or not.

In the cms-request.css file (used for the channel manager only) add for example:

.configure-component-text:before {
    content: "Activate the Components Overlay to edit component properties.";
}

.hippo-show-components .configure-component-text:before {
    content: "Click to edit component properties.";
}

Then in the template, in the editMode part add:

<span class="configure-component-text"></span>

All templates that have text to help the editor can be updated in this way. For every specific situation we could add a more descriptive text than "Click to configure". The banner component text could be about linking the component to a document.