CKS:EBE – How to create a new skin (Part 1)

Administration All Me!! Baby!! BDC Book Review Business CKS Conferences CQWP Development Duffer Moments Email Errors Family Fixes General Groove How To How To Code InfoPath iPhone IRM Longhorn Lotus Notes Migration Mobility Office System 2007 Personal Projects Powershell Records Management Search Server Security SharePoint Silverlight SQL Tech Ed 2008 Testing Vista VSTO WSS XSL

[23/05/2008] CKS:EBE – How to create a new skin (Part 1)

Categories: CKS, Development, Office System 2007, SharePoint, WSS

As most of you know the Community Kit for SharePoint Enhanced Blog Edition has been released and is now available for download from here:

http://www.codeplex.com/CKS/Wiki/View.aspx?title=Enhanced%20Blog%20Edition&referringTitle=Home

I think this framework is fantastic and would like to send a great big thank you out to all those that were involved in creating this for the community. As part a few posts I wanted to take you through the process of creating a blog skin for CKS:EBE from the beginning to the end. This series will start in Photoshop and end up with a fully branded blog site. So let's begin, after spending some thought into the design I have come up with the following design for my fictional blog site.

NOTE: The graphics used here are a mix of my own and also some that I have used from iStockPhoto.com. A big thank you goes to the designers who came up with all or parts of the graphics used above.

THESE GRAPHICS ARE NOT FOR ANY PRODUCTION SYSTEM AT ALL AS THEY ARE FOR DEMONSTRATION PURPOSES ONLY!

As you can see I have mocked up the blog site including some dummy data. This is quite an important step as this will allow you to visualise how it will look when it is published and contains data. So now we have our design we need to chop up the image into its various parts so we can then reconstruct it, into a master page layout. For this we will use the in-built "Save for Web" functionality of Photoshop, you can use any product you wish for this, I just happen to be using Photoshop. Anyway firstly we need hide any dummy content layers and then slice up the image as shown below:

Now we have chopped up our blog design we can now export it into a XHTML compliant web page and corresponding graphics. In Photoshop we use the following process:

This menu item will then launch the export wizard as shown below:

Once you have selected what format you want the images to be, in this demonstration we are using "GIF" and have set them to "128 Dithered". Now we need to set whether it should be output XHMTL compliant code:

This next step is quite important, this is where we decide how the layout is going to be exported, either as a nested "<DIV>" tags, by selecting the "Generate CSS" option, or we can stick with a standard "<TABLE>" output.

In this demonstration for ease and convenience only we will use the standard table output instead of creating nested div tags. We will create our own CSS anyway for the table layout at a later date. Before we export we have set the following properties and have chosen a location for this.

Once this has completed we should now have the following:

So now we have our outputted design, we are ready to create a new HTML design using the images that we have exported. This process is really all about making the various CKS:EBE controls and elements fit within our new blog design. For this I am going to open up Dreamweaver, this is purely for creating my CSS styles and modifying the layout ready for SharePoint Designer. So firstly open up the HTML page into your web application and it should show as below:

What are going to do here is to change the table layout slightly. We want to keep the overall layout but instead change it from using "<IMG>" tags to calling CSS styles instead and setting the background of the relevant "<TD>" tags. As an example let's take the area where the blog title will be:

The original graphic has a slice that we added around the blog title, this also appears within the XHTML outputted version.

To convert this to CSS style instead we will change the code shown above to this:

Existing

Modified

We also need to add some CSS declarations, these will ultimately be in the standard main and styles CSS files that are used within a CKS:EBE theme. However for this demonstration I will just add them direct to the page and the copy them out later on.

This will now render the "<TD>" tag as before but this time the background it set to graphic, which will allow us to put either text of a control into that space on the page. I have also added the following CSS style in order to style the text that will appear in this space.

These styles are simply for displaying the correct font, font colour and alignment of the text. To test if this is correct we can simply change the HTML code to as shown below and it should now render in the correct style.

The following changes were also made to the CSS styles:

NOTE: You can use just the "background:url()" option instead. Also note that if you embedding images directly in the master page and not using CSS you will need to use the following path to get to the images: "Themes/{Theme Name}/images/{Image Name}"

With these styles and a couple of HTML tweaks the page should now look as shown below, notice how the height has been removed and will now grow based on the amount of content that is added to the content sections.