editing div id="indexCategories" class='centerColumn'

[firefly9]

I have firebug and I can see from the on-line display that the element I want to edit (to get a border around the center column) is
<div id="indexCategories" class='centerColumn'> . Editing this element with Firebug does the trick.... ie puts the border on the center area. But I have no idea how to pick the correct .html file to pull into Dreamweaver to edit. (I now have a heavily customized template)...and FireBug is definately selecting the html and not the CSS.


I could perhaps just edit a CSS for the same effect, but a whole bunch of classes are grouped and I don't know how to add a rule for just the .centerColumn. And if I create one will it get applied upon upload, or just screw things up, AND do I delete the duplicate class that is within the group.

Verson: 5.2.14 (Zend: 2.2.0). No upgrades done yet.

[stevesh]

Do you want the border just on the index page, or throughout the site ?

#indexCategories {border 3px solid #ff0000;}

or

.centerColumn {border 3px solid #ff0000;}

Either way, I think you want to do this in CSS and not in the HTML.

We may need a link to the site if it's been customized very heavily.

[firefly9]

Site is http://sewlutionsmd.ca/zencart/
And I want the border on all the pages (around the center column.) As you will see the left "New Products" column is not nicely defined as separate from the middle column so I would like to put a border around the middle which then defines it from BOTH the left and right columns.
As per my other question: can I simply add the .centerColumn {border 3px solid #ff0000;} (if this is the one I want) and if so do I then delete it from where it is grouped with the others... or just add the new bit of code to the stylesheet.css??
thanks

[stevesh]

I just added that rule to the bottom of the stylesheet. I usually add a comment like 'everything after this point added by stevesh' so I know what I've done.

If it's just separation you're looking for, you could experiment with margins, too:

.centerColumn {margin: 0 2em 0 2em;}

or, add the border to the sidebox columns:

#navColumnOne {border-right:1px solid;}

#navColumnTwo {border-left:1px solid;}

Lots of different possibilities.

[firefly9]

I used your #navColumn code and it looks great. Thanks for your help.