[solved] Global css for putting borders on block boxes ?

[nadiap]

Is there a global element in the css to create a thin 1px border around the boxes in the left & right columns eg: Categories, Information, Wish list etc., ?

 

or do I have to to to each block and edit various css files to do this?

 

Also, which element allows me to put a box around the main centre column (content area).

 

Thanks for some help please - don't need code, just a hint as to where to find in the css files to edit what I need.

[vekia]

sure, open global.css file and create new class:

 

.block_content{
border:1px solid black;
}

 

save file and upload to the server. Now you can refresh your page.

 

it will work of course if you use default template

[nadiap]

Thank you for replying ! Worked perfectly on the default theme that I'm using

 

One small design problem... I have the featured box on front page - but this border is cutting into the Price link.

 

I should know this, but haven't written css for a few years, but it's all coming back slowly but can I know write an attribute, so that this border is display: none just for the Featured Products block?

 

Update: I just added a bit of padding to the boxes,and it looks better, but would still love to know how to NOT have a border on the Featured Products area only - if you can help

 

.block_content{

border:1px solid #E1E1DA;

padding-left: 4px;

padding-right: 4px;

padding-bottom: 10px;

}

Edited January 7, 2013 by nadiap (see edit history)

[Joel Bardsley]

You can target the Featured Products block with its id - featured-products_block_center, so try:

 

#featured-products_block_center {

border: none;

}

[nadiap]

Thanks Joel - I actually don't mind the border on that block box, but the products are now popping out of the box if there's more than 3 in a row... so may remove it your way - or at least I'll try

 

I also need to remove the border around the my_account box in the footer - but just can't find where to change that individually - any idea?

Edited January 7, 2013 by nadiap (see edit history)

[Joel Bardsley]

this should work for the my_account box:

 

.myaccount .block_content {

border: none;

}

But I was wrong about the featured products above, this works though:

 

#featured-products_block_center .block_content {

border: none;

}

[nadiap]

Thank you !! worked perfectly

Edited January 7, 2013 by nadiap (see edit history)

[Joel Bardsley]

Yeah I tested those in global.css and they worked.

[vekia]

yeah! i marked this topic as solved. Hope it helps for other users who want to add thin border to the blocks in own shop!

[nadiap]

yeah! i marked this topic as solved. Hope it helps for other users who want to add thin border to the blocks in own shop!

 

You beat me to it - I was late in coming to mark it as solved and yes, all the advice here helped !

[Zen_j1]

When I add border as discussed in this topic, in case of special block the price and name of product goes below the image which is supposed to be on right side of image. How should I make this correction please help.