Weekend Project: Faux Columns with Custom CSS

CSS is a great tool for adding customization and flexibility to your blog's design. However, it does have its limitations. One limitation you may have run into yourself if you use the Theme Builder looks like this:

Notice how the border to the left of the sidebar stops prematurely? This is because the border can only extend as far as the content. This is the expected behavior with CSS but it doesn't look great. How can we get around that?

The solution is surprisingly simple - use an image behind the columns to fake the look of the background colors and borders extending beyond the content. A List Apart introduced this concept years ago and called it Faux Columns. Today, we're going to adapt that idea to work with your TypePad blog.

First, you'll need a background image. For reference, the image we're using for our example is available here. Go to Blogs > Design > Theme and see how wide each column in your design is. Your blocks of color should be those same widths, with borders between if you'd like. The overall width of the image should match the width of each column in your Theme added together. You can use solid colors, gradients, patterns, etc. It's up to you but keep legibility in mind!

Next, upload the image in Library > File Manager. You'll need the URL for the image later.

Now, go to Blogs > Design > Custom CSS and add this code:

#container-inner { background: transparent; }

This will remove the existing color from behind the container so your image will be able to show. You'll also need to make the existing colors behind each column transparent. The exact code for this depends on which layout you've chosen. For a two column layout with the sidebar on the right, the code would look like:

.layout-two-column-right #alpha-inner { background: transparent; }
.layout-two-column-right #beta-inner { background: transparent; }

Finally, you'll add the code to put your image behind the container, repeating vertically.

#container {
background: #FFFFFF url(http://example.typepad.com/bg-gradient.png) repeat-y;
}

The result should look something like this:

Notice how the border and background behind the sidebar extend beyond the content? This concept allows for a lot of flexibility in design from simply having a border extend all the way down the page to elaborate background patterns. Have fun!

Comments

[jeff reine]

well that does look nice!

[Agnes]

It does I agree.