All posts by Sean

Web Development, Visual Design, Accessibility, User Experience, Technology Evangelism, Leadership, Cooking, Geek Culture, Being Awesome. And Ninjas.

linkHive For Jan 6th

Here are the newest links to join the linkHiveJan 6th

  • The Omni Group – OmniGraphSketcher – OmniGraphSketcher helps you make elegant and precise graphs in seconds, whether you have specific data to visualize or you just have a concept to explain. Specifically designed for reports, presentations, and problem sets where you need to produce sharp-looking graphs on the fly, OmniGraphSketcher combines the data plotting power of charting applications with the ease of a basic drawing program.

linkHive For Jan 6th

Here are the newest links to join the linkHiveJan 6th

  • The Omni Group – OmniGraphSketcher – OmniGraphSketcher helps you make elegant and precise graphs in seconds, whether you have specific data to visualize or you just have a concept to explain. Specifically designed for reports, presentations, and problem sets where you need to produce sharp-looking graphs on the fly, OmniGraphSketcher combines the data plotting power of charting applications with the ease of a basic drawing program.
  • 10 Beautiful Sketches for Website Prototypes – woorkup.com – When you start designing a new website it’s very useful to sketch out a first idea of page layout using paper and stencil. This approach help you define easily a working draft of the final version of your website. In general this is a top-down process: you can start sketching first the main sections and then adding more details progressively. In this post I want to suggest you some interesting examples of beautiful sketches for website prototypes for your daily inspiration.

Hacking Night In Canada

Spent then tail part of my Saturday watching hockey and coding.  I’m sure Jamie would be proud.  And likely doing the same thing.

It’s always great to decide to fix some code and things pretty much work out the way you want.  Tonight I wanted to add a listing of the Tags for each post to Single Post view to the theme I’m using for this site.  Cellar Heat is a great theme and working with it was awesome.  Its a great theme with great code build on the pure awesome of WordPress.

Pretty much the only thing I wanted in the theme that wasn’t already there was the listing of tags for each post.  I don’t mind tags not being included on the post excerpts on the front page and side bar.  I did think that tags should be included with the full post view…so I added them.

First I found the WordPress documentation on the calling the Template Tag “the tags” (a bit of unfortunately confusion naming by WP there…).  Easy and straight forward, I dropped in some code to get the tags in the full post view.

Keeping in mind I’m using the 1.0 version of Cellar Light, I added this div just before the second”<br clear=”all” />”

<div id="tags">
 <?php the_tags('Tags: ',' • '); ?>
</div>

I then added a bit of styling.  I wanted the tags to be visible but not a visual focus.  To accomplish this, I dropped the font size down to 10px, moved it to a right alignment and used the opacity style to soften it’s look.  I started off with just using italics, but it still looked too heavy.  I was delighted that I just assumed there was an opacity feature in CSS, having never used it before, and then found exactly how to do use it on Quirksmode.org.  The article includes important tips on IE compatibility for the opacity effect.  I’ve tested with IE 8 and I’m happy with that.  Here’s the CSS code I added to the stylesheet:

#tags {
      font-size:10px;
      text-align:right;
      opacity: .35;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE(8) opacity magic
      filter: alpha(opacity=50);                    // more IE(7) opacity magic
}

And that’s it!  Good times.  Good Hockey.  And even caught some of The Rockey Horror Picture Show.  All in all, a lovely evening.  I think I might move the dark version of the Cellar Heat…the rounded corners and the look of the footer is tipping the balance.  I expect this code to just work with the dark version, if I do end up making the switch.

You can see the result of the changes I made at the bottom of this post…or any post.  If you like this work, you’re welcome to it – although I would appreciate a comment or email telling me that you found this helpful.