Changing Background color of columns

[hawthorn]

How can I change the Background colors of the left and right columns? I've got so used to designing without tables, I'm lost ;-))

[oschellas]

Have a look the knowledge base for changing design and layout.

[hawthorn]

Have a look the knowledge base for changing design and layout.

 

Thanks, i did, but couldn't see anything relevant there.

[oschellas]

If you have a look at this section from my previous post, you'll understand how and where the right and left columns are called. If you want a different background color for the entire column, just apple a style to the table cell where the column is showed.

[hawthorn]

If you have a look at this section from my previous post, you'll understand how and where the right and left columns are called. If you want a different background color for the entire column, just apple a style to the table cell where the column is showed.

 

Thanks ! I'm in Paros BTW, so expect some questions on the Greek Language pack ;-)

[oschellas]

Nice island, questions are welcome!

[Rachael w.]

I just did this last night, I went this route:

 

   <td width="<?php echo BOX_WIDTH; ?>" valign="top" bgcolor="EFF8E5"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="0">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->

 

It was easy to change every page to add the bgcolor with the find and replace in frontpage (just use a big chunk of code so it picks up every page).

 

Forgot to mention, this is on every page in the main catalog file which uses that particular line of code.

[homeandfamily]

What I have done is what oschellas recommended, but here is the code if you need it. Make the following change to every main catalog file:

 

For the left column, change:

 

<td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->

 

to:

<td class="left-column" width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->

 

And then add to your stylesheet page:

.left-column {
 background: #EFF8E5;
}

 

For the right column, change:

<td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->

 

to:

td class="right-column" width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->

 

and add to the stylesheet page:

.right-column {
 background: #EFF8E5;
}

 

By doing things this way, you only have to make the changes to all the main files once and you can easily change the color through the stylesheet if you need to. You will also have the option to make other changes later easily (like adding padding, etc)