While working on the branding of your SharePoint site, you are likely to work heavily with web part zones. Usually, you can wrap web part zones in your custom DIVs to position them properly on your page. The end use may not ever know the content in the web part zones is a web part.
However, when your content authors log into the site to make changes on the page and interact with web parts in web part zones – the editing experience may look somethinng like this:
So, I wanted to share with you another useful tip from my new SharePoint Branding book related to providing usable experience to your content authors using your SharePoint sites. Let’s face it, if your content authors can’t edit the page properly – they’re likely to make mistakes and potentially break highly trafficed pages on the site.
Above, you’re looking at 3 web part zones with web parts in them partially overlapping with each other. The reason why those overlap is because markup of web part was styled to accomodate end-user rendering and not account for extra border and controls associated with adding and editing the web parts. Those controls, as you know, get rendered in edit mode only.
This is just an example with 3 web part zones. You can imagine that the home page of a medium complexity site will have many more zones and editing experience of such page will be next to impossible to work with.
One of the solutions you can use to address the problem is to add extra space between the web part zones only when the page is in the edit mode.
This can be achieved by using the class or group of classes which get rendered for web parts while those are in page edit mode.
Here is the markup rendered for the same zone in the view mode:
Here is what the page looks like for the zone in the edit zone:
From here you can see that MS-SPzone is the class which gets rendered when the page is in edit mode and should be used to make padding and margin adjustments for zones while those get rendered in the edit mode.
As soon as the page exits the edit mode, the class and additional markup will disapear and our users will not see any extra spacing and padding on the view version of the page.
Enjoy!
