[SOLVED] Category module, creating buttons

[neeno]

Hello everyone!

 

With CSS modification of default prestashop theme i'm trying to achieve following (check out the categories menu):

So basically i want to create active buttons.

The state visible in the screenshot was achieved by modifying the blockcategories.css in such manner:

 

/* Block categories */
#categories_block_left .tree { padding-left: 0.5em }
#categories_block_left .tree li {
border: none;
/*padding-top: 5px;
padding-left: 15px;*/
margin-left: 0;
font-weight: bold;
height: 21px;
/*font-size: 13px;
line-height: 13px*/
background-image:url('../img/button.jpg');
background-repeat:repeat-x;
background-position:center;

 

Now ofc this doesnt behave as a button since its li background. So i was wondering if anyone could give me a hint on how to and where to modify css in order to get these buttons.

I'm working with image 2px's in width and i repeat it on x-axis.

 

Thank you all in advance!

[Snade]

add, display: block; to the #categories_block_left .tree a

 

it will make link the whole block, not only the text.

 

Try it, and tell me if it works for you, and do you need further help

[neeno]

Great, awesome answer thank you very much. Indeed this is now solved.

Ofc next logical question is: how to make hover work ?

 

Here is the link to current situation:

http://razvoj2.zef-design.com/

 

I tried making hover work like this (i used only inverse background image):

 

#categories_block_left .tree a:hover {
text-decoration: none;
background-image:url('../img/gumb-kategorije2.jpg');
background-repeat:repeat-x;
background-position:center;
}

 

but it seems this isnt it...

[VendiloSanMarino]

hello,

if you want we have a module for insert automatic product in home page from category:

FORUM PRESTASHOP

 

best regards

[Snade]

neeno,

the code you use at the moment on the site is working, but the hover effect is the same img and you probably dont see it.

 

Also, you have added the hover to the a(wich is the link) but you need it on the li (where is the current background, without hover)

 

Make the :hover on the li element, and test it with background: #ff0000 for example.

[neeno]

Thank you again. Fixed it

Fine tuning for this menu left.

 

Have a nice day everyone!