Customizing Editing Experience

Default Look and Feel

Score has a certain aesthetic to how a page looks in Editing mode. It's all driven by how components render themselves when in PageMode.IsPageEditorEditing as well as the metadata wrappers that Score puts around components that support nesting.

Let's look at two examples from our demo site:

Example 1. Carousel Panel

The editable fields of a datasource item are to the left and the panel content itself - the main placeholder of the carousel panel rendering - is to the right.

Example 2. Page Stripe

Same idea. Editable fields are on the left and the main area is pushed to the right.

This is not how these components look when then render in a Normal or Preview mode. Both will take full screen width for the panel content so the greenish area will be the 100% width of the component.

More Realestate to Editors

We are currently working on a feature with a code name Natural Editing that will help editors have (and help developers build) even more friendlier Page Editor experiences. It will be available in Score 1.4 but it doesn't mean you can't customizie the out-of-the-box editing experience today with Score 1.3. All you need is a little LESS/CSS magic.

Let's give our editors more real estate on the screen by moving the editable datasource fields above the main content area (the main component's placeholder) and give the placeholder a full width of the outer container. Since it's the editing experience we need to customize I will be doing my changes in the page_editor.less:

No Margin Metadata Wrappers

First thing, let's un-margin all metadata wrappers and make them smaller with the following LESS:

.score-pe.panel {
    margin: 0 0 0 0;

    .panel-heading {
        padding: 1px 0 1px 1px;

        .panel-title {
            font-size: small;
            padding: 3px;
        }
    }

    .panel-body {
        border-color: transparent;
        padding: 1px;
    }
}

This will render our carousel panel like this in editing mode:

It's still a side-by-side experience but the wrappers takes no extra horizontal space.

Full Width Content Area

The next change will be to re-position the editing of the fields over the panel's placeholder so that it could take as much horizontal space as the container can give it. Here's a LESS for the stripe:

.score-stripe > .score-structural {
    > .score-left {
        float: none;
        width: 100%;

        br {
            display: none;
        }

        .score-editImage {
            display: inline;
        }
    }

    > .score-right {
        float: none;
        width: 100%;
    }
}

Which will render the stripe like that:

And here's for the carousel panels. The carousel panels don't have an anchoring class in the editing view in SCORE Bootstrap UI 1.3 and there isn't a parent selector in CSS3 so I decided to walk down from the Sitecore's code (read more about chromes here) element. The reason I want the selector to be so specific is not to rearrange anything that's on the pannels 

code[hintname="Carousel Pane"] + .score-pe.panel > .panel-body > .score-structural,
.score-stripe > .score-structural {
   ...
}

This will make our carousel panels look like this:

Different look in editing mode with no modification to the renderings and with no effect on the actual component presentation on the site.