SharePoint Styles & Application.master Skinning Workaround – A thought in progress

So I don’t have this fully flushed out and wrapped up into a neat and tidy article with a How-To, but I will soon.

The Issue Summed Up (more resources: Shane, and Shane followup)

Master pages control the look and feel with SharePoint 2007 sites. One of the issues with this is application.master.  This master page controls the look and feel of SharePoint pages that have URLs with “_layouts“.  This is a good chunk of a SharePoint site.  Unlike the other master pages and customization techniques for a site, there is only one application.master file, and changing it will affect the look and feel of all of the SharePoint _layouts pages on the server. (Yikes!) So there is quite a considerable dilemma for skinning sites, since you won’t be able to skin all pages the same unless the site is the only one hosted on the server and skinning application.master to match is not a big deal.

When a Page is Rendered

There are now numerous CSS files in SharePoint, the main one being CORE.CSS, which seems to be the next generation of OWS.CSS.  You can also create your own CSS files, and create CSS files to go along with your custom master pages.   Crummy thing is how SharePoint pulls those CSS files.   In the rendered page, SharePoint references CORE.CSS last, even after your custom CSS files for your custom master page. (Side note, I am trying to figure out a way around this).  Since whatever is called last is what is applied to an element, the fact CORE.CSS is pulled last is quite a pain.  For any default SharePoint styles you want to override in your custom CSS, you are pretty much out of luck.

The Life Raft

As a part of the Master Page settings screen (Site Actions/Site Settings/Master page) where you can set a site to use a particular master page, there is also a CSS file setting.  You have a choice to inherit styles from the parent, use WSS default styles, or you can specify your own style sheet.  I am not sure why the option for WSS default is there yet, since no matter what option you choose, you will get some SharePoint CSS files pushed down to your site.

But we can specify our own CSS file, and in the rendered page, this CSS file is called after CORE.CSS.  Excellent news for overriding those default SharePoint styles.

Ok, so what does this have to do with Application.master?

While messing with all of this, I noticed that screens under _layouts were reflecting changes that were in my custom CSS file that was specified in the settings.   So technically, you can create the appearance of individually skinned application.master files through CSS. This isn’t the end all solution for the application.master page issue, but it is sure better than sitting on one design for application.master. Instead you can be proactive and apply customizations through CSS per site for _layouts pages.