Add Bullets to items in leftBoxContainer?

[zcnb]

Is there an easy way (i.e. using stylesheet.css) to add bullets to the items in leftBoxContainer (e.g. Categories, Information, etc.)?

Or must I hack the PHP code in order to accomplish that?

[zcnb]

Re: Add Bullet to Information List

barco57, you are a genius. Thank you!

[gjh42]

This will work for many of the sideboxes, which are built as <ul> lists. You can also use list-style-position: inside; to have the list indented and avoid the problem of bullets falling outside the container. There are several options for list styling, which you can learn more about at www.w3schools.com.

The categories sidebox is different, in that it is built as a string of <a> links, and not <ul> list items. It is possible to style

#categories a {display: list-item;}

though this has other undesired consequences for element spacing.

#categories br {display: none;}
may sufficiently address the spacing problem.

The most complete solution is to install Categories Dressing, which builds the categories as <ul> list items. You can turn off whatever features you don't need and keep the list styling.

[zcnb]

Thank you, gjh42, for your tips.

The following tip was very educating to me:

The categories sidebox is different, in that it is built as a string of <a> links, and not <ul> list items. It is possible to style

#categories a {display: list-item;}

though this has other undesired consequences for element spacing.

There is another problem with this, however, which is inheriting this to the Information box as well.

Also, if I want the bullet in a different color, is there a way to accomplish that using your method?

#categories br {display: none;}
may sufficiently address the spacing problem.

I read somewhere that {display: none;} is a big no-no for Google SEO. Is this true even in an innocent use like this?

[gjh42]

I have heard that also, but it is a widely used technique. If it really was always bad for SEO, I would think that professionals would uniformly warn against it. And why would Google try to suppress all use of a standard CSS property value?
It may depend on what is being hidden, and nobody knows exactly how Google decides those things; but a <br /> tag has no content to be relevant to search engines.

The "#categories a" selector limits the effect to the categories sidebox, and cannot affect the information box in any way.

CSS does not yet allow specifying a different bullet color, but you can make a bullet image of whatever color and shape you want and use that as

list-style-image: url(../images/yourbutton.gif);

[zcnb]

Thanks again for your tips. The only problem I have is with this:

The "#categories a" selector limits the effect to the categories sidebox, and cannot affect the information box in any way.

For some reason, in my web site, the "#categories a" selector actually leaks to the Information sidebox.

I used Firefox's "Web Developer" add on to track the elements in question and, sure enough, it appears that #informationContent is a "child" of #categories:

html > body #indexHomeBody > div #mainWrapper > table #contentMainWrapper > tbody > tr > td #navColumnOne .columnLeft > div #navColumnOneWrapper > div #ezpages .leftBoxContainer > div #categories .leftBoxContainer > div #information .leftBoxContainer > div .xboxcontent > div #informationContent .sideBoxContent > ul > li > a

Is this by Zen-Cart design? or simply a bug in my own CSS file?

[gjh42]

It is a bug in your PHP code. All of your sideboxes are children of the previous one:

div #navColumnOneWrapper >
div #ezpages .leftBoxContainer >
div #categories .leftBoxContainer >
div #information .leftBoxContainer > div .xboxcontent > div #informationContent .sideBoxContent > ul > li > a

which indicates a flaw in one of your template files. The sideboxes are not being closed properly.

[zcnb]

It is a bug in your PHP code... The sideboxes are not being closed properly.

You are absolutely correct. It wasn't easy to find the bug but I eventually nailed it down: It was the closing </div> in tpl_box_default_left.php that was missing.

Case closed. Thank you!