Magento

I’m a store owner and hack designer, so this is hard for me but it is probably easy for a lot of your CSS wizzes out there.

The QUICK ACCESS menu (Login, My Cart, etc) has divider images between each item and the last entry in the menu doesn’t have the divider to the right (it has a different attribute).

It would be great to be able to have the same kind of dividers on the horizontal Nav Category Menu, and not have the divider to the right of the last category (far right).

I’ve figured out how to add the divider images, but not to do the LAST thing with the menu.

Could someone please post instructions on the change in the code needed to pull this off? I’m sure that many people other than me will want to do this, so although this will definitely help me out, I think it will also be great for the community at large.

Thanks ahead of time!

ul li:last-child{color: green}

This is a proposed selector, it works in firefox 3 beta 5 at the moment, it doesn’t work in IE 6 work and I’m pretty sure the same is true for 7.

Normally you’d have to solve this with php, count the results, loop through them and apply a certain style as long as $i is lower than or equal to the amount of results minus one. The product listings work like this, you might want to check that code.

it’s also possible to run javascript function to add these classes after html is there, see js/varien/js.js:111 function decorateList

Well, so far it looks like maybe the solution isn’t so easy. Like I said, I’m a store owner, no a developer/designer so the php/java solutions are obviously way beyond me.

I was hoping it would be more simple. I wonder why Varien thought it was a good idea to incorporate the dividers into the footer and the quick access menu but not the category nav menu.

it’’s visually very unappealing to have a horizontal menu with no way to graphically separate the items.