Using jQuery to alter application.master pages in SharePoint

Question

We use MOSS 2007 (SharePoint) for our intranet. Recently we were tasked with supporting the branding for multiple companies on our farm. We quickly realized that the application pages (produced by a modified application.master) can't serve up multiple branded templates (other than themes).

I think the right fix is to keep the default Microsoft branding on application pages (we were already working on this in dev - no modifications to files hosted on the server).

As a quick fix however, I was thinking that I might be able to use jQuery to replace one logo, a handful of nav images, and a few colors on the application pages. Basically going from Brand A to Brand B before the page is fully rendered.

My question is... how bad is this idea? What are the pitfalls associated with doing this? Given that it is only an interim solution, should I try it?

Answer 1

I think most of your problems can be solved with a good CSS file. This is better than javascript, in my experience, since it loads a lot faster. Keep in mind that SharePoint produces heavy pages (DOM wise), so jQuery takes a long time to get to $(document).ready, and even longer time to manipulate that over-sized DOM - on IE6 this can take several seconds, giving the same impression as a slow site or server.
I've done many customization to SharePoint using CSS: It may take a few smelly !importants, but the result is better than javascript.
Also, remember that you can set a per-site CSS file (on the same page you set the sub-site's master page) - this can be used instead of actually creating a master page for every brand.

Answer 2

To add to Kobi's answer, you can use a delegate control feature for deployment.

Place a user control under _controltemplates, such as:

<%@ Control Language="C#" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %>
<SharePoint:CssRegistration name="/_layouts/custom/app.css" runat="server"/>

Write the delegate control feature (here is elements.xml):

<?xml version="1.0" encoding="utf-8" ?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/"&gt;
 <Control ControlSrc="~/_ControlTemplates/CustomBranding.ascx"
                 Id="AdditionalPageHead" Sequence="1" />
</Elements>

Include custom CSS in _layouts/custom/app.css.