Professional CodeIgniter

Chapter 5: Building a Shopping Cart

127

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.

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

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.

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, paragraphs, and links.

/* default css */

body{

background-color:white;

font-family: Arial, Verdana, sans-serif;

margin:0;

padding:0;

}

#wrapper{

width:800px;

❑

❑

❑