Adding Visual Guides to Editable Regions


Previous versions of Surreal had small visual guides around each editable region. They looked something like this:

We removed these guides in 5.1 as they could sometimes be distracting and there was no way to turn them off. However, some users did prefer having them, so here’s an easy way to add them back to your sites — and even customize them to match your design!

In Your Stylesheet

Just add this block to 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;

This will add the guides shown above to the editor, but not on the live website. The nice thing about this approach is that, using pure CSS, you have complete control over how the editable guides appear. You can integrate them very closely with your website’s design if you like, or you can remove them entirely. :sunglasses:

Wandering Users