You know the story. You’ve been using LiveJournal since 1999. It’s your home. You’re familiar with it. You’re on the list of notable LiveJournal users. But times they be a changin’. You’re friends are all leaving LiveJournal for WordPress because it’s a better C-M-S (whatever that is). You’ve switched to WordPress, but everything looks strange and confusing.

The @media print style is only applied to your blog when someone is printing it out. Use it to apply display:none; to your header, your sidebar, your footer and maybe even your comments. Here’s a sample of a print style sheet for the Sandbox WordPress blog theme:

I’ve been tweaking my blog theme furiously in preparation for the Sandbox CSS Design contest. Again I have to say that I have the utmost respect for web designers. Making a good blog design that looks nice is hard work. But I feel that I’ve gotten a lot better since I touched CSS for the first time, and the recent incarnation of IDT has many improvements over the existing style.

So please step out of your web browser and let me know about any pages that are looking wonky. Please cut-and-paste the link to whatever page looks wrong and mention the web browser you are using.

In general site news I’ve gone back to having a front welcome page, instead of having the latest post on the front page. I feel it gives people a better introduction to the site. I desperately need to weed my categories, but that’s a job for another week.

One of the nice/painful things about designing for the Sandbox WordPress theme is that it forces you to use CSS to do the things you want to do. There’s no sneaking in there to tweak the underlying structure to get more convenient selectors, it’s CSS or nothing.

An often requested tip is how to do 3d buttons for the menu bar at the top of the page. It’s done using the common “sliding door” technique where one image is the front plus middle, and another image forms the end. I’ll be using the images and technique from the Dark Liquidcard 2.0 theme by Jori Avlis in this example, along with the Sandboxed example blog.

Image Is Everything

The starting point is to create two graphics for your 3d buttons. One image will have the left-and-middle portion and the other will have only the right portion. If you want the button to look different when it is highlighted (or when that page is selected), then put the highlighted version in the same image file right underneath it! That way the entire image is downloaded once and there isn’t a delay the first time a user hovers over the button.

In these images the button is 46 pixels high.

Getting Started

Here is what the menu looks like without any CSS:

We’ll start off by applying some basic styles: turn off the list style, remove any padding that might get in the way.

Adding the 3d Buttons

Now we’ll add the 3d buttons as background images. We’ll start with the left-and-middle button first. It will attach to the list element (LI). You will have to adjust the padding so that the text is centered properly with respect to the image. Float left will change the orientation of the list. (Note: I changed the text color to white so that it would show up against the image)

I’ll be the first to admit that I only know the tip of the iceberg when it comes to CSS design, but one ‘workhack’ that easily applies to any kind of programming activity is rapid development. The concept is simple: reduce the time between action and result to the shortest amount of time possible so you can get more done. My number one tip for doing a fast CSS design is to do it all on your own machine instead of doing it live on the Internet (or wordpress.com). It will save you lots of time and headaches.

I’ve taken the sample blog and example CSS template provided by Scott Wallick and made a very easy to use downloadable archive. It contains nothing but the HTML files, image files and CSS from the sample blog. It can get you redesigning Sandbox in less than a minute.

I find it easier to work on HTML files saved on my computer than creating a dummy blog on a fresh WordPress installation. If you feel the same way then downloading this archive is right for you.

Pick The Right Tools

There are several requirements for any tool that makes designing CSS easier:

editing with syntax highlighting plus auto-completion

showing you what CSS selectors are available on the page you are editing

inspecting why a design looks the way it does

I heartily recommend the combination of the Firefox web browser with the Firebug extension. The learning curve for Firebug is a bit steep, but it will save you a lot of time in the long run because it is chock full of goodies as can be seen on this page.

Testing in Multiple Browsers

One of the hardest things I find in web design is getting something to look the same in multiple browsers. Having multiple browsers on hand to check out your changes locally is a must if cross-browser compatibility is important to you. Here are the top browsers to consider. Market share numbers are from w3counter (thanks Daniel).

Know What Size to Design For

It is important to test your design in different screen resolutions. Market share numbers are from w3counter. Something else to keep in mind is that those big old CRT monitors and those funky new LCD monitors display colours differently.

1024×768 50.43%

1280×1024 17.03%

800×600 8.89%

1280×800 8.38%

I recommend the Window Resizer extension for Firefox for rapidly switching resolutions. Firebug may be able to do it as well, I am by no means an expert.

Advanced Design Considerations

There’s a lot out there to learn about CSS design, here are some highly recommended links with more information. If you have any other suggestions, drop them in the comments.

