Isabelle Roughol – The J junkie

The tribulations of a young journalist and writer looking for work

Design night note

with one comment

Finally, I’m done designing. It took me months (with breaks lasting weeks) to figure out how CSS works. One thing that drove me crazy is when I wanted to imitate something off a Web site, and they didn’t explain how they did it. So here’s a few pointers on things I did.

BASIC DESIGN
This blog is powered by WordPress. I used the DigitalPop template and customized it. All you need is to get hosting somewhere, load WordPress on it (it’s a mysql database that only takes a double-click to install) and find a template you like. Remember that graphics and color schemes are easily customizable; what matters most when choosing a template, if you don’t know much CSS/html, is that it has the basic structure you want (number of columns, vertical or horizontal navigation, etc…). The rest, you can play with. If you choose wisely, you probably won’t have to touch much html, only CSS.
My changes were actually fairly minor. Here’s what the template looked like before.
Digital Pop

LEARNING HOW TO CODE
If you want to learn CSS and html to the point of having employable skills, I’m sure there are plenty of classes and books out there that will get you there. I used none, and I would not dare say in an interview that I know CSS. I’ve simply treated CSS like any foreign language; if you stare at the sentence long enough, it starts making sense. Start by saving all the original files to a separate folder. Then have two tabs open: one with your site, one with your theme editor. Change a line of code in your theme editor and see what happens on your site. Like any language, CSS has grammar. Before long, you’ll figure it out.
Learn the power of copy-paste to repeat elements you like. That’s how I did the three linked images up there.
To help you out, here’s a complete CSS guide.

GRAPHICS
It’s all Photoshop work, and I didn’t use the fanciest functions in it. Start with free stock images you can find on various sites (like http://www.sxc.hu) or with your own. Please don’t steal the work of hard-working, lowly-paid photographers.

COLOR SCHEME
One easy way to go is to choose a dominant picture for your site and get the colors for your page off that photo. Every color used here is from my top banner. You can use the software ColorSchemer, which has a 15-day free trial, or the pic 2 color Web site, all free.

WIDGETIZING YOUR THEME
Honestly, I can’t believe I’ve managed to do this. You might want to just get a widget-ready theme. Truth is, it only took me 5 minutes to make it happen… just 3 months to understand the instructions given by WordPress.

More questions, ask me. Welcome to the new J junkie.

Advertisements

Written by Isabelle Roughol

Friday, 9 November, 2007 at 05:34

One Response

Subscribe to comments with RSS.

  1. Dig the new layout!

    Wynn

    Saturday, 10 November, 2007 at 17:31


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: