CSS

A neat way to create sprites with multiple matte colours - which pleases Internet Explorer!

At Orange Bus we're strict about following best practices, and in my day to day workload that pretty much means perfect mark-up and optimised graphics.

I've covered the importance of using sprites rather than separate files for web graphics before, and we follow this practice on all the sites we build. For me it's not all about making the download-time faster for the user (although that's a must!) but also a unique timesaver - it makes the maintenance of the site, and the build of the site (not to mention browser compatibility) much much faster. It never fails, a client will ask for minor tweaks when you think you're ready to launch a site, and for me to be able to open one file to alter all the graphics is much quicker than going through an endless long folder of small 1px files is vital.

Best CSS based horisontal navigation

CSS
Drupal

I've spent quite a bit of time researching how to build the best horisontal CSS navigation, and I believe I've found the perfect method, which I now apply to all of my work - thought it would be a nice thing to share.

The Markup

When developing in Drupal (as we do) one would use the primary and secondary links in the admin to create the navigation, and it looks a little something like this:


<div id="header">
	<ul class="menu">
		<li><a class="active" href="#">home</a></li>
		<li><a href="#">about</a></li>
		<li><a href="#">blog</a></li>
		<li><a href="#">press</a></li>
		<li><a href="#">shout</a></li>
	</ul>
</div>

CSS
Drupal

Integrating Twitter with Drupal (apologies for the geeky post)

CSS
Drupal

Right, so I was going to write a little how-to for people that want to integrate their Twitterfeed in their Drupal site. As I tweeted yesterday; it was just TOO easy...

Step 1: Get your code right

Assuming you already have a Twitter account, the first step is to go to Twitter Widget Chooser, tick for HTML widget and click continue.

CSS
Drupal