Customizing the Sitefinity Page Editor

Polish…that’s what this post is about.  Styles that work on the front end (live) do not necessarily make for an awesome editing experience for your content designers.

Right now since javascript is not allowed in the designer, we’re going to get a little fancy with some CSS.  So get out your trusty firebug and follow along with me.

1. I want you to create a new page so we’re in the designer
2. Right-click anywhere and click Inspect Element.
3. Now scroll to the body tag

Notice that the body tag has some classes defined on it?  These are what you’re going to use to target your styles to ONLY the designer.  Essentially you’ll be overriding your live styles with more designer friendly ones.

Layout Mode

So in the above example we have a DIV on the page, and that div is set to width 100%.  However since #main-wrapper is a CHILD of our body tag (what content isn’t really), then when we specify the special editor classes before it, those styles will override our inital width: 100% and instead change it to have a fixed 500px width (maybe that works better for your editors).

Widget Mode

We’ll use the same example as above for widget mode

Targeting Both Modes

So very very very easy to do…as long as you prefix your style with one of the above edit “modes” the style will only appear in the page editor.

Note:

• There is no codeless way to have a designer-only css file, there is a PITS issue here for you to please vote on.
• A good reason for doing this is to resize the default layout zone size in certain sections.  So if you have a section where you want a user to drop a content block widget (page title for example) you’ll probably want to shrink the zone so a 30px high title doesn’t take up 78px (default zone size).