Holy crap.

I just finished restyling my entire WordPress theme. I have to say, I am exceedingly pleased with the results. The layout is now much more unified and cohesive as a whole, and everything is crisp, clean, and exactly where it should be. Yayness. ^_^

It took me about a day and a half to go through the stylesheet, figure out how everything was set up, and redesign and implement the new color scheme. No particular reason behind the blue/white, they’re just some of my favorite colors (if my Jeep’s any indiciation. )

I’m a fiend for tweaking, which is someting I expect I’ll have to overcome at least as far as IM is concerned — especially when you hear all these make-money-onliners saying “I make $20,000/mo with the UGLIEST site you’ve ever seen!” ;P

I was a webdesigner first, though, so this was a lot of fun for me, kind of like a “break” from work. xD The theme, originally titled “Dark Zen,” was downloaded from CourtneyTuttle.com, having been modified for SEO benefits. It (apparently) came from DailyBlogTips.com before that, and while it’s definately changed enough to be a standalone theme (I shall call you: Cloud), I left the credit link in the footer since the framework of the original is largely intact. Wow that was a long sentence.

The original layout was fairly solid, but there were several things I didn’t like about it.

• The header/footer were 100% width, with the content left floating in the middle. This made the entire website seem “looser,” less targeted, and just sloppy,  if that makes any sense. I wanted the site tighter, more focused, with all the emphasis on the main page and the content.
• The color scheme was muddy. Predominately composed of dark gray and white, you’d think it’d be pretty contrasty, but it was arranged so there wasn’t a lot of definition between the elements. I wanted visual punch.
• The colors and effects weren’t consistent. One of the first things I changed when I installed the theme was the link colors, but being unfamiliar with the stylesheet and WP in general I wasn’t able to apply the change to all the different anchor classes. Again, sloppy. I wanted something sleek and professional, every hair in place.
• And tying in with the above point, I was unfamiliar with the styles and how everything was laid out. I wanted total control over my design.

With Cloud, all these things have been remedied, plus I learned a crapload of new things about WordPress, php, and CSS in general. I highly recommend anyone who is going to be working with WordPress for any significant amount of time spend a couple hours/days famliarizing themselves with the layout and structure of the themes.

The best way that I’ve found to do this is to start with something basic and simple, like I did with DarkZen, and totally change the look and feel of it.

This is strictly for your own benefit, so it doesn’t need to come out perfect, or even presentable. If you spend the time to go over the entire stylesheet once, and play around with the different classes, styles, and WP functions, you’re guaranteed to develop a solid foundation of useful, generally applicable knowledge. A handful of benefits I can name off the top of my head:

• The ability customize plugins, individual posts, and any other snippets you may want to add or subtract to your site from time to time. For example, implementing advertising code in various locations (header, sidebar, post bottom, footer) and styling it appropriately. This is easily done once you know how. Even if you employ the services of a professional web designer, it’s never a good idea to be completely helpless when it comes to tweaking the design.
• If you’ve got a little more experience with design or the time to practice it, creating and distributing a free WordPress theme is an excellent way to build backlinks and reputation.

Things I Changed

I still have the old theme, so at some point I’ll reapply it and screenshot it as a “Before” picture. That said, a couple of the big changes I made to the theme:

• Redesigned the entire structure to a “self-contained” page layout, separated from the top of the browser window.
• Unified color scheme comprised of blues, white, grays, and black for emphasis. Restyled existing rouge elements to match.
• Styled headers to stand out and clearly divide the contents of the site.
• Styled comments (quite attractively, I might add. X)
• Separated Trackbacks/Pingbacks from Comments and Recent Comments (Sidebar.)
• Added the “vanishing text” to my RSS subscribe and Search form.
• Cleaned up general sloppiness.
• Made an actual “Tags Cloud” as opposed to a “Tags Tornado.”
• CSS tabs of awesomeness!

Still Have To Do

This is certainly a list filled post. All the changes I’ve done thus far have been code-based, and I’d say things are pretty well covered on that end. The last few things I plan on doing are:

1. Designing a banner image for that big empty blue square at the top of the page.
2. Designing a background image.
3. Restyling a few of the ads to match.
4. Create a favicon.
5. Rethink my Done Reddit box.
6. Fixing the styling of the Previous/Next post buttons on the blog page (Opera.)
7. Rearranging my home page.

And that’s about it on the design end. If anyone has any feedback / criticism / advice I’d love to hear it; please make use of the comment field below.

It’s also important to add, that spending this much effort on design is neither typical nor appropriate for a standard IM site (and as we all know, I am neither of those things.) I’m putting in the time and effort now, since I know it’ll pay off and simplify my work down the road. This might not be the case for you.

General familiarity with WordPress (or whatever your platform) is a good thing, but don’t let it become your main focus. When you get right down to it, the site will be a factor, but it’s not going to be what makes or breaks you. As I said before, I do recommend taking the time to get to know and understand structure of a theme and how to do some basic manipulation of it, and also to learn a little basic HTML/CSS (W3Schools.com has great free courses for this.)

Remember, though, we’re in the business of marketing here. The rest is just details.

Tagged as: Blogging, News, Tweaking, Webdesign, WordPress, XHTML & CSS

Related posts:

1. Are You Thinking Of Starting A Blog? Do You Have A WordPress Blog That Needs Freshening Up?
2. The Value Of Comments In Your Online Activity.
3. Discover How To Create Useful Blog Theme
4. Tips To Get A Google Adsense Account
5. Installing Google Adsense Into Your Blog