Property Name Overlay in On-Page Editing mode

In On-Page Editing mode, Episerver will create a blue border around all editable properties. This feature is very useful. However, if you have a lot of properties on the page, it may be challenging to locate the correct property, and editors may be using All Properties mode more often than On-Page Editing.

Five years ago, Ben McKernan wrote a blog post on how to display a property name when a user hovers the overlay: https://world.episerver.com/blogs/Ben-McKernan/Dates/2013/9/Adding-extra-information-to-the-property-overlay/

Implementation details have changed since 2013. The code no longer works with the latest version of Episerver, which is 11.9.3.0 (at the time of writing this blog post). Besides, we wanted Property Name to always be visible, not only when a user hovers the overlay.

Therefore, here's a modified version that we're using.

css:

.Sleek .epi-overlay-item-over .epi-overlay-item-info {
    float: right;
    font-size: 0.6875rem;
    left: 1px;
    line-height: 18px;
    min-height: 18px;
    position: relative;
    top: -18px;
    visibility: visible !important;
}

Module.config:

<?xml version="1.0" encoding="utf-8"?>
<module>
    <clientResources>
        <add name="epi-cms.widgets.base"
             path="path_to_your_css.css"
             resourceType="Style"/>
    </clientResources>
</module>

And, here’s how it looks in On-Page Editing mode.

Before:

Episerver - On-page editing

After:

Episerver on-page editing with property overlay

comments powered by Disqus