Wednesday 28 March 2007

customizing WSS 3.0 /MOSS based site theme using sharepoint designer

there are really multiple ways you can benefit from the out-of-the-box features provided by WSS or MOSS. As we all know that you can choose different themes from the site settings -> site themes, MOSS offers you something extra. If you are familiar with sharepoint designer, you will know that in Style Library folder of your site, there is a folder called "Core", in there, some extra css files will help you with the "new look" help you to make your site look less like a sharepoint site but rather a more customized web site.

So if you would like to spice up your site with extra color & instead of tweaking the boring core.css to make a sharepoint-brotherhood look site, you can create your own master page and publish it . In order to do this , you need a copy of sharepoint designer and open up you site by its url. then find your master page under _catalogs/masterpages/default.master. this is all the content pages in your site derives from. So if you open up a page in your site, say lists ->(list with your customized name)->allitems.aspx which is the default page when you click the name of your list name. then switch to the code view of your page. You will see on the top of your page. there's the reference for your master. If you are a little bit familiar with asp.net 2, you will know how it works. also, as you know, WSS 3.0 is built on top of .net 2 framework with asp.net. so if you update this reference with your own master page,

the rest is easy as long as you know how it works.All you need is your css files and customized master page.


1. make a new master page in either Visual Studio or sharepoint designer. I won't explain this because you all know how. I suggest you start from a copy of default.master instead of modifying default.master in case you want to revert back. BTW, if you really messed up your default master, right click your default.master then select "revert to site definition". Which will clear all changes you have made and saved.
2. copy the following code into top of your page for the assemblies used in your master page so you can still use sharepoint functions(i.e. you don't go too far on this to lose what sharepoint is offering you or even worse, your master page won't work at all).



as you can see in the code above

SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/~language/Core Styles/Band.css%>" runat="server"
is used to import your customzied css file. you can use this to override your core style, and of course it also works with old school css reference.

3. make sure if all the place holders are what you want. Do be careful when deleting these placeholders. You better know which one of them is needed by content pages. Otherwise sharepoint designer won't show you the design view because the content place holders don't match between your master and content pages.

After all the customization is done,go back to your WSS/MOSS site , select site settings->galleries->master pages, where you can then upload your customized master and then right click your master page uploaded ->"publish a major version", click ok on the following form , then right click master again ->"approve /reject" to approve your master to make it visible to your site.

that should be easier than make sharepoint themes, in that way you have to change the xml config files of your MOSS and btw, I don't think you can change layout by simply applying a theme. That can only change the color and some style.Your MOSS site will still look like a MOSS site anyway... It's really up to you for the level of details you want to change.

It's actually quite fun to style up MOSS, enjoy!

No comments: