Category Archives: Tutorials

How to: Create Full (100%) Width Header/Footer with Centered Content (Updated)

May
28

16 Comments - LEAVE A COMMENT

Update 1/15/2012 – Please see the latest release of 100% Full Width Header/Footer with Centered Content.

I originally wrote a tutorial on how to “Create Full Width Header & Footer With Centered Content Using CSS” almost three years ago (yipe!) when I was working on one of the many redesigns of my site. Looking back on it now (since it’s one of my most popular articles), I see it’s slightly different as to how I have been doing it recently. Both methods work, both can be used, but I find my current method a little bit “cleaner”.

How to: Getting Lightbox and Lazy Load Working on WordPress (EASY)

May
27

One Comment - LEAVE A COMMENT

When I rebooted my site I decided to install the jQuery Lazy Load plugin in conjunction with Lightbox 2 – the lightbox plugin I had been using for years. I noticed shortly after activating the Lazy Load plugin though that Lightbox 2 had stopped working.

How To Make Aardvark Add-on Work With Firefox 3!

Jun
20

7 Comments - LEAVE A COMMENT

Aardvark Plugin for Firefox I’m a huge, huge fan of the latest Firefox release. But I was really, really disapointed that a LOT of my very favorite (and most used!) plugins were incompatible. The plugin I felt most lost without was Aardvark, which I use every single day, practically all day long to aid me in development, editing and design.

Aardvark is a simple little Firefox plugin that when activated (right click and choose “Start Aardvark”) lets you highlight each elements on the page with a red border – not only that, a tab appears on the border with the element and id/class that is associated with it.

This plugin is critical for me (along with Firebug) when diagnosing layout problems.

Rounded Corner Boxes With Expandable Heights Using CSS and Images

Jun
9

16 Comments - LEAVE A COMMENT

Rounded corners are a great design element to escape from the blocky/boxiness a lot of web designers fall victim to. I remember the first time I created my own rounded corner box using Photoshop and HTML/CSS. What a thrill :) A lot of people shy away from it because it SEEMS a lot more difficult than it really is.

I’m going to show two ways to create this effect using Photoshop (or the graphic editor of your choice) and HTML/CSS. There are other ways to create this effect using just CSS – but I really am not a big fan of it because it creates a lot more empty divs than this method. Yes if images are off you will lose this effect – but I’m willing to sacrifice that.

Like I said I’m going to demonstrate two ways to accomplish this. The first is using just a flat rounded corner image with no other effects. The second will have a box with a drop shadow, border and gradient. :) So let’s start easy!

Create Full Width Header & Footer With Centered Content Using CSS

Jun
7

21 Comments - LEAVE A COMMENT

Update #2 1/15/2012 – I have update this version once again, please see the latest release of 100% Full Width Header & Footer with Centered Content.

Update!: I’ve published a new version of this method that is even EASIER. If you would like to learn more please see How to: Create Full (100%) Width Header/Footer with Centered Content (Updated). This method is still valid and feel free to use it if you like.

There are probably a million different ways to do this, but I’m going to show the way that I have preferred to do it, combined with my favorite centering position method.

So the simple way to do this is as follows: