Finding and Editing SharePoint Styles (Using the IE Dev Toolbar)

I just found a new way to use the Internet Explorer Dev Toolbar thanks to Renaud (aka Stramit). Oddly I had never seen the “select by click” option.

For those of you using the IE Dev Toolbar to figure out what classes/id’s are applied to elements in SharePoint you’ll by happy to know it’s much faster when you select the “Select element by click” option.

When this option is selected you can simply click on any element on the page and it’s properties will display. No need to drill down through a massive table structure.

This option is found under the “Find” menu of the Dev Toolbar. Thanks Renaud!

You can download the Internet Explorer Toolbar (beta) here.

SharePoint: Site Templates, Site Definitions and Themes Explained

SharePoint uses site definitions, site templates and themes for customization. While there are similarities in each, they are all very different and very powerful in their own right. Understanding each of these is key to customizing SharePoint.

SharePoint Themes

Difficult Level: Easy/Moderate

SharePoint themes are a collection of stylesheets and images which basically skin a site. While they do not control the layout they can be edited to customize the look and feel of a sites fonts, background colours, borders, links etc.

For example: If you wanted to change the border around a web part, or the title bar of a web part you would customize it via the theme.

By default there are several global stylesheets applied to all sites. This is true for both SharePoint Portal Server 2003 and Windows SharePoint Services. (Example: OWS.CSS, MENU.CSS and in Portal Server’s case SPS.CSS).

The global stylesheets are stored on the server in the following location
C:Program FilesCommon FilesMicrosoft Sharedweb server extensions60TEMPLATELAYOUTS1033STYLES

The rule of thumb is stay away from these files because if you change them every site created from there on out will have that customization.

Best practices would suggest that If you want to skin your site you should create your own theme which can then modify and apply.

Themes are stored on the server in the following location:
C:Program FilesCommon FilesMicrosoft Sharedweb server extensions60TEMPLATETHEMES

The master list of all themes available (SPTHEMES.XML) is located on the server in the following location:
C:Program FilesCommon FilesMicrosoft Sharedweb server extensions60TEMPLATELAYOUTS1033

The readers digest version of Theme creation and setup;
1) Duplicate an existing theme,
2) Add the theme to the SPTHEMES.XML file
3) Customize the classes in your new theme as desired
4) Apply the theme (via site settings – http://YOUR-SERVER/_layouts/1033/themeweb.aspx)

When customizing themes it is not always easy to know what class/id is applied to what element. Fortunately there are several javascripts available to help you; Todd Bleeker has a nice one freely available, you can download Todd Bleekers Style Finder here.

SharePoint Site Templates
Difficulty Level: Moderate

Site templates are an easy way to archive your entire site into a single file. This includes all pages, lists, libraries and contents.

A site template can have one of two possible extensions depending on how you created it, these two types are also very unique.

If you created your template from the browser it will have an STP extension and if you created it via FrontPage 2003’s backup it will have a .FWP extension.

Site templates created via the browser (.STP) are useful for users that make modifications to a site by creating custom content elements (doc libs and lists) and want to use that as a benchmark for all future sites. When used this way they are not unghosted.

Site template created via FrontPage 2003 (.FWP) however are extreme customizations and are meant to be unique and independent of the portal. FrontPage 2003 site templates are not controlled by a master definition which is the default for all SharePoint sites. If you create this type site template, the site is from there on out on it’s own.

This is commonly referred to as “unghosted”. This has been a major issue for people wishing to customize their SharePoint sites via FrontPage 2003. This issue is being addressed in the next version of SharePoint.

A site template by default is not available globally on the server the way a site definition is so if you have a template you do not want applied by anyone else this may be a good alternative. You can however make it available globally by placing it in the site template gallery.

Once you have created a SharePoint site you can wrap it up into a site template which is still ghosted from your browser by visiting:

http://YOUR-SERVER/_layouts/1033/webadmin.aspx

Alternatively you can do extreme customizations via FrontPage 2003 and then create an unghosted site template by using the Tools -> Server -> Backup WebSite

If you are intereseted in learning more about creating SharePoint sites with extreme customizations and wrapping them into site templates you can view my on-going WSS site creation tutorial.

Another great reference to help you better understand these is the MSDN article, an Introduction to Site Templates and definitions.

SharePoint Site Definitions

Difficulty Level: Advanced

Site Definitions are the master templates behind SharePoint sites. Site definitions are used to optimize performance within SharePoint. The way it optimizes performance is it uses a single set of files to create every site based on that definition. This minimizes the need to duplicate files and is commonly referred to as “Ghosted”.

By default when you create a site you are asked to pick a template, this template is actually the site definition for that type of site. There are several types of definitions (Blank Site, Team Site, Meeting Workspace etc).

Site definitions are a very powerful way of creating a fully customized (site definition) which can be applied to any new sites from there on out. While it is a template, it is not an unghosted template.

For Example:If you created 1000 sites based on a single customized site definition and the logo you added changes, you just update a single .aspx file with the new logo and all sites will reflect the changes. The opposite would be said for site templates. If you have 1000 site templates, they would all have to be updated individually.

The beauty of this method is that the site definition controls “all” sites using it. Think of it the way CSS works only at a larger scale. You can control 1000 sites all from a single set of files.

Site definitions are created much the same way themes are, you duplicate an existing one, add a reference to a master list and then modify it accordinly. Site definitions require an IIS reset to show up in your list.

Site Definitions are stored on the server in the following location:
C:Program FilesCommon FilesMicrosoft Sharedweb server extensions60TEMPLATE1033

The master list of site definitions is called the WEBTEMP.XML file. Unlike theme setup however you do not edit this master reference file, instead you make a copy of it, it later gets appended to the main WEBTEMP file.

For example: If you duplicated a site definition and renamed it to TEST, you would also duplicate the WEBTEMP.XML file and call it WEBTEMPTEST.XML

Inside the WEBTEMP file you would modify the settings you want to reflect the name of your site definition. You can also remove any extra references that are un-needed.

The WEBTEMP file is located on the server in the following location:

C:Program FilesCommon FilesMicrosoft Sharedweb server extensions60TEMPLATE1033XML

Each site definition contains an XML directory. Inside this directory there is an ONET.XML file. This file is of extreme importance as it controls the configuration of your definition. The ONET tells the definition what lists should be available, what columns/fields should be in the list, and things of that nature. You should be very careful when editing this file.


There are several great tutorials online for creating site definitions. I would recommend the following:

Heather Solomon’s Site Definition Primer

Heather Solomons Site Definition Reference

Supported and Unsupported Scenarios

Site Definitions – What they are, and why you need them (on DEV X)

Site Definitions – Google Search

Free Copies of Visual Studio 2005 at MSDN Launch Events in Canada

I have read this announcement a few times but I am still having trouble believeing my eyes.

From Mark Relph’s Weblog:

“From the blogs we have heard several questions regarding the distribution of software at the events. We know that the Developer and IT Pro communities are eager to get access to the final versions of the products and getting the software into your hands is a priority for us. The Launch Team is pleased to confirm that Special Edition copies of Visual Studio 2005 and SQL Server 2005 will be made available to everyone who attends the launch events. This is full functional “non-evaluation” software.”

Very cool!! Unfortunately I will be teaching a SharePoint course here in St. John’s on the day of the launch event in Halifax so I will be missing out on all the fun. If you are in any of the major Launch cities, make sure you check this event out. But don’t wait too long to sign up – many launch locations are already booked solid. See schedule here.

If you have installed a previous (beta) version of VS 2005

If you have installed a previous copy of Visual Studio 2005 I highly recommend reading Dan Fernandez’s blog on the automatic uninstall tool.

It’s highly recommended that you install the RTM version of Visual Studio 2005 on a clean machine.

But…but…we realize a lot of people have installed some pre-release version of Visual Studio 2005, and to that end, the setup team has created our “best effort” for uninstalling the product, which is the (also unsupported) Automatic uninstall tool.

A couple of notes on the uninstaller

Do not use this tool if you have installed SQL Server 2005 Workgroup Edition or higher (SQL Server 2005 Express is okay). Why? Because we don’t do ref counting on who is using the Framework and you can get into a situation where the uninstall tool will remove a pre-RTM version of the .NET Framework 2.0, but SQL Server 2005 Workgroup+ will still be installed on the machine. Because Workgroup edition uses managed code, you’ve now “hosed” your SQL 2005 Workgroup edition uninstall. Check the product readme for step-by-step instructions
Do not click “Cancel” when the Automatic uninstall tool is running. Depending on when you click Cancel, it can “hose” your machine uninstall.

Get the automatic uninstall tool here.

SharePoint Customization: Customizing The Quick Launch Bar

I have been in email conversation today with someone on SharePoint Portal Server 2003 customization. The conversation quickly turned to the limitations of SharePoint’s architecture in regards to a more friendly CSS based layout.

I decided rather than limiting the conversation to a single email I would create a blog post on it and share it with everyone.

In this example I will show you how you can modify the table based layout which is outputted for the Quick Launch Navigation (Side Bar) and replace it with a more friendly and easy to style HTML list. This is a complete overhaul of how the quick launch is rendered out.

If you duplicate a site definition like STS and take a look the default code that is used to render this navigation you will find a category title for the link, a server control that renders out all the new elements created that match that category.

This is what actually renders that navigation menu

Note: In an effort to save you from going boogy eyed I am including only one of the headings which is included. Each heading in the site definition has the same thing with a different base type specified.

<TABLE CELLPADDING=1 cellspacing=0 BORDER=0 width=126px style="margin-right: 3px">
<TR><TD class="ms-navheader"><A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/
viewlsts.aspx?BaseType=1">Documents</A></TD></TR>
<TR><TD style="height: 6px"><!–webbot bot="Navigation" S-Btn-Nobr="FALSE" S-Type="sequence" S-Rendering="html" S-Orientation="Vertical" B-Include-Home="FALSE" B-Include-Up="FALSE" U-Page="sid:1004" S-Bar-Pfx="<table border=0 cellpadding=4 cellspacing=0>" S-Bar-Sfx="</table>" S-Btn-Nml="<tr><td><table border=0 cellpadding=0 cellspacing=0><tr><td><img src=’_layouts/images/blank.gif’ ID=’100′ alt=’Icon’ border=0>&amp;nbsp;</td><td valign=top><a ID=onetleftnavbar#LABEL_ID# href=’#URL#’>#LABEL#</td></tr></table></td></tr>" S-Target TAG="BODY" startspan –><SharePoint:Navigation LinkBarId="1004" runat="server"/><!–webbot bot="Navigation" endspan –></TD></TR>

Ok so lets tear it up

It can be broken down fairly easily. There are basically two rows. Row 1 has the title and Row 2 renders the links which go under that title.

The above example is the Documents heading. When this renders out on the page it shows Documents, and then renders all the document libraries you create in a table under it.

If you look closely you can see all the things we talked about above like the server control, web bot etc. but what is really important in here is the title, and the links.

Great now we know whats behind it, let’s replace it with something more fun.

One of the better things you can use for navigation is an HTML list. Doesn’t sound very fun I know but once you have this base you can style it to your hearts content and it’s much easier to look at, manage and deal with.

A basic html list looks like this:

<ul>
<li></li>
</ul>

What we’re going to do here is remove the entire Web Bot Table rendering and leave us only the meat of what we are after.

The very basicsof what is rendered out into tables can be stripped down to this:

<A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/
viewlsts.aspx?BaseType=1">Documents</A>
<SharePoint:Navigation LinkBarId="1004" runat="server"/>

That leaves you with your title (Documents in this case) and the server control that will render out a link for each document library that is created. You will need to do the same for each of the titles (Picture Libraries, Lists etc).

From there you can pop these items into a simple HTML list which can then be styled to your liking.

This has been one example of how you can make the base code easier to manage by stripping out the tables that are rendered out and replacing them with more sensible markup.

This is a snippet of code from a site definition I created which replaces the entire quick launch navigation structure:

<!– Render the side navigation/quick launch into a div –>
<div class="sidebar">
<!– List based quick launch –>
<ul class="quicklaunch">
<li class="ms-navheader"><A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>
/viewlsts.aspx?BaseType=1">Documents</A></li>
<li><SharePoint:Navigation LinkBarId="1004" runat="server"/></li><li class="ms-navheader"><A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture
.LCID%>/viewlsts.aspx?BaseType=1&ListTemplate=109">Pictures</A></li>

<li><SharePoint:Navigation LinkBarId="1005" runat="server"/></li><li class="ms-navheader"><A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/
viewlsts.aspx?BaseType=0">Lists</A></li>
<li><SharePoint:Navigation LinkBarId="1003" runat="server"/></li><li class="ms-navheader"><A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/
viewlsts.aspx?BaseType=3">Discussions</A></li>
<li><SharePoint:Navigation LinkBarId="1006" runat="server"/></li><li class="ms-navheader"><A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/
viewlsts.aspx?BaseType=4">Surveys</A></li>
<li><SharePoint:Navigation LinkBarId="1007" runat="server"/></li>
</ul>
<!– End List based quick launch –>
</div>
<!– End Render the side navigation into a div –>

A couple of quick tips:
Try to keep your class/id names consistent with what Microsoft has named them. This will come in particularly handy if a theme is applied, for example: the “Titles have the class ms-navheader”.

The form runat=server which is on the page must come ‘after’ the quick launch menu, otherwise it will toss you a code block error.

To avoid headaches, create a class and apply it to the list. In the class make sure you remove padding, margins and list-style.

Example:

.quicklaunch {
padding:0;
margin:0;
list-style:none;
}

That about wraps it up. Happy customizing :)

