Prior to Surreal CMS 5.1, the Live Editor featured editable icons to identify content regions. Some users loved it, but in many cases these icons caused confusion and were thus removed by default in 5.1.

If you want them for your site, you can add them back by placing the following CSS in your website’s stylesheet:

.is-cms .editable::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    width: 40px;
    height: 40px;
    background: #eee;
    border-radius: 4px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik00OTEgMTUzNmw5MS05MS0yMzUtMjM1LTkxIDkxdjEwN2gxMjh2MTI4aDEwN3ptNTIzLTkyOHEwLTIyLTIyLTIyLTEwIDAtMTcgN2wtNTQyIDU0MnEtNyA3LTcgMTcgMCAyMiAyMiAyMiAxMCAwIDE3LTdsNTQyLTU0MnE3LTcgNy0xN3ptLTU0LTE5Mmw0MTYgNDE2LTgzMiA4MzJoLTQxNnYtNDE2em02ODMgOTZxMCA1My0zNyA5MGwtMTY2IDE2Ni00MTYtNDE2IDE2Ni0xNjVxMzYtMzggOTAtMzggNTMgMCA5MSAzOGwyMzUgMjM0cTM3IDM5IDM3IDkxeiIvPjwvc3ZnPg==);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: .2s all;
}

.is-cms .editable:hover::before {
    top: -44px;
}

.is-cms .editable.cms-focus::before {
    opacity: 0;
}

Here’s what they’ll look like in the editor: