Archive for the ‘Web Design’ Category

Controls Institute Redesign

Friday, February 25th, 2011

blog-screenshots

The Controls Institute approached me to redesign their website. When I first looked at controlsinstitute.org I could see why. The navigation on the left is unnecessary since it has some of the navigation items from the top navigation. Going through the site I noticed a lot of wasted space and the use of 3 columns on all the pages limiting the amount space that can be used for the design.

I simplified the site with one navigation and a hover effect that lets the user know what page they are currently on.

roll-over

I also put all of the conference information on a single page but left the conference sponsors on the bottom of the non ECCM pages to make other companies jealous.

< jealousy >
sponsors
< / jealousy >

The redesign brightened up the site, made the information easier to access and a lot more logical plus the client was very happy.

Customizing A WordPress Theme for Designers

Friday, July 17th, 2009

I’m not a programmer, I’ve tried coding but coding and I don’t mix. I wanted to learn to use WordPress as a Content Management System so I set up this blog to learn the WordPress basics.

Customizing a theme was a lot easier than I had thought. You don’t have to know PHP to customize a theme, a working knowledge of HTML and CSS is a must though.

Step 1: Install WordPress

Go to WordPress.org, download and install WordPress or check if your webhost has WordPress avaialble for download like mine.

fantastico-wordpress

Step 2: Copy the default theme

Using an FTP program like Filezilla go to the wp-content/themes directory. Make a copy of the default directory and rename it. I named mine craig, very original I know.2-ftp-screen

Step 3: Customizing the theme

All the files needed to display your blog are now located in the new directory. There are a lot of files but it’s easy to figure out. There are four basic files, the header, footer, index and sidebar.
layout

WordPress pulls the individual php files to make the blog.
I edited the header file and added in my own HTML and attached my style sheet. I deleted a lot of the PHP code that displayed the name of the blog since I want the header to have the same navagation as the rest of my site.

code-screenshot

Same with the footer, I deleted some of the PHP code, added in my own HTML and attached my style sheet again.

footer-screen

The index.php page is where your entry will be displayed again, I added some HTML attached my stylesheet and moved the PHP code for the sidebar so it would be inside my site wrapper.

index-1

index-2

Once you’ve edited the four files above you have a basic blog, I found attaching my style sheet to the rest of the PHP files helps them look like the rest of the site.

If you’re trying to learn WordPress install it on your own site and play around with the files, it helped me learn a lot.