Matt Brett's logoMatt Brett

css Archive

15 articles

FAQ: “How do you build your WordPress themes?”

This is probably the single most frequently asked question that arrives in my inbox, or elsewhere. And for good reason, I suppose. Seeing how I've been building sites on top of WordPress exclusively for about 3 years now. There are many different routes you can take when building a theme, and I've pretty much streamlined my method over the past couple years. Granted, there are always exceptions and I've found that I can't work from a base template. Instead, I build "themes" from the ground-up, but with a little help. Here's how...

Here, Have My Bare Bones Stylesheet

A few weeks ago, I finally got around to doing something I've been meaning to get to for ages. I created a bare bones stylesheet that I can use as a starting point for new projects. I established a set of common selectors months ago and found myself spending (or rather, wasting) time at the beginning of the CSS phase of every project re-writing virtually the same CSS. It only made sense to create a template for myself to save time, but you know how it is. "Create Bare Bones Stylesheet" sat as an unmarked to-do in Basecamp forever.

Back in Black

I've accomplished something I've always wanted to do with my site - have multiple styles and let the user choose their preference. As promised, I deliver onto you, "Back in Black", which is essentially my latest revision with the old colours. A bit more bold, as all the links are coloured where as they were only underlined with colour in my previous incarnation. The style switcher stores a cookie on your computer, so every time you come back (granted you haven't cleared your cookies) you'll see the style of your choice. Fun!

Running IE 7 Beta 2 and IE 6 on Windows XP

Microsoft made a some big waves today by releasing the first public beta of Internet Explorer 7. Unlike the previous beta, which was closed to developers. This one features many crucial fixes as far as how it renders pages. Tons of the most notorious CSS bugs have been squashed and some other nice-to-have features been added. Transparent PNG support made it into the first beta, so there's 2 huge things right there that should make all web designers rejoice. Now [Microsoft], finish this shit up and roll it out to the masses, stat! Being a designer and a Windows user, I was obviously anxious to see how IE 7 was coming along. I installed it right away and no surprise, it replaced IE 6. Probably not a big deal for the average user, but I still need IE 6 for testing purposes. I remembered having older versions of IE 5 and 5.5 back in the day and after a quick search made my way back to - Browser Archive. Low and behold, in the standalone IE directory, there's a version of IE 6. I quickly downloaded it, fired it up and sure enough, it works!

My First Rip!

Fellow 9ruler Volkher sent me a little heads up this morning that this site looks shockingly similar to mine. Indeed it does - it seems I've been ripped! Surprisingly enough, I wasn't the least bit angry. I thought for sure if this ever happened, I would be irate. Especially in a case as blatantly obvious as this one. But I wasn't at all. I was actually laughing as I viewed the source and CSS to find out he hadn't even bothered to change selector names and all of my comments are still in place. I mean, you know you're a jerk when you rip someone this bad, but you're a real lazy jerk when you can't be bothered to change it up under the hood. The hover link classes are even the same for the main content areas. The one thing that has got me a little upset though, is that this rip has been featured over at CSS Mania. Now that just sucks. Hopefully this dude has a little decency and will email them to let them know he's not worthy of being featured. But honestly, I don't see that happening.

Dissecting My Site: Part 2

When I determined how much content I wanted to deliver up front, I knew it would be a challenge to differentiate each section at first glance and to present it all in a way that wasn't overwhelming or seem cluttered. This is where the use of colour comes into play. I love pink, and pink and black is the hottest combo ever. So pink represents this guy right here - whether it be the body of a post or a comment I've left. Green is "external" or off-site links and blue represents user feedback.