Sitefinity has 2 "edit modes" (Overlay & Classic) that can be used to edit pages:
The "Overlay" edit mode grays-out areas of the page that cannot be altered; while the "Classic" edit mode displays the unmodified page. "Classic" gives a better representation of what the page actually looks like, while "Overlay" makes it easier to see what parts of the page you can alter. Both edit modes have advantages & disadvantages.
However, the "Overlay" edit mode can sometimes be fickle due to the CSS magic being applied. While using this mode I was having problems with the entire web page going "gray" and being unable to alter anything.
The Solution
To make use of the "Overlay" edit mode you cannot have ANYTHING placed inside your <asp:contentplaceholder> tags. I had the following control tag placed in my master template:
<asp:contentplaceholder id="MainContent" runat="server">
</asp:contentplaceholder>
This will break the "Overlay" edit mode. Why? Because there is white-space inside the <asp:contentplaceholder> tag. Instead use the following:
<asp:contentplaceholder id="MainContent" runat="server" />
Now the tag is self-enclosed and truly empty. You aren't done yet though, the <asp:contentplaceholder> tags must also be empty from a Sitefinity Template perspective. Sitefinity will let you drag & drop controls directly onto your template. However, once you populate those placeholders with controls, the "Overlay" edit mode will break from a page perspective.
There are 2 ways to work around this:
- Don't alter your templates using Sitefinity. If you need to place controls onto your templates, alter the master template file and create the control tag outside of a placeholder. This is what I'm currently doing with Goondocks.
- Add extra <asp:contentplaceholder> tags to your master template file and only populate those tags via the Sitefinity template editor. This means you will have "template content placeholders" and "page content placeholders". Once you populate an <asp:contentplaceholder> tag at a template-level, it will become unavailable at a page-level.
Or you can simply not make use "Overlay" edit mode and instead only make use of the "Classic" edit mode. None of the problems described here exist when using the "Classic" edit mode.