Icon

Make Images Look Like They Do In The WordPress Editor!

I love how images look in the new wordpress editor found in v2.6+. But when I hit publish, they looked pretty weak. Here, I thought it was just how the theme I used wanted images to look very minimal. Turns out it’s something you’ll need to add to the majority of your theme’s stylesheets. Glad I looked it up before I went messing around with my theme.

Further reading: Floating Images within the post in WordPress 2.6 (wprocks.com) Thanks Sadish!

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/