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.
- I want you to create a new page so we're in the designer
- Right-click anywhere and click Inspect Element.
- 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.
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).
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.
- 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).
You can do that like this:
(so replace <divname> with your wrapper that the zone sits in)
(So this re-centers the background image into the dockzone)
So Example is