SubscribeAdapting Stylesheets For Partial Content Editing
On many sites, including LiveWorks!, the layout expects that the main content will be included within a particular DIV structure. For example, LiveWorks! sets the background color for the body to a light green and the div#content element to have a white background - expecting that all the content is in the div#content element. This renders fine on the actual web site, but causes problems when editing entries because only the actual entry content is loaded into the editor - not the surrounding content div.
Fortunately, there's a simple way to work around this, that doesn't require you to create a special editing version of your stylesheet or forego styles when editing. First, add an id to your body tag: <body id="body">, since this ID won't be present in the editor any styles you apply to it will only apply to the actual site.
Next, adjust any styles that you want to only show on the website to use #body instead of just body. So for the background color on LiveWorks! we originally had:
body { background-color: #DBEEDD; }
and we change it to:
#body { background-color: #DBEEDD; }
This can work even if the style rules don't apply directly to the body tag. For instance if we wanted to make H1 tags blue on the web site but not in the editor (if you'll excuse the contrived example), we'd start off with the rule:
h1 { color: blue; }
and change it to:
#body h1 { color: blue; }
Then the rule only applies to headings that are descendants of a tag with id="body" so it always applies on the web site, but never in the editor.