I got a little bored today, so I decided to give a new theme a chance. As a base theme I download a theme called Envision. I found it in the list of themes on the blogengine.net homepage. The theme seemed to have the potential to be mine with a little tweaking of course. An example of the original is below.

Why did I like this theme, well it is based on a light colour scheme, that would go well with my new colours. It's a 2 column page , my previous was a two column fluid layout, so I wanted something different. I love grey background and after examining the image files, I determined that I could re-colour the header, footer ,menu and the the main content frame background.

Out a pull Gimp and 2 hours of 'trial and error' I arrive at what you see now.

Conditional Style Sheets

This is the first time that I used a conditional Style-sheet. A quick explanation is necessary. HTML conditional comments are an IE propriety ability, they are used to target different versions of Internet Explorer. Other browsers will ignore the comments and using conditionals is considered a safe Hack.

   1: <!--[if IE]>

   2:   <link href="/blog/themes/Envision.1.0/css.axd?name=IE.css" 

   3:                         rel="stylesheet" type="text/css" />

   4: <![endif]-->

IE  interprets this conditional and if true will print the html inside as normal content, other browsers will treat the conditional as a comment only and will not evaluate the expression.

By using a link statement I was able to create and IE only CSS style sheet to override settings in the master Style-Sheet that would not render correctly in versions of IE.

Current I am using rendered content using cssclass:after attribute selector, which IE7 and below do not support, IE will ignore that declaration but will miss out on necessary css settings, by using and IE only Sheet I can override the cssClass and add back the missing details (if you supply cssclass:after it will only apply css you declare to the attribute value of 'content:').