I want a 2px border around each item and their description

Hi everyone
This is the first post that I managed to do the way I think is right. If it's not please forgive a newbie.

I have used "column_layout_grid_v_1_3_6" and it worked great! However,
I would like to have a 2px border around each item and their description. Where would I go to change this? I have looked in stylesheet.css and can not find anywhere that is obvious. I'm sure it's just that I don't know what I'm looking for.

Can someone please tell me what to change, the correct syntax to do it, and what document it's in?

I would really be grateful!

Thanks in advance.

Can you share a URL where you're trying to do this?

Try adding a border to the productListing-data class in your stylesheet.css. Add it down at the bottom of the stylesheet if it's not there already. Something like...

.productListing-data { border: solid 2px red; }

should get you started. I don't have the column grid mod installed so I can't test it for you, but I see that class is used in their code.

If that styles the whole row instead of the individual products, then use your Firebug or Developers Tools browser add-in (you have one or both of them, right?) to discover which class to add the border to.

HTH

Rob

Thank you both for answering! You have no idea how much I appreciate it.

the url is: http://grafix.triplemoonranch.com/hp_zencart/index.php?main_page=index&cPath=8

Thank you chuck for offering to take a look and check it out! Please let me know what you think.

And yes rstevenson I do have both tools and in firebug I can see the class but could not find it when I went to the stylesheet.. and had no idea where to add code
I am trying your suggestion right now and will let you know how it turned out.

Thank you for responding, for a while there I thought no one would.

rstevenson:

Try adding a border to the productListing-data class in your stylesheet.css. Add it down at the bottom of the stylesheet if it's not there already. Something like...

.productListing-data { border: solid 2px red; }

should get you started. I don't have the column grid mod installed so I can't test it for you, but I see that class is used in their code.

If that styles the whole row instead of the individual products, then use your Firebug or Developers Tools browser add-in (you have one or both of them, right?) to discover which class to add the border to.

HTH

Rob
rstevenson thank you for your assistance you have no idea how much it means to me, I kinda thought no one was going to reply.

yes I do have Firebug and I can see the class and it gives a pretty good idea where I would need to work...but I can not find that class in the stylesheet nor did I knonw where to add code or how to go about it (as in what syntax I would need to use)

I am trying your code right now and will let you know how it turned out.
Again Thank you so much.

chuck:

Can you share a URL where you're trying to do this?

Thank you Chuck this is the url:

http://grafix.triplemoonranch.com/hp_zencart/index.php?main_page=index&cPath=8

Again thank you for your help!

Suzanne

triplemoonranch:

rstevenson thank you for your assistance you have no idea how much it means to me, I kinda thought no one was going to reply.

yes I do have Firebug and I can see the class and it gives a pretty good idea where I would need to work...but I can not find that class in the stylesheet nor did I knonw where to add code or how to go about it (as in what syntax I would need to use)

I am trying your code right now and will let you know how it turned out.
Again Thank you so much.

ok adding the code you gave me at the bottom did not create any change good or bad.

I do have Firebug, below are 3 lines of code that show in firebug and when I mouse over them each line highlights one of my columns. these 3 lines are directly under the line

which when I lay the mouse over highlights the entire product area all 3 columns at one time.

I hope this helps you help me.
Again thanks for taking the time for the newbies who are walking through this thing almost blind.

Suzanne

rstevenson:

Try adding a border to the productListing-data class in your stylesheet.css. Add it down at the bottom of the stylesheet if it's not there already. Something like...

.productListing-data { border: solid 2px red; }

should get you started. I don't have the column grid mod installed so I can't test it for you, but I see that class is used in their code.

If that styles the whole row instead of the individual products, then use your Firebug or Developers Tools browser add-in (you have one or both of them, right?) to discover which class to add the border to.

HTH

Rob

Rob! I'm doing one huge happy dance!
The code you gave me got me close enough that with the help of Firebug I came up with this line:

.centerBoxContentsProducts { border: solid 1px #c9b495; }

Which did the trick.... now I just have to figure out how to get a little space between the graphic and the border... I kinda have an idea about how to accomplish this but not sure it's correct.

:clap: Thank you for your help it was just enough to get me started and still make me think for myself!

Suzanne

Hi Suzanne,

Glad I could nudge you in the right direction.

Just a note about that 32.5% width. Any "style= something " in the HTML code is coming from the php files. That is, it's hard-coded into the files in some way, or maybe, if you have a choice of number of columns in this mod, it's calculated and then set in the code.

This makes it difficult to make a margin between those blocks using a declaration in your stylesheet. I see you've made a margin around the images though, so maybe a margin around the blocks isn't necessary. But if it is, I'd PM the author of the mod, or visit the mod's support thread here on the forums to see what can be done about it.

Very nice looking site by the way. :clap:

Rob