help with categories block please. thank you

[simpson7647]

hi all, im after a little bit of help regarding my categories block.

Currently i have each category surrounded by a box which now i dont like.

I had a fiddle with it and have got rid of the box but theres some horrible mess to the left of the block shown in the picture below:

http://img141.imageshack.us/i/helpyq.png/

Im simple looking to clear up the mess and create a simple line all the way through to seperate the categories.

many thanks and i look forward to your replies,

kind regards,

Ryan

[simpson7647]

someone help please

Many thanks

[MrBaseball34]

post url to your store so we can see the code.

[simpson7647]

Thanks for the reply.

It's www.protectandenhance.co.uk

Reply here and I'll activate it live

Thanks

[MrBaseball34]

allow ip 24.153.214.55 for maint.

[simpson7647]

just done it mate,

should work with your ip.

Let me know if it doesn't

thanks

[MrBaseball34]

line 95 in global.css, remove the

border-left: 1px dotted gray;

[simpson7647]

Many thanks indeed! works a treat.

Now the only other question i have is:

What do i do so that a line in inserted between each of the different categories.

I would like the line to not be too the very edge but just short of it either side.

Similar to the one below


aaaa | category 1 |
aaaa | - - - - - - - |
aaaa | category 2 |

[MrBaseball34]

The original global.css has the CSS for the categories block like this:

/* Category tree (i.e. in sitemap) */
div.tree_top {
   background: url('../img/sitemap-top.gif') no-repeat -1px -3px;
   padding-left: 24px;
   padding-bottom: 5px;
   padding-top: 3px
}
ul.tree, ul.tree ul { list-style-type: none }
ul.tree li {
   padding-left: 1.2em;
   border-left: 1px gray dotted;
   background: url(../img/sitemap-horizontal.gif) no-repeat left 10px;
   margin-left: 1em
}
ul.tree a { padding-left: 0.2em }
ul.tree a.selected { font-weight: bold }
ul.tree li.last {
   background: url(../img/sitemap-last.gif) no-repeat -12px -2px;
   border: none
}
span.grower { cursor: pointer }

Is yours the same?
DO you have the images above?

[simpson7647]

yeah thats exactly the same as mine

thanks

[simpson7647]

bumppp, thanks

[MrBaseball34]

without taking a closer look, I can't tell.

[MrBaseball34]

So, you want a divider between each category? Can you draw a better representation and enclose it in

tags?

[simpson7647]

hi there, ill give it a go

|   Category one   |
|   -------------  |
|   Category two   |
|

So i want a clean line dividing each of the categories ( i know mines dotted but clean straight line please), but i dont want it too the very edges if you know what i mean as shown.


Many thanks

[MrBaseball34]

The div#categories_block_left ul.tree li CSS in your theme

div#categories_block_left ul.tree li {
 background: none repeat scroll 0 0 transparent;
 font-size: 12px;
 font-weight: bold;
 line-height: 22px;
 margin-left: 0;
 margin-top: 5px;
 padding-left: 12px;
}

Change it to this:

div#categories_block_left ul.tree li {
 border-color: -moz-use-text-color -moz-use-text-color #DDDDDD;
 border-style: none none solid;
 border-width: medium medium 1px;
 font-size: 12px;
 font-weight: bold;
 line-height: 22px;
 margin-left: 0;
 margin-top: 5px;
 padding-left: 12px;
}

[MrBaseball34]

You really should purchase this: PrestaShop 1.3 Theming – Beginner’s Guide

https://www.packtpub.com/prestashop-13-theming-–-beginner’s-guide/book

It will help greatly with your questions.
Also, visit http://w3schools.com/css/default.asp to learn more about CSS.

[simpson7647]

thanks for the info, i'll give it a go now.

Cant afford to waste 25 pounds tbh otherwise i would, but many thanks indeed.