Q&A: WordPress, Blogging, and More

Surely the first of many Question and Answer posts I will do in the days to come!

Lately I’ve been getting a lot of comments, tweets, emails about how I do things around OSN and thought perhaps I should open the floor if you will, so that I can not only help YOU, but maybe share some stuff that you didn’t think about!

Ask as many questions as you want specific to WordPress, blogging, design, CSS, XHTML, coding, plugins, photography, etc. I will do my best to answer your questions, share tips/techniques, plugins I use and how I’ve tweaked them on Friday. The more questions you ask, the better!

How to do a Basic 3-Column Footer

The first question I am answering (from the blog entry, Q&A: WordPress, Blogging, and More), comes from Dayze. The question is as follows:

I really like the layout of your site; it’s simple but pretty :) I’m always finding alternate ways to make a 3-columned footer so I hope you can share

Now you can do this one of two ways. The first would be using floats to just float each column next to each other (which is what I will be sharing), or what I am currently using is absolute positioning (granted I have room for a 4^th column but not sure what I want down there yet).

Float Method

Add this code to your CSS (cascading style sheet):

.floatleft {float: left; margin: 0 20px 0 0; width: 200px;}
.clear {clear:both}

Add this code to your footer:

<div class="floatleft">
<h3>Heading</h3>
All sorts of awesome footer goodness
</div>

Of course you can change the width, the margins, etc. Add that chunk of code three times or less… or more… depending on how many columns you want. Once you finish adding all your divs, add this last div and it should be all awesome!

<div class="clear"></div>

{View a Demo}

This technique works for a three column blog design, for a large header/sidebar, whatever you want to have multiple columns.

I would appreciate your feedback on this tutorial!

Answers to Your Questions {Part One}

Since some of the questions asked on my entry, Q&A: WordPress, Blogging, and More, are small enough that they do not require a full blog entry, I thought I would answer a few of them right away!

#1 From Damita

I would like to know how you added an image to the footer of your RSS and how you do the stay up to date bit

I use a plugin for adding information to the bottom of my rss feed. It’s called Rss Footer and is very simple to set up and use. However you can go overboard and really turn your feed into something annoying with too much unneeded stuff crammed into the bottom of your feed. So proceed with minimalism in mind.

As for my “Stay up to Date” area, it’s simply doing the same technique as my tutorial shows for doing a basic three column footer, except I customized it with a wider width and only did two columns. I went through and added the Sociable plugin to the left side and added my twitter and rss links to the right. I used two plugins to display the twitter follower count and the rss subscriber count (you have to be using FeedBurner.

#2 From Lisa Marie

I absolutely love how you get yours and the kidlet’s eyes to pop in your photos. I’ve always wanted to know how to do that. I know it’s probably not so easy with brown eyes, but I’d like to try. What’s the trick that everyone is so not willing to share?

Personally I try not to do TOO much to the eyes when processing from RAW to JPG. Having a lot of natural light helps. In photoshop a way to brighten/lighten the eyes is to either dodge the iris or use an overlay layer set to 75% and use white for the color and a round brush and again, “paint” over the iris only. I also suggest the Pioneer Woman’s Photoshop Actions which has an eye action to make it a bit faster.

#3 From Maya

How do I add the Google Reader to a WP.com account? I’d love for people to be able to follow my blog that way. And, can I change from a 2 column to a 3 column format without totally destroying my blog?

You do not add Google Reader TO your site, however a good idea is to have in a nice bold area (perhaps with an image) a link to your RSS feed for people to add/discover/subscribe to using google reader. In WP.com example, generally it’s http://username.wordpress.com/feed.

Yes you CAN change from a two column to a three column design quite easily. In your WP.com dashboard go to Appearance -> Themes and in the search box enter the name of the three column theme you would like to use or preview. I would suggest: Twenty-eight Thirteen and Grid Focus.

I will try to answer more of your questions later this week!

Answers to Your Questions {Part Two}

I have so many questions to answer still, so I am going to address some of the smaller ones yet again before tackling the larger ones.

Future Entries

• How I do my comments page
• The plugins I use and why I love them

#1 From Caity

Second, I was wondering if you would share about your links page. Do you set it up via WordPress somehow or did you code it yourself? I love how it is set up and I have seen other people set it up similarly.

I do not use the built in WordPress bookmarks feature, I may do it soon but right now I hand-code the links page. To set it up like that I use the same technique as the Three Column Footer tutorial. I use two div’s instead of three and have them in an unordered list. I styled the list with CSS so that I could add the checkmark on the visited links. The CSS I use for the checkmarks is as follows:

#linkspage a:visited:after {
   content:  "\2713 ";
   padding-left: 10px;
   font-size:18px;
   font-weight:bold; color: #3f3b30;
}

#2 From Dez

How do you get your alternating comments to be rounded? Would it ever annoy you if I suddenly asked you for CSS help on twitter?

LOL it would NOT annoy me if you asked for CSS help on Twitter. I love to help people out!

As for the rounded comments I know a lot of people wonder about that. It’s quite simple and uses a bit of CSS3. To any element you want rounded (does not work on images), just add this to your CSS!

.round {
background-color: #e5e2d8;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
}

That’s all for round two. I will try and get up the entries about my comments page and plugins this week. If you have any specific questions related to those two topics, feel free to leave it in the comments!