(SOLVED) Where do I edit font, size and color of main links in the categories box

[aa1joe]

Hi

Under Categories in the left column, where do I change the size and color of font for the main categories so it can be different from the sub menu?

I know it's probably in the css but I just cant find which one to edit.

Can someone point me in the right direction.

Thanks

[rocky]

It is the following section on line 1154 (in the default PrestaShop v1.3.1 theme):

/* Block categories */
div#categories_block_left ul.tree { padding-left: 0.5em }
div#categories_block_left ul.tree li {
   border: none;
   padding-top: 5px;
   padding-left: 15px;
   background: none;
   margin-left: 0;
   font-weight: bold;
   font-size: 13px;
   line-height: 13px
}
div#categories_block_left ul.tree li.last { padding-bottom: 0 }
div#categories_block_left ul.tree li ul { padding: 2px 0 0 }
div#categories_block_left ul.tree li ul li {
   padding: 1px 0 1px 15px;
   background: none;
   font-size: 11px;
   font-weight: normal
}
div#categories_block_left ul.tree li ul li.last { padding-bottom: 0 }
div#categories_block_left ul.tree li ul li ul li {
   padding-left: 15px;
   font-size: 9px
}
div#categories_block_left ul.tree a {
   padding-left: 0;
   color: #374853
}
div#categories_block_left ul.tree a:hover { text-decoration: none }
div#categories_block_left ul.tree a.selected {
   color: #488c40;
   font-weight: bold
}

Change the li block for the top-level categories, the li ul li block for the second-level categories and the li ul li ul li block for the third-level and deeper categories. You can change the selected category colour in the a.selected block.

[aa1joe]

Hi

I must be missing something here. I tried to make the changes in global.css ( in the candy art theme) as you specified and (I also tried the default global.css after...) then uploading and refresh the page too, nothing changes.

In the categories box I want to make the font bigger and change color for the top level categories. If I can do that the client will be happy with that. Right now if you click below and look the top level and sub menu are the same size therefore it's confusing.

http://lacefrontwigs2wowu.com

If you can help a little further I would appreciate that.

Thanks

[rocky]

That theme has its own customised category module that is different than the default category block. You will instead need to edit themes/Candy-Art3/css/superfish-vertical.css:

/* Block categories */

div.block_vertical h4 {
background:transparent url(../img/block_header.png) no-repeat scroll left top;
color:#000000;
font-family:Georgia, Arial, Sans-Serif;
font-size:16px;
font-weight:bold;
height:34px;
line-height:2em;
padding-left:27px;
padding-top:6px;
text-transform:uppercase;
}

#left_column div.block_vertical, #right_column div.block_vertical {
background:transparent url(../img/block_footer.png) no-repeat scroll left bottom;
padding-bottom:30px;
width:230px;
}

div.block_vertical  li {
background:#ededed url(../img/block_bg.png) repeat-y;
list-style-position:outside;
padding:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

div#categories_block_left_vertical li a:link, #categories_block_left_vertical li a:visited {
background:#transparent;
border-bottom:medium none;
bottom:-5px;
color:#353535;
display:block;
font-size:11px;
height:20px;
line-height:18px;
margin-left:5px;
margin-top:0;
padding-left:5px;
padding-top:3px;
text-decoration:none;
width:218px;
*padding-left:10px;
*width:213px;
*border-right:1px solid #999999;
}

#categories_block_left_vertical ul li a:hover{
color:#fff;
display:block;
line-height:18px;
padding-left:5px;
*padding-left:10px;
text-decoration:none;
border-bottom:none;
font-size:11px;
background:#FE0282;
}

You can add a div#categories_block_left_vertical li ul li block to style second-level categories.

[aa1joe]

Thanks Rocky, it worked. Your time is much appreciated.

I'm now trying to shape the sub menu and it's working fine, except for the hoover. The pink bar hoover is ok but the text is not changing to white. Do I need to add something else or take something out?

This is what I did.

div#categories_block_left_vertical li ul li a:link, #categories_block_left_vertical li ul li a:visited {
   font-size: 11px;
   font-weight: normal;
   color: #800000;
}
#categories_block_left_vertical li ul li a:hover {
   color: #ffffff;

}

Thanks

[rocky]

For some reason, the style of the first block above is overriding the second one. I'm not exactly sure why. The only solution I can think of is to change the second block to:

#categories_block_left_vertical li ul li a:hover {    color: #ffffff !important;    }

This will prevent the white hover colour being overridden. There is probably a better solution though.

[aa1joe]

This is good Rocky, it solved the problem and that will make my client happy.

Thanks for you help today. Much appreciated.

Have a good day.

Joe