New layout: Responsive design

For a long time, I was looking for a layout that was made use of the full width of the screen. Today I found the 'Incipient Template', which actually has a kind of responsive design.

I didn't customize it (yet...), for now I like it. It's clean, fast and nice to use (thanks to Amanda from bloggerbuster.com). Oh yes, I just added the syntax highlighter on it, to show the code samples on a nice way.
So I hope you'll enjoy the new layout. However, it's all about the content ;)

SharePoint 2007: Create and manage custom theme in a flexible way

Recently I started to create a custom theme. As you may know, when you change the theme of a site, SharePoint will get a copy of the chosen theme and place that in the content database.
And that is exactly not what I was looking for. I just want to have one single place where my custom theme is located so I can easily manage and change the theme. This will affect than all sites that are (already) using my custom theme.

Here is how to do this:

1. Go to 12-hive\TEMPLATES\
2. A good starting point is to make a copy of an existing theme that’s close to what you want to have. For example make a copy of the VINTAGE folder.
3. Rename it to e.g. MYCUSTOMTHEME.
4. Inside this folder, rename the VINTAGE.INF file to MYCUSTOMTHEME.INF.
5. Open this MYCUSTOMTHEME.INF and replace all ‘vintage’ text into ‘mycustomtheme’ (without quotes).
6. Add an entry for the MYCUSTOMTHEME in the SPTHEMES.XML
   

   
   <Templates>
    <TemplateID>mycustomtheme</TemplateID>
    <DisplayName>My Custom Theme</DisplayName>
    <Description>This is my cool customized theme</Description>
    <Thumbnail>images/thmycustomtheme.gif</Thumbnail>
    <Preview>images/thmycustomtheme.gif</Preview>
   </Templates>
   

   
   (Note: the thmycustomtheme.gif image can be created when you are done with customization of your theme. Place this file on 12-hive\TEMPLATE\IMAGES\)


7. Instead of leaving the theme images and stylesheets inside the MYCUSTOMTHEME folder (12-hive\TEMPLATE\THEMES\MYCUSTOMTHEME) we need to move the images and stylesheets to be able to edit and see our changes immediate.
   a). Create subfolders called MYCUSTOMTHEME inside the following folders:
   i. \12\TEMPLATE\IMAGES\
   ii. \12\TEMPLATE\LAYOUTS\1033\STYLES\ (note: 1033 is dependent on your language)
   b). Move all images from the 12\TEMPLATE\THEMES\MYCUSTOMTHEME to 12\TEMPLATE\IMAGES\MYCUSTOMTHEME.
   c). Move the theme.css (and when using MOSS, mossExtensions.css) to \12\TEMPLATE\LAYOUTS\1033\STYLES\MYCUSTOMTHEME\. These two files you will use for your customizations.
   d). Go to 12\TEMPLATE\THEMES\MYCUSTOMTHEME\. There is one file left (mycustomtheme.inf).
   e). Create a new (text)file, called theme.css and open it.
   f). Add the following lines of code:
   

   
   @import "/_layouts/1033/STYLES/mycustomtheme/mossextensions.css";
   @import "/_layouts/1033/STYLES/mycustomtheme/theme.css";
   

   
   g). Now, when you set a site theme to your ‘mycustomtheme’, the theme.css you just created (with the import statements) are stored in the content database, but the site will use the the css-files on your file system. Now you are ready to edit your css files.
8. Remember to refer to the images like: url(“/_layouts/images/mycustomtheme/)

The following pictures shows where the customtheme folders are located:

Site Tips: Branding SharePoint (WSS3.0 and MOSS2007)

Yesterday I started with branding SharePoint for one of our customers. Creating a custom theme is not that easy as it should be. I will come back later on that.
I found some useful sites on the internet. I want to share this one in particular with you:

• http://www.heathersolomon.com/content/sp07cssreference.htm

This is a nice overview of the used style elements in SharePoint sites. You can easily find the corresponding element that are used in the stylesheets ( e.g. .ms-topnavselected) by using the index or screenshots.
The main site, http://www.heathersolomon.com/blog/articles/sp2007.aspx, shows a lot of information about the structure and customizations of sites.

i3Theme for BlogEngine.Net - Updated

Although I switched to the blogger mechanism, I still like the BlogEnginge.Net solution. So I just put the posts about BlogEngine.Net on this blog also.
I had used a 2 column version of the iTheme, which ws ported by ThinkEdge. This theme was originally created by Nick La of NDesign Studio for WordPress.
On the internet, I found a 3 column sample, but that one was not suitable for BlogEngine.NET. So I decided to edit the iTheme which was ported by ThingEdge so it will show up as a 3 column theme, or if you like, the i3Theme.

Van Rob van Meeuwen

You can just download it here at the bottom.
(Note, the background image of the download version is without the seagulls, just like the original ported iTheme which you can download also).

• iTheme.zip (182.97 kb) - Original 2 column version
  


• i3Theme.zip (144.84 kb) - 3 Column version