Nuking SharePoint Styles For Layout Page Applications
SharePonit layout apps (as I call them) are the missing link in most developer’s understanding of SharePoint and why it seems like it can be a pain in the butt as a development platform. As I’ve discussed previously, SharePoint development only deviates from regular ASP.NET development ever so slightly. A bit of creativity and ingenuity easily overcomes most hurdles.
As I’m doing development in the area, I’d like to help shed some light on the mystery of it all and show how developers and SharePoint can work together in harmony 🙂
One of the first steps to making happy with SharePoint when working with layout pages is to nuke the SharePoint CSS which creates weird padding around the main work area. I’m sure it may have some purpose, but it’s irrelevant for us at the moment.
Let’s take a look.
In the following screen, I’ve added a <div/> element with a one pixel, black border with width and height set to 100% (this is in IE7 and it looks about the same in FF2).
Notice the fat white padding on the top and the right. This is useless and ugly. Not only that, we didn’t acheive the 100% height that we’d like to. We can nuke it with some CSS:
|
1 2 3 4 5 6 7 8 |
<FONT face="Lucida Console"><FONT color=#555555>/*--- override WSS styles ---*/</FONT> <FONT color=#e87400>body { </FONT><FONT color=#0000ff>height: </FONT><FONT color=#e87400>100%; }</FONT> <FONT color=#e87400>.ms-formareaframe { </FONT><FONT color=#0000ff>padding: </FONT><FONT color=#e87400>2px 4px 4px 4px; </FONT><FONT color=#0000ff>background: </FONT><FONT color=#e87400>#fff; </FONT><FONT color=#0000ff>height:</FONT><FONT color=#e87400>100%; }</FONT> <FONT color=#e87400>.ms-propertysheet { </FONT><FONT color=#0000ff>height: </FONT><FONT color=#e87400>100%; }</FONT> <FONT color=#e87400>#onetidMainBodyPadding { </FONT><FONT color=#0000ff>height: </FONT><FONT color=#e87400>0px; }</FONT> <FONT color=#e87400>#onetidMainBodyPadding img { </FONT><FONT color=#0000ff>height: </FONT><FONT color=#e87400>0px; </FONT><FONT color=#0000ff>display: </FONT><FONT color=#ff0000>none</FONT><FONT color=#e87400>; }</FONT> <FONT color=#e87400>#onetidYPadding { </FONT><FONT color=#0000ff>width: </FONT><FONT color=#e87400>0px; }</FONT> <FONT color=#e87400>#onetidYPadding img { </FONT><FONT color=#0000ff>width: </FONT><FONT color=#e87400>0px; </FONT><FONT color=#0000ff>display: </FONT><FONT color=#ff0000>none</FONT><FONT color=#e87400>; }</FONT></FONT> |
And here’s the result:
Bingo! It looks kind of the same in FF2 (FF2 overdraws the 100% declaration and cuts off the bottom and right borders; this does require some CSS hackery to fix).
But the big picture is that now we have a blank slate with which to integrate with SharePoint. You get all of the benefits of SharePoint authentication, document management, profiling, and so on just by putting your ASP.NET application into SharePoint as a layout page. Development is easier than it would seem since the package, during development, only has to be deployed once. Otherwise, all of the files can be deployed to SharePoint using an automated XCOPY or manually. In some cases, for example working with ASPX page layout, the page can be accessed directly via file share (this is how I do all of my layout).
For more info on creating layout apps, check out the following articles on packaging SharePoint solutions:
- Ted Pattison on MSDN.
- An excellent post by Bill Baer.
- Evgeny Tugarev’s excellent 5 step guide.
