By Sms2luv on

Hi I recently installed om base theme with html5 om sub theme
I want to add borders to some of my blocks can any one give me a detailed instruction
I am new to Drupal, CSS and HTML
Video would be more appreciated

⋅ Categories: Drupal 7.x

Comments

hudo’s picture

hudo commented

You can use block class module: http://drupal.org/project/block_class

Sms2luv’s picture

Sms2luv commented

still not wokring

nevets’s picture

nevets commented

You need to add css to your themes style sheet (probably style.css). To apply to all blocks something like

.block {
  border: 1px solid black;
}
Sms2luv’s picture

Sms2luv commented

Do I need to create any new CSS file or I just have to paste this in style.css

Sms2luv’s picture

Sms2luv commented

I pasted the code in style.css still no gain
Please check my website here for any suggestions
I am using D7 with white jazz theme

Sms2luv’s picture

Sms2luv commented

You are a genius it works after clearing cache
Could you tell me how it can create different borders and background for diff blocks.

Anonymous’s picture

Anonymous (not verified) commented

Each of your blocks has classes that are added by Drupal, and you could add css styles that use those classes. However, some of those classes are long and complicated, and you can end up with a lengthy stylesheet.

I prefer to use the block_class module, then assign specific classes to the block and specifically target those blocks in my css.

For example, say you want some blocks to have a blue border and some to have red borders. First, create some css definitions like this:

.border-blue { border: 1px solid blue; }
.border-red {border: 1px solid red; }

Then you could edit the block and add "border-blue" and "border-red" to the appropriate blocks.

FYI, using a color name at the css class name is not considered best practice. I just used the color names to make it more obvious. Better practice would be to write up a plan for how many different looks you want to have and come up with a functional name, such a "normal" or "highlighted". Then your styles become:

.block.normal { border: 1px solid blue; }
.block.highlighted {border: 1px solid red; }

I hope that helps!
Anne

Sms2luv’s picture

Sms2luv commented

You are really a darling you don't know what you have done for me
I wish God would full fish all your wishes come true, thanks a ton, a million, a trillion
Please tell me where to create CSS definitio and what should I name them, tell me the location also.

For example, say you want some blocks to have a blue border and some to have red borders. First, create some css definitions like this:
.border-blue { border: 1px solid blue; }
.border-red {border: 1px solid red; }
Sms2luv’s picture

Sms2luv commented

Please help in creating CSS definitation where and how to create

prateekS’s picture

prateekS commented

Hi,

css definitions means you just copy your block's unique class name in your css file and paste in your css file(like style.css) and give border color you want.

Prateek Sharma,
Drupaler :)

Sms2luv’s picture

Sms2luv commented

Please help in creating CSS definitation where and how to create

Sms2luv’s picture

Sms2luv commented

It's really surprising to know that no one replies to forum, what's the use of this if no one responds.

Frankdog’s picture

Frankdog commented

Thanks mate, worked a treat for me!

Thanks!!!
Anonymous’s picture

Anonymous (not verified) commented

Obviously you don't know much about css so I would advise you to use the module (use the dev version, way more stable). This module will help you to modify the appearance of your site without css knowledge.

Sms2luv’s picture

Sms2luv commented

which module are you talking about??

Anonymous’s picture

Anonymous (not verified) commented

Oops sorry I forgot the link : http://drupal.org/project/sweaver

Sms2luv’s picture

Sms2luv commented

I just want to say 1 thing to you.
You are the best ! Thanks for the module.

Its simply simple theming app.