Customizing SharePoint Portal Server 2003

I recieve a fair number of emails asking about SharePoint Portal Server 2003 customization. Here is the readers digest version on one possible way to go about things.

SharePoint Portal Server 2003 uses OWS.CSS MENU.CSS and SPS.CSS by default. If you are looking to do ‘global customization’ within SharePoint Portal Server you are definately encouraged to leave the SPS.CSS alone.

What you should do is duplicate and rename it. Once you have made a copy of your SPS.CSS file you can then customize the style-sheet to your liking, when happy with it you can simply point to this Custom CSS file.

To point SPS 2003 to a custom CSS file point your browser too:
http://your- site/_layouts/1033/PortalProperties.aspx

Rather than regurgitating all this information I will do what I normally do when asked “How can I get a quick jumpstart on customizing Portal Server?”

I will point them to Bil Simsers great post on SPS Customization

I guess it’s warrented to get a little more in-depth with the SPS Customization posts real soon.

New Xbox Site and Channel 9 360 Video

So after not being able to hit the Xbox.com site for quite a while (I don’t think it was down THAT long but for some reason it was whenever I tried to hit it this past week) – the new Xbox site is live. It looks great and has a lot of features I have been looking for – including a better screenshot viewer. Very nice.

It looks like there are still some bumps in the process however because the Microsoft Xbox site links out to the wrong location if you try to click the Xbox 360 links at the top. - Update this has been fixed now.

If you are looking for a great preview of the Xbox 360 – I’d recommend checking out the Channel 9 video which features Major Nelson’s demo to the Xbox.com MVPs.

Dear Internet

Dear Internet,

Please stop using the word AJAX, you are driving me crazy! If you just can’t contain yourself from spurting buzzwords at least acknowledge the fact that it’s not the new concept that it’s being played off as.

AJAX is basically nothing in and of itself, it’s merely a combination of several technologies that have been around and used for several years.

Maybe it’s just me but I’m a little confused as to why this buzzword has become so popular and it’s being talked about as though it’s a sparkly new technology.

Oh well at least it’s getting people to develop slick little effect libraries

/end rant :)