Jump to content

Category block indents


CJH

Recommended Posts

When the Category block is displayed (in left column), all the categories are lined up in the block, some with a + symbol to open up to show subcategories. But when I do so, all the subcategories are in the same line (and second level and so on - all are left aligned).

 

It would be neater and easier to see the entries if each time a subcategory showed, it indented a few pixels. I've tried messing with the blockcategories.css file but cannot work out how to add lines (or where to add them) to make this happen. If I have the correct file, how can I do this?

Link to comment
Share on other sites

Thanks for taking the time. The site is still in maintenance mode, but I've taken this off for a brief period (I'll put it back into maintenance later) so it is possible to take a look, with my thanks. [edited to remove link].

Edited by CJH (see edit history)
Link to comment
Share on other sites

Sorry, I have not managed to take a look at it. Could you please take the maintenance mode off again?

This time, reply to this comment (Use the Quote button) so that I recieve an email about your comment right away.

Okay - now open again - thanks

Link to comment
Share on other sites

 

Ok,

 

try this piece of code, it'd best if you could insert it into blockcategories.css (just for any future reference)

#categories_block_left li ul li ul li {
padding-left: 10px;
}

 

Okay - I put that into blockcategories (in the theme), at the end of the file. I also cleared the cache and turned on multistore, then off to rebuilt. No difference I'm afraid.

 

To make sure we're looking at the same thing: in the Categories block top of the left column on the Home page, there are two showing: Descent and Books. Click the + for Descent and it shows 5 subcategories, which all display fine even though all are in line.  But click 'Back Issues' and these 5 sub-subcategories are all in the same left-aligh and I'd like to indent these. And clicking the next + I would like to indent the next (final) 5 further again.

 

But the code didn't change things ... I'm still grateful for the help ...

Link to comment
Share on other sites

Hi,

 

it's weird. Because it seems like Chrome is for some reason ignoring that line of code...

When I put the same piece of code inside inspector-stylesheet in the dev. toolbar it works normally.

See the attachement. Could you try placing it into global.css and turning cache off for the moment?

post-610965-0-63407800-1401984206_thumb.png

Edited by PSfever.com (see edit history)
Link to comment
Share on other sites

Hi,

 

it's weird. Because it seems like Chrome is for some reason ignoring that line of code...

When I put the same piece of code inside inspector-stylesheet in the dev. toolbar it works normally.

See the attachement. Could you try placing it into global.css and turning cache off for the moment?

Inserted at the end of global.css, cache turned off, cache cleared. No change in Firefox ... Your thumbnail shows exactly what I'm after!

Link to comment
Share on other sites

Inserted at the end of global.css, cache turned off, cache cleared. No change in Firefox ... Your thumbnail shows exactly what I'm after!

I have seen that there's one more CSS file in the CSS folder custommaker.css which does not cache and it should work. If it does not, you could send me the FTP access I could take a look at it..

  • Like 1
Link to comment
Share on other sites

I have seen that there's one more CSS file in the CSS folder custommaker.css which does not cache and it should work. If it does not, you could send me the FTP access I could take a look at it..

Thanks for trying ... Inserted code (now identical in all three locations), but no change. This feels like something that ought to have been easy, but just plain isn't for some reason. I'll need to figure out how to contact you direct to send you non-public info access though.

Link to comment
Share on other sites

 

Try to add this:

#categories_block_left li li li a{
    margin-left:10px
}

Hey - between you, that's brilliant! It now works. I pasted it into custommaker.css (though my guess it it could have gone into any of the three css files), mainly because it was open. Perfect indent for the first subcategory, so I repeated it and added a li for the next line. Perfect.

 

The odd thing is that adding the second code for margin-left made it work. I then took out the 'padding code' and it stopped. It seems that both bits of code are needed. To make it complete in case nyone else is looking for this info, here is what was added in total (I increased the indent to 20px):

 

#categories_block_left li ul li ul li {

padding-left: 20px;

}

 

#categories_block_left li li li a{

    margin-left:20px

}

 

#categories_block_left li ul li ul li ul li{

padding-left: 20px;

}

 

#categories_block_left li li li li a{

    margin-left:20px

}

 

And thanks again - I'll mark this solved by you both!

Link to comment
Share on other sites

×
×
  • Create New...