Professional CodeIgniter®

5.4. Polishing the Look and Feel

At the very beginning of this project, some choices were made to use a very bland template and bland CSS to get the ball rolling. The emphasis of this book is on web-site development as opposed to design, but you'll have to address look and feel at some point, even if you hire a freelance designer to come to your aid. Now it's time to spice things up. This is your opportunity as a web developer to start expressing a little more aesthetic taste and artistic sensibility in creating the site.

5.4.1. Uploading the Logo

The first thing you need to do is add the Claudia's Kids logo (naming it logo.jpg) into the /images folder. The logo has a "beach feel" with a color palette inspired by the sand and surf. It's illustrated as in Figure 5-8.

Figure 5.8. Figure 5-8

When you drop the logo file into a picture editor, you see that it is using the following color values:

• The word Claudia's is #14B8B8.

• The word Kids is #EFDDA8.

• The background gradient runs from #D4F7F7 to #14B8B8.

5.4.2. Updating the CSS

You decide to use this palette throughout the rest of the site, adding in a few darker variants on the sandy color (like #C98C21), and dutifully update the CSS. In the code listing below, the changed CSS is in bold. Notice that even the message class, which is used to give the visitor important information, is also updated. There are also new rules for headers, ...