making small changes to Categories block....

[Nick20000]

hi. i want to change my categories block and remove the arrow on the left and the small icon on the right that drops the categories. and one last thing i have been trying to space out the text a bit as shown in the picture, but i can't seem to change it. i have added a picture with the changes i would like to do.

 

http://www.shopmost.co.uk

 

thank you.

Edited February 24, 2014 by Nick20000 (see edit history)

[Nick20000]

i can't seem to do what i want in the picture.

[Joel Bardsley]

Hi Nick,

 

Go to global.css in your theme's css folder and try changing this section to as follows:

 

Line: 1989

#categories_block_left li a {
  display: block;
  padding: 7px 11px 6px 22px; /* padding: 5px 11px 4px 22px; */
  font-size: 12px;
  color: #2166a2;
  /* background: url(../../../modules/blockcategories/img/arrow_right_2.png) no-repeat 10px 8px transparent; */
}

Instead of removing the unwanted code I've commented it out. The above should remove the arrows on the left and increase the space between the menu links

 

To get rid of the icons to the right:

 

Line: 2004

#categories_block_left li .OPEN, #categories_block_left li .CLOSE {
  display: block;
  float: right;
  margin: 7px 10px 0;
  height: 9px;
  width: 9px;
  /* background: url(../../../modules/blockcategories/img/icon/open-close.png) no-repeat 0 -9px; */
  cursor: pointer;
}

Again I've just commented out the background image.

 

Hope that helps.

Joel

[Nick20000]

hi. it does not work. i have no space at the bottom and top of the menu text. like in my picture my links are not lined up with the title text. i tried this already that's why i asked for help just can't seem to get it right.

 

ty.

[Joel Bardsley]

Here's how it looks to me with the changes: http://gyazo.com/deff7206782d2edff3e6336e4abeb223.png

 

The only difference to my post above is the 22px in the padding is changed to 11px to line up with the 'Categories' heading.

[Nick20000]

the space for the top of the links and the bottom there is no spacing for me viewing it in chrome.i want more space top and bottom like in my original picture. when trying to add more space top and bottom the links move apart too much space from each other.

 

thank you.

Edited February 25, 2014 by Nick20000 (see edit history)

[Joel Bardsley]

Ah ok I see now:

 

Add some css at the bottom of global.css for ul.tree, such as:

 

ul.tree {

  padding: 5px 0;

}

[Nick20000]

hi joel.

 

that worked great. how would i do this the same for the informations block?

 

ty.

[Joel Bardsley]

Hi Nick,

 

Modify the css I suggested above to something like this:

ul.tree, #informations_block_left_1 ul {
  padding: 5px 0;
}