Moving the Sidebar

What you're about to see is a great demonstration of the power of using style sheets and templating the HTML. With just a few coding changes in a single file, the entire Island Travel structure will be transformed on every page of the site.

Basically, I'm just going to tell the sidebar region and the content region to switch the relationship that the current style sheet rules are giving them. In the default theme style sheet, these rules are far apart in the coding, so I've brought them together in the top half of Figure 29-5 and put the new coding below that for ease of comparison.

Figure 29-5

The original CSS at the top is telling the content area (narrowcolumn) to float to the left of the sidebar. I've switched the styling to make the content area do the opposite, as well as change padding to match the new relationship.

I've also taken the opportunity to make the content area a bit larger and the sidebar a bit smaller (I also adjusted the background image so that the light blue sidebar is narrower). You can see the results of the CSS changes on the live site in Figure 29-6.

Figure 29-6

If you compare this with my original concept for the Island Travel site, you can see that it's a bit different. Part of that is because I wanted to illustrate how to maintain the original default theme look while changing it enough to suit my needs. I also decided on a light brown background for the site instead of the green. When it came down to it I found the green too overpowering.

0 0

Post a comment