Web pages (ie: what you are looking at right now) are composed of many things. If you think of web pages as a house, HTML is the foundation and structure while CSS is the aluminum siding, brickwork and paint. HTML stands for Hypertext Markup Language and CSS stands for Cascading Style Sheets. A passing knowledge of both of them is essential if you want to run your own website.

HTML Example

CSS Example

The whole idea behind HTML and CSS is that you use HTML to format your web page (or blog post) with things like headers, bold, lists and tables. Then you use CSS to style those elements so that they look the way you want them to. The whole idea behind it all is that you can build the structure with HTML once, and then change the look of it whenever you want to using CSS.

WordPress, Sandbox and CSS

If you want to change the way your WordPress blog looks there are two ways to do it. The first way is to change your theme. This changes the underlying HTML formating structure. The second way is to leave the theme alone and change your CSS. If you are running a blog hosted on WordPress.com, then the only way to customize your theme is to buy the CSS editing upgrade, choose a base theme, and then use CSS to redesign it. The preferred WordPress theme for CSS designing is Sandbox because it gives you so many things to play with.

Internet Duct Tape is hosted on WordPress.com using the Sandbox theme and a custom CSS design by yours truly. If I can find the time, I will be participating in the contest.

Win Prizes for Your Sandbox Theme

The creator of Sandbox is running a theme design competition with monetary prizes. The pot is getting pretty big right now, and the top six designs can win between $50 to $750 US. Even if you’ve never tried your hand at designing CSS before, this is the perfect time to give it a shot.

People Are Talking About It

More coverage about the competition can be found at

weblogs tools collection: “I thought it was a good time for a new theme competition—or rather a “designs” competition. It has been around two years since the last successful WordPress theme competition (participants of the competitions in 2006 will roll their eyes and would include me).”

wank: “I’m hoping this’ll be as successful as last year’s Style Contest, and that Automattic will be as generous with their support as Six Apart were with theirs. (Matt has already thrown in $500 prize money, which is a good start, but a little linkage wouldn’t hurt.) “

Adam: “Scott’s organizing a wordpress design competition, purely in CSS. which means it’s open to:
* wordpress.com users
* anyone who can use CSS, since PHP and javascript won’t be judged”

Small Potato: “Conveniently for Scott’s Sandbox theme and WordPress.com’s Custom CSS Upgrade service, WordPress.com users will not be left out of the competition because Sandbox will be added to WordPress.com’s collection of themes. By the way, you can enter as many designs as you want. Surely, that’s not because this competition wants to promote Sandbox even more, but because entering multiple designs will give you a better chance at winning.” (read the comments)

Binary Moon: “And what do you have to do for the money? All that’s required is for you to design a skin for the sandbox theme. You don’t need to do any php or html, it’s entirely css and image based.”

Jeff Atwood at Coding Horror has been doing a series on website speed optimization hacks after one of his posts when viral (to a ridiculous level) last week. Daniel at DailyBloggingTips is starting up a “speed up your site” series today with even more tips. Needless to say I’m feeling the peer pressure to fix some of my site speed problems.

If a website takes longer than 1-2 seconds to load then most people give up on it, so doing what you can to make your site faster (and your readers happier) is in your best interest.

Thanks for the review. These have really helped a lot in not only solidifying my knowledge of the template system, but getting rid of these damn bugs too. What you said about ChaoticSoul is really flattering, since I hold it so dear… I might have to fix the little annoyances that you and timethief are finding so it can be the best theme there is. ;)

Also, I’ll be trying to make my wordpress blog the place where I store all major theme updates that don’t fit onto the .com blog, so keep your eyes there too.

I wouldn’t be surprised if the recent spout of theme releases is related to Bryan leaving, and why there was a name error with the 281 theme by Paul Stamatiou and Neil Patel (plug: I subscribe to both of their blogs — they’re excellent).

UPDATE: Nope, not an error. This is Eli Foner’s extension of 281 called 2813.

Bryan has this to say about his departure:

Automattic and I are parting ways. Thinking about it now, I see the reason being a more fundamental one. The way I work just didn’t fit with their expectations. I could get into how the expectations for designers and programmers differ, or how using Trac to measure output might not be the best way to track my progress. Honestly, that would do nothing for the situation. It was an awesome four months working with some of the smartest minds in the business. I know they’ll get far.

I wish him luck with his future endevours, and I’ll be keeping my eye on his work (when looking for CSS ideas to steal).

These are the steps I follow for painless web publishing. I’ve been writing on the Internet since 1994, and these habits have become second nature to me. I recently introduced a friend to writing on the web, and it was interesting watching him hit problems I never would have because of the habits I’ve formed.

This is a guide for the technical issues of avoiding formatting problems, not the specifics of writing good articles. The goal is to generate human readable HTML code. If a person can read your HTML code and understand it, then every web browsing software will be able to.