how to modify blocks

Hello,

Your CSS is wrong, that's why :)

It's probably confusing because there are more than one class attached to each of those attributes, but here's what it should look like for your example:

<div id="block-search-0" class="block block-search"

If you were overriding the "id" attribute, you would do it like this (note the # sign, which is CSS is for the id attribute and is called a selector):

#block-search-0 {
overflow:hidden;
width:230px;
margin:0 0 15px;
padding:0;
}

If you wanted to use the "class" instead, you would do it like this (note the "." before the class name, which in CSS stands for the class attribute):

.block-search {
overflow:hidden;
width:230px;
margin:0 0 15px;
padding:0;
}

You only need to pick one of these, and it should work.

There is never a space in the name of a CSS class or selector. If you see a space between a class that means that two classes are being applied to the element, which is normal in Drupal.

In the above example the "block" part of class="block block-search" means that both of these CSS classes (if they exist) would be applied:

.block { whatever CSS }
.block-search { whatever CSS }

Hope that helps you :)

wow, looks like we posted at the same time :)

glad you figured it out.

If you check the block using Firebug (which I highly recommend for learning this stuff), you'll see this is the style that is applied to the sidebar title for a left sidebar layout:

#sidebar .left .title{background:#fff url("images/bg-sidebar-left.jpg") no-repeat;}

Again, your code appears wrong, as #block-menu-165 is an id that is applied to the block itself. With CSS your classes and selector must be written in perfect order, or it's not going to work. You tried:

#sidebar .left .title #block-menu-165 {
background:#fff url(../isky/images/bg-sidebar-leftusr.jpg) no-repeat;
}

The above is wrong because it says that the #block-menu-165 is inside of <div class="title">, which is not the case. Switching that around and fixing the image path should work:

#sidebar .left #block-menu-165 .title {
background:#fff url(images/bg-sidebar-leftusr.jpg) no-repeat;
}

Try downloading firebug. Learning CSS takes a lot of trial and error, but if you stay with it, you'll get it :)

You're welcome :)

Have fun with Firebug!

I am trying to remove the border around the search block.

I added the css below to styles.css but the border still shows up.

#block-search-0 {
overflow:hidden;
width:230px;
margin:0 0 15px;
padding:0;
}

Got is working ...

Just added the code below to the styles.css file.

Thanks Firebug!

#block-search-0 .content {
border: none;
}