RSS

Stylin’

by Nathan on Mar.15, 2009, under Miscellaneous

Stylin.jpg

I’ve got style, I’ve got grace, Rita Hayworth ate my face. Who in the hell is Rita Hayworth, and why does she eat faces? Never mind. Not important. So about a week ago, I figured that I should finally backup my blog and upgrade to Wordpress 2.7. That was easy enough. Then I figured, while I’m at it, why not give my blog a facelift and change my theme? All that gray in my old theme was starting to drive me crazy. I found the Pixeled theme in the Wordpress Theme Directory, and I loved it. Pixeled is by far the most popular theme in the directory right now, so as an added bonus, I will no longer feel the pressure of being original. Now if by chance you have been reading my blog, you may have already figured this out, but let me just come out and say it… I’m anal. I need everything to be just perfect, even things no one will ever notice. So I started the process of modifying the Pixeled theme to fit this here personal blog of mine, and it turned into a nightmare. See the picture above, this is where I stayed up until 1 or 2 am every night for the past week staring at CSS code. Also, those books in the picture, not helpful at all.

As you probably know, CSS stands for Cascading Style Sheets. CSS is basically a way to define the style (like font size, color, etc…) for different elements on a web page. The cascading part refers to the fact that you can have elements within elements, and the style cascades through these elements. While I’m sure that makes CSS very powerful or something, it’s also a huge pain in the ass. Sometimes all you want to do is change the color of some text, so you go to change the style, but there are like 10 possible places the style could be set. You change one style command and either nothing happens or all sorts of things change that you didn’t want to change. It will drive you mad, especially if you are an anal control freak.

I’m being too negative though. Let’s look at the positive. Check out my new theme, isn’t it pretty. It’s so aeroglassy or something. I love it. I’m sure it will make my writing better too. Also, I shouldn’t be so hard on CSS, it gets easier with practice. I’m not a software engineer, so what programming I do is pretty much always a hack. The next time I go about changing my theme, I’m going to try and find some type of visual CSS editor. Those exist right? Here are some helpful tools I found while updating my theme:

  • Hex Color Code Generator - This is a nice webpage that lets you pick out a color, and then it gives you the hex code for that color.
  • Theme Test Drive - This is a Wordpress plugin that let’s you see one theme, while regular blog visitors see another. This is useful, because you can play with a new theme without everybody else seeing how much you suck at CSS.
  • Google - Google is a something called a search engine. What that means is, you type in stuff, and it gives you answers. So if you don’t know what some random php command does. Just type it into Google. I did this a lot. I was going to suggest the Wordpress Codex, but it is easier to just use Google to find the right spot in the codex for you.
  • View -> Page Source - It took me a while to figure this out, but it is often hard to know what style goes with what element on your page. If you view the page source from your browser, you can see exactly what the browser sees. I wish I had realized this sooner, it would have saved me a lot of time.

I hope I didn’t scare anyone away from starting their own self-hosted Wordpress blog. It really is a lot of fun, and the theme editing thing isn’t that bad. Especially if you’re, you know, not anal. If you want to check out my old theme for comparison sake, you can see it here. Okay, now if you will excuse me, I have some some sleep to catch up on.

2 Comments for this entry

  • Janet

    Haha, well I do a lot of custom wordpress themes in my job so I am familiar with this. Another useful tool is the Chris Pedrick Web Developer plugin for Firefox. It’s free and the outline > current element option on it will help you isolate a style on a certain item you are wanting to change.

  • Sonya

    I love the new theme! And I love even more your honest description of how working with a self-hosted WordPress blog can be a pain in the butt, yet a rewarding learning experience. And thanks for the Theme Test Drive link - I was wondering how you went about the makeover. I’ve been meaning to set something up so that I could do major styling changes on the side, but hadn’t gotten to it yet. But this tool looks like it could meet my needs. BTW, most software engineers have to do “hacking” too - especially when it comes to front-end user interface stuff.

Leave a Comment