Stylesheets A’ Plenty

I started by first creating 13 different stylesheets. The first one I created was a base stylesheet containing the basic structure of site. The other stylesheets containing color changes to the header, headings, and link colors, were created for every month. I saved each of the monthly stylesheets by month number, so September’s stylesheet was saved as 9.css, June’s was 6.css and December’s was 12.css. You can take a look through the archived entries on this site to see the various styling for each month.

Taking Advantage of WordPress Conditional Tags

WordPress conditional tags are an easy way to tell WordPress to alter various elements within your theme depending on certain conditions. Most early themes for WordPress take advantage of conditional tags to display different content in the sidebar of a page depending on your current location on the site. In order to keep the current month’s look on the front page of my site, but have the individual entries maintain the look of the month it was written I set up a conditional that said if the page is_single() then display the stylesheet of the month it was published. If we are not on a single entry page then display the current month’s stylesheet. Here’s what it looks like:

< ?php if (is_single() ) { ?>
<link rel="stylesheet" type="text/css" href="http://sitename.com/<?php the_time('n'); ?>.css" />
< ?php } else { ?>
<link rel="stylesheet” type="text/css" href="http://sitename.com/<?php echo date('n'); ?>.css" />
< ?php } ?>


PHP

Notice the small bit of PHP within the conditional we set up – <?php echo date('n'); ?>? I replaced the name of the imported CSS file with a short snippet of PHP, which in turn generates a numerical value of one through twelve depending on the month, and appends the *.css file extension. This is why I saved my monthly stylesheets by month number. You can read more about the PHP Date/Time functions and decide what format is best for you.

Options

If you are not using WordPress you can still easily accomplish the same switching of stylesheets with some simple javascript or server side methods. Once you are familiar with some the options of the PHP Date/Time functions you can experiment with changing the look of your site at any interval you like.

No pressure…

This is what people see when they try to add me on linkedin.com I’m thinking the site needs to display a little more than six characters for names.

I recommend adding the following links to your Blogger template near the bottom of each blog post.

Del.icio.us

<a href="http://del.icio.us/post?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">Del.icio.us</a>

Digg

<a href="http://digg.com/submit?phase=2&url=<$BlogItemPermalinkURL$>">Digg</a>

Technorati

<a href="http://technorati.com/cosmos/search.html?url=<$BlogItemPermalinkURL$>">Technorati</a>

Blinklist

<a href="http://blinklist.com/index.php?Action=Blink/addblink.php&Description=<$BlogItemTitle$>&url=<$BlogItemPermalinkURL$>">Blinklist</a>

Furl

<a href="http://furl.net/storeIt.jsp?t=<$BlogItemTitle$>&u=<$BlogItemPermalinkURL$>">Furl</a>

reddit

<a href="http://reddit.com/submit?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$<"<reddit</a>

Newsvine

<a href="http://www.newsvine.com/_tools/seed&save?u=<$BlogItemPermalinkURL$>&h=<$BlogItemTitle$>">Newsvine</a>

View menu example.(Updated 11/4/06)

The effect looks a lot like an iframe, but is not near as messy and is more search engine friendly. To recreate this effect, start by creating a normal div with all of the content you want to scroll within that div. To make the div display a scrollbar you must use the overflow element in the CSS. By simply adding “overflow: auto” to your styles, the div will then scroll when there is an overflow of content. Here is what your style sheet would look like for this div:


#scrollingdiv {
color: #333;
border: 1px solid #DDD;
padding: 5px;
width: 215px;
height: 150px;
overflow: auto;
}


Below are the results using the styles above:

< ?
if (preg_match('/^http:\/\/(\w+\.)?(google|msn|yahoo|aol)\./',$_SERVER['HTTP_REFERER']) == 1)
{
?>
< ---Insert your Adsense Code Here--->
< ?
}
?>

You can see this code in action by visiting a regular post on this site and then one from google.

With my latest redesign of this website I also decided to dive into the awful coding that Myspace is famous for and make my page on Myspace a little bit nicer and hopefully match up with my current design for this website. After getting some help from a few profile tutorials around the web I finally managed to accomplish my goal. My Myspace page now matches up quite nicely to my website and doesn’t have the horrible default Myspace look.