[Solved] CSS to override categories block footer image

[BrianPhilipson]

Hi,

I'm trying to change the image displayed at the foot of the Categories block. The image displayed is block_footer.gif but I don't want to change the actual graphic since it is used else where.

It is defined in the div.block section:

/* Default block style */

div.block {

   margin-bottom: 1em;

   width: 191px;

}

#left_column div.block, #right_column div.block {

   padding-bottom: 6px;

   background: transparent url('../img/block_footer.gif') no-repeat bottom left;

}

For the exclusive block it is overriden (I believe) like this:

/* block exclusive */

#left_column div.exclusive, #right_column div.exclusive {

   background: transparent url('../img/block_exclusive_footer.jpg') no-repeat bottom left;

}

For the myaccount block it is overriden (I believe) like this:

/* block myaccount */

#left_column div.myaccount, #right_column div.myaccount {

   background: #f6dce8 url('../img/block_footer_myaccount.jpg') no-repeat bottom left;

}

The categories block seems to be structured a bit different. I can override the background colour like this:

div#categories_block_left .block_content { background: #143b64 no-repeat top left; }

But copying the two examples above and replacing "div.myaccount" or "div.exclusive" with "div#categories_block_left" as below doesn't seem to work, it still displays block_footer.gif:

#left_column div#categories_block_left, #right_column div#categories_block_left {

   background: #f6dce8 url('../img/block_footer_category.jpg') no-repeat bottom left;

}

How is it done?

Thanks,

Brian.

[BrianPhilipson]

I must have had a typo in my code, I just copied and pasted the above into my global.css for one last try and it worked!

Thanks me!

Brian.

[Patric]

If your problem is solved, please add [solved] at the beginning of your topic's title by editing your first post !
Thanks.

[keno974]

Thanks Man for your help

Your solution works fine !