StyleSheetTheme – the Unsung Hero of .NET 2.0

I had an issue today that was not clearly covered in blogs that I found on the subject, so I thought I would write a little post explaining what the problem is and what my solution was.

My issue was on a .NET 2.0 page. As simply put as possible: Using a Theme was causing my browser-specific css to get ignored.

My Masterpage was using a simple IE-conditional to include css written specifically for IE7 (and another for IE<7). We also had a generic basepage that every page inherits.

 For some reason (and I’ll explain why in just a second) my ie7.css file was just not getting recognized by any of my pages. I quickly checked the source of the page and found that the order of css on the page went: ie7.css in the conditional, followed by all my Theme css files located in App_Themes/Themename/css.

Introduction to Themes 

In case you are new to .NET 2.0 and Theming, the general idea behind it is that you have a special folder called App_Themes. Inside this folder, you can make subfolders. These folders should be the names of your theme, so if you want a blue theme, the file structure would generally look like ~/App_Themes/Blue, and then images and css directories under that.

 Why is this useful? .NET 2.0 includes the ability to set a page directive called “Theme”. At the top of a page, there’s some junk thrown in there by .NET, like MaterPage, Title, etc. You can add to that: “Theme=’Blue'”.

What happens next is that all that css is imported automatically. Presumably as well that css should have a relative path to the images. You can have skin files and all kinds of things in the Theme. The magical part is, if you want, you can also set the Theme programmatically. If this is the case, you could have some kind of Session variable, in theory, that “knows” where on the site you are, if you have different areas, and then set the Theme to the appropriate area. For example a Green area that has article.aspx and news.aspx.

In the Green/Blue example, if you used the same css class names (or even the same css FILE, copied in two different directories) you can literally just swap the image colors and automatically have two completely different looking websites running off of the same exact aspx/cs files.

The best part of Theming this way is that all you have to do in a codebehind is say, literally: “Page.Theme=”Green”;” and you get the Green Theme.

So what was my issue?

The Issue

The Theme css is imported automatically. Anything inside the Theme folder gets grabbed and added to the page in a <link rel=…> tag. This is fine. It’s not what it’s doing, but where. These are added automatically at the END of the head tag, by default. Good by IE conditional statements.

The IE conditional statement is supposed to pull in a stylesheet with extra or different definitions that override the current css in the case of IE. However, with css, the last version of a definition is used by default. So it was like my IE files were not even there.

The Solution

StyleSheetTheme! This is a second kind of theme that differs from the “Page.Theme” version of .NET 2.0’s theme system. (Geez the word Theme is starting to lose all meaning to me at this point… sorry 😦 I didn’t name these things!) A StyleSheetTheme differs from the regular theme in two ways:

1) The way it is added to a page programmatically

2) Where it positions the css on the page

StyleSheetThemes are specifically designed so you can alter the css with other stylesheets. Instead of placing everything last, it places it FIRST. This is incredibly useful for things exactly like browser-specific css files, or small little inline things you may want.

The reason I think so many people ignore this theme type is because of how it is implemented. On an aspx page you can statically declare it similar to the other theme, in the @Page directive, just by saying StyleSheetTheme=”Green”.

Programmatically, though, things are different. There is no Page.StyleSheetTheme. Instead, you have to override a property. That code would look like this:

protected override string StyleSheetTheme

{

           get { return “Green”; }

}

This can happen in the basepage, which makes the most sense, honestly. You might notice that this is also static. Using a variable won’t help much, either, since it’s not executing at preInit or onLoad, it’s a separate method. What you CAN use, though, is a Session variable, as long as it’s not null.

Conclusion

This simple solution saved me a LOT of hassle today. I recommend more people check out StyleSheetTheme instead of Theme, since Theme requires hacks in order to get it to work well with alternate css paths.

SEO – How to sell it to your company

Learning about Search Engine Optimization is one thing. Anyone can load up some articles, read about some techniques, and try to apply them to your website. But what do you do when your company needs to adopt SEO practices?

Here’s something I learned through trial-by-fire: selling the concept of SEO is an incredibly easy task. Selling the practices, though, is difficult. Everyone wants to reap the benefits of increased traffic and better placement, but no one wants to commit to changing their behavior and work style.

Anecdotally, I recently took the plunge and introduced the concepts behind SEO to the company I work for. The idea was met with enthusiasm, for sure. The tasks were laid out, and it was decided that, experimentally, we would try it on one of our products.

This is where first resistance was met. Interestingly enough, the people who were fine with changing their ways were not the ones I expected. Content writers were fine with changing how they wrote, PMs were fine with building it into their schedule, Marketing was fine with a new method of keyword analysis and selection, and all three of these groups were fine with working together. In terms of the technical side of things, though, there were some bumps.

Briefly mentioning to some colleagues of mine some SEO concepts, I usually ran into disagreement. Things like how to redirect a page, or not to use Javascript to link were met with dissenting opinions. After some time, I was able to convince them, but at first there was backlash. I suppose that when you’ve been doing something for a while, it’s tough to hear that you should do it differently.

Another roadblock was from the design side. They wanted to have a specific way of naming images to make it easier for them, namely the idea of adding a prefix (m for menu, l for link, etc) to every image, including the page name in there, and using underscores. I suggested that, instead of using image names to convey organization, use folders and subfolders. /images/home/topnav/keyword-image-name.jpg, for example. That idea did not go over very well, not to everybody, and so the image names were not optimized.

To show you how important image names and other image-related factors can be, consider that just yesterday, I received a spike in traffic on this blog. After some investigation, it turns out I have received a TON of referrals from google image search, because my Macbook review page is the first result in a google image search for the term “macbook”. This garnered some serious traffic, so don’t try to argue that image names are irrelevant!

Another roadblock in selling SEO to the company as a whole is people who want to use SEO to cover their asses, or just improve their products before it is ready. One of the more important aspects of enterprise-level SEO is having a process in place. A process will severely reduce overhead for SEO and make it virtually transparent, once initial education costs are over with.

It can be tough in the meantime, as word of SEO and related success is sure to spread around the company. If you are the one taking this initiative, prepare yourself to get an onslaught of requests to implement SEO into sites. You’ll get lots of questions, like “how long would it take to implement on my project”, and “just tell me what to do so I can do it myself”. You’ll need to know how to deal with these kinds of requests, since your sell will likely garner these kinds of requests once or twice a day.

In short, you want to sell to the people that will allow you to quietly set up a process that will eventually get disseminated to the rest of the company. It can be really tough to do, sadly, but the payoff is more than worth it.