1. Create a new a new theme and in the process learn something about CSS and web design.
2. Move my blog from the free wordpress.com hosting site and onto a paid host and in the process learn something about website hosting.

The result is the site you viewing now. Not too shabby for a first attempt. If I don’t say so myself.

Web Design with CSS and XHTML

I was getting a bit tired of the my current  theme at the time and thought the time was ripe for a bit of a change. But none of the free wordpress themes I found appealed to me. I wanted a theme that was easy on the eyes, had fluid columns and was widget ready. After trawling through hundreds of themes, I decided to try my hand at creating one myself. And the more I thought about it, the more excited I became. The prevailing wisdom on the web though, is that website design is not for amateurs. You need to consider SEO, readability, colours, and in some countries their are laws on accessibility as well. But nothing ventured, nothing gained.

First, I needed a good book.

I’ve always loved the Head First series of books with their fun and witty format. I tend to stick with books that tell story and have lots of colourful pictures. Luckily for me, they have a book on web design.

Head First Web Design (A Brain Friendly Guide) ISBN: 0596520301 ISBN-13: 9780596520304

Of course, even with a book that’s entertaining to read, I still get a little impatient try things out. So after  reading a first few chapters, I started sketching out a few designs. I settled on a three column design with a header across the page and a menu below that.

Once I had and idea of what I wanted, it was time to put the design into practice. That’s where the Head First book falls short. It discusses web design but it does teach you website creation. Head First has a different book on that.

Luckily, a friend loaned me a book on CSS.

Stylin’ with CSS: A Designer’s Guide (2nd Edition) (Voices That Matter) ISBN: 0321525566 ISBN-13: 9780321525567

As with the previous book, I went through the first few chapters and learnt the basics of CSS. The syntax was easier and intuitive. But when it came to advanced layout techniques, it was a nightmare. Browser incompatibilities, box model, quirks mode -  I could not get the hang of it fast enough. But Mathew James Taylor does have the hang of it. He has tutorials on how to create quirks mode free layouts in CSS. I tried to following one of them but there’s some serious dark magic in there. So I ended up using his 3 column liquid layout instead.

Once the CSS was in place, it was just a matter of playing around with colours and tweaking things here and there, referring to the two books above where necessary, and converting the final design to a wordpress theme.

When I was satisfied I had a good enough design (for me at least) , I started looking for a place to host the site.

Web Hosting with Servage

You never quite realize how many web hosting companies are out there until you do a search for one. And each one of those companies have there fair share of horror stories. So the best way to find a reliable hosting site is probably word of mouth. A friend of mine was hosting his website for the past two years on Servage and had no issues. I decided to give them a try.

Servage offers the following

• 750 GB of Space
• 7500 GB Monthly Data Transfer
• Unlimited emails
• Free domain or domain transfer
• Unlimited domains
• Autoinstaller for the most popular web scripts

And many more features you can read about on their website.

Once I had my account, I used the one click autoinstaller feature to install wordpress and setup the mysql database. WordPress version 2.6.2 was installed so I used the wordpress update feature to update the installation to version 2.7.  Simple an easy!

Next, I exported my blog from the wordpress.com site and imported into my http://asifhamza.com site. All the content was now on a different server, but there were still a few issues that needed to be ironed out.

The Case of the Missing Sidebars

For some reason my sidebars were not visible on the new site. After some fruitless googling I finally figured out the problem. My custom wordpress theme had a file called SideBar.php which describes how to render widget ready sidebars. The sidebars where showing up when I tested on my windows vista laptop since Windows filenames are not case-sensitive. But my site was hosted on Linux where filenames are case-sensitive. The wordpress theme engine was looking for sidebar.php not SideBar.php. A quick file rename solved that problem.

The Case of the Missing Images

The second problem I found was that all the images were still linking back to the old site instead of the new even though they had been successfully imported. The old links were still embedded in the relevant posts. While I could have gone to each post and manually edit the urls, I used an Update Urls from Velvet Blues. 20 seconds later, the problems was solved.  As an added bonus, I found some helpful articles on blogging, wordpress and web design on their site.

The  Case of the Unco-operative Permalinks

The final problem I encountered was that my permalinks were no longer working. From experience I know that this is usually caused by the apache mod_rewrite plug-in not being enabled on the web server. A quick search on the Servage’s wiki and I found out that mod_rewrite could be enabled by enabling .htaccess support. All links were working within the hour.

Now that everything is up and running, I think it looks pretty good. Not matter what anyone else says! I spent the next week signing up for Google analytics and Google webmaster tools and looking for nice plug-ins. I also ending up with a better appreciation of the power of CSS. Its amazing what you can do with xml and a stylesheet and I don’t think I’ve even scratched the surface.

Related posts

• No related posts.