Skip to main content
Sign In |
  Help (new window)

Blogging about SharePoint

Go Search
Home
Blogging about SharePoint
Public Speaking
  

Michael Blumenthal's BlumenthalIT.NET > Blogging about SharePoint > Categories

2/10/2008

Right and Wrong ways to apply a CSS file to Brand a Publishing Site Collection

So here's something I ran into earlier this week. A friend of mine made a CSS file to brand a publishing site collection that we are working with. Quiz time: What's the right way to apply a custom css file to the site collection?

The first way we tried was to add a tag to our custom master page.

In the master page we were working with, it said:

                <Sharepoint:CssLink runat="server"/>

                <!--Styles used for positioning, font and spacing definitions-->

                <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/controls.css %>" runat="server"/>

                <SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/zz1_blue.css%>" runat="server"/>

 

So we added the following line after the above lines.

                <SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/~language/Core Styles/OurCustom.css%>" runat="server"/>

And that mostly worked. Except for the site actions menu. Why?

Well, when we view source on a resulting page, this is what I see:

<link rel="stylesheet" type="text/css" href="/Style%20Library/en-US/Core%20Styles/controls.css"/>

<link rel="stylesheet" type="text/css" href="/Style%20Library/zz1_blue.css"/>

<link rel="stylesheet" type="text/css" href="/Style%20Library/en-US/Core%20Styles/OurCustom.css"/>

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D"/>

 

Did you see that? The <Sharepoint:CssLink> tag was generating the <link> to core.css AFTER all the other css files, even though it came first in the master page. Sneaky!

So this is the WRONG way to apply our CSS.

The right way is … <drum roll /> to use the site settings web pages! On the page that lets you choose a .master page for your publishing site, you can specify one CSS file ( the "Alternate CSS URL").

(This picture is airbrushed because it came from an environment I am using for a client, and I need to protect client confidentiality.)

If you do this, then when you view source in the resulting pages on the site, the URL for the custom CSS file comes after core.css, and therefore overrides it and behaves as expected.

There are also programmatic, Feature-based ways to apply custom branding that are addressed in Pattison and Larson's WSS 3.0 book, "Inside Microsoft Windows SharePoint Services 3.0" in chapter 3, especially pages 97 and 98.

--Michael

 

Posted at 12:26 AM by Michael Blumenthal | Category: SharePoint Branding | Permalink | Email this Post | Comments (0)

11/15/2007

Branding and the Master Pages

I am lightly branding an extranet site. I'm making just two changes to the appearance – adding the word "Extranet" so it appears in the top center of the blue bar at the top of the page, and putting a coporate logo in place of the standard site icon (titlegraphic.gif) – and doing so in a way that site administrators can't change it via the standard web pages.

As part of this, I want to add this branding to all the administrative pages too. This is particularly important as the system administrators also admin a similar looking intranet site, and so this branding provides an important visual reminder to let them know which environment they are working in.

The question arises: How many master pages are there by default and what pages use them?

There are 6 master pages in the _layouts (12\Template\Layouts) directory:

  1. Application.master
  2. Dialog.master
  3. Layouts.master
  4. Pickerdialog.master
  5. Simple.master
  6. Sspadmin.master

There is one master page in the _Admin (12\Template\Admin) directory. These pages are for Central Admin.

As far as I can tell, no _layouts pages use Layouts.master. Here's a quick way to tell which _layouts or _admin pages use a master page. In this example, I show which _layouts pages use the application.master page.

  1. Open a command prompt
  2. CD to the Layouts directory (c:\program files\common files\Microsoft Shared\Web Server Extensions\12\Template\Layouts – though I suspect most of you reading this blog have this memorized by now…)
  3. Find /I "application.master" *.aspx | more
    1. This will list out all the apsx files and for those of them that use the application.master page, it will show the line where the page is used.

You can see from this screen shot that AccessDenied.aspx does NOT use application.master (it uses simple.master, though you can't see that here) while ACLINV.aspx, AddContentSource.ASPX, and AddContentTypeToList.ASPX do use application.master.

From this, I've determined that I want to brand application.master, simple.master, and sspadmin.master, as well as admin.master.

This will change most of the admin pages, but there can still be a few master pages – stored in the DB rather than on the filesystem - that will have to be adjusted via SharePoint Designer. One of these the default.master for the Central Admin site. NOTE however, that you DO NOT EDIT THE MASTER PAGE FOR AN SSP ADMIN SITE. If you customize from the site definition the master page for an SSP Admin site, the site will break.

I repeat, DO NOT CUSTOMIZE THE MASTER PAGE FOR AN SSP ADMIN SITE. If you do, the default.aspx page for that site will display an error message:" The base type 'Microsoft.Office.Server.Internal.UI.SharedServicesAdminDefaultPage' is not allowed for this page. The type is not registered as safe." You can undo your change by resetting to the site definition. I suppose you could add a SafeControl entry to mark the type as safe, but I haven't tried doing that, and is it really worth the effort?

--Michael

Posted at 8:37 AM by Michael Blumenthal | Category: SharePoint Branding | Permalink | Email this Post | Comments (7)