Icon

How to turn GridFocus WordPress Theme Into 2 Columns

I love the GridFocus theme by Derek Punsalan found at 5thirtyone.com.

The only thing I would change, is i’d rather it be even more simple as in two columns instead of three. I’m not expert with WordPress, so take this simple 12 step program for what it’s worth. Here’s my quick guide to removing the third column. I hope it’s the correct way to do it:

1. Log into your dashboard, go to Appearance, then Editor.

2. Select the stylesheet, style.css

3. Find #mainColumn about half way down.

4. Change the width from 420px to 640px. Save.

5. Select Single Post, single.php.

6. Comment out the second column found at the bottom, Example:

Original:

<?php include (TEMPLATEPATH . ‘/second.column.post.php’); ?>

New:

<!—<?php include (TEMPLATEPATH . ‘/second.column.post.php’); ?>—>

7. Save

8. Select Main Index Template, index.php.

9. Repeat Step #6 and #7.

10. Select Page Template, page.php.

11. Repeat Step #6 and #7.

12. When using widgets, put them in the Shared space.

Getting text to vertically center align in a div tag

I had a little trouble today getting text to vertically align in the center of a div.

There is a “vertical-align” element that I’ve used before but it doesn’t appear to work on IE6 for a div.

I played around with setting the divs line-height to the same height as my div and although that did work, if my text was longer than one line it broke everything.

What eventually did work was setting the div’s height and div’s min-height to the same amount. I then put the text inside a span and used position:relative, top:50%, margin-top:-0.5em.

Example:

div.middlealign
{
min-height:200px !important;
height:200px;
}
span.middlealign
{
position:relative;
top:50%;
margin-top:-0.5em;
}

I found the tip along with some other methods here: http://www.student.oulu.fi/~laurirai/www/css/middle/