Work

This is part 5 of a ‘watch me build a site’ series of posts. Part 4 | Part 3 | Part 2 | Part1

Last week i said i’d be customizing the design and layout of hotelsrevealed.com. I have the bones of the site actually in place but now i have to make the site look custom built and unique. Design is very important and should not be underestimated… that said, simple is always better and simple means less work for me, so this design is gonna be very simple…

I’m working with a wordpress theme called simpleX. In my appearance tab in my wordpress dashboard, i click on ‘editor’ and that brings up all of my theme files. My main concern will be style.css – that file controls the vast majority of the site’s layout and style.

To add the logo, i had to replace one line of code in the file called header.php. Here’s how my header ‘div’ looked before;

<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<span><?php bloginfo(‘description’); ?></span>
<div id=”searchdiv”><?php include (TEMPLATEPATH . ‘/searchform.php’); ?></div>
</div>
</div>

And here it is after….

<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><img src=”/logo.png” alt=”logo” /></a></h1>
<span><?php bloginfo(‘description’); ?></span>
<div id=”searchdiv”><?php include (TEMPLATEPATH . ‘/searchform.php’); ?></div>
</div>
</div>

The bits in bold were all i changed. I also added my logo.png file to my main root directory using filezilla (an ftp client). If that sounds complicated, don’t worry, it’s not. It’s just like moving folders and files around on your home PC – not rocket science.

I’m not going to go through everything i edited line by line (i’d be here all day), but in a nutshell i just went through style.css and edited the existing colours, with the help of adobe kuler to help me find colours that complimented each other.

So here’s how it looked beforehand….

Here’s how it looks after…

It’s not going to win awards, but it looks different and unique. That’s the important thing. I don’t have hours to be burning away writing a custom coded template, so this is a quick and dirty way for me to get results fast. It’s like the McDonalds of web design. Cheap, fast, but you don’t want to be doing it too often otherwise you’ll become lazy and reliant on it.

Anyway, that’s the design taken care of. Took about an hour Tomorrow, i’ll be adding some content so the site will really start to take shape… I seem to be flying through everything but that’s just because it would take me forever to write out line by line what i’m doing and what changes i’m making…