customizing style of manufacturer sidebox

[k4satin]

I'd like to add a css style to adjust the font, line-height, etc. in the manufacturers sidebox scroll menu. Where would I insert the style in my templates? I'm assuming it would go in ...templates/sideboxes/tpl_manufacturers_select.php, but I can't quite figure out where to insert it to affect the text listing and not the placement of the box itself.

Thanks.

[kuroi]

Styles shouldn't be inserted into the templates. They belong in the stylesheet. The changes that you are describing could go almost anywhere in the stylesheet as they are unlikely to clash with any existing styles.

[k4satin]

Thank you for your response, but I guess I didn't phrase my question clearly enough. I had every intention of using the stylesheet, but the template needs to contain a tag referencing the stylesheet. I know that zencart comes with many built-in tags that can just be modified in the stylesheet, but I did not see one unique to the manufacturers scrolldown box. When I use Firebug to view the html/css source, the current style is coming from generic form tags. If I alter those, it affects all forms on my site. Hence, the need to insert a new tag into the template.

[stevesh]

Try something like #manufacturers.leftBoxContainer or #manufacturers.sideboxContent

If you'll add the manufacturer sidebox to your site, it'll make it easier to figure it out.

[k4satin]

Try something like #manufacturers.leftBoxContainer or #manufacturers.sideboxContent

If you'll add the manufacturer sidebox to your site, it'll make it easier to figure it out.

I have the manufacturers sidebox on my site already. The line in tpl_manufacturers_select that would link to what you're talking about is:

$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent centeredContent">';

So, what exactly would that look like?

#manufacturersContent .sideBoxContent .centeredContent {
}

or something? It seems like all the combinations I've tried aren't having any effect. Even when I'd tried to remove this string and replace it with my own custom id, it didn't seem to affect the text, only the placement of the box.

[k4satin]

I found something that works to some extent, but it still doesn't really do what I want. I used:

#manufacturersContent.sideBoxContent form, select, input {

}

This is fine for controlling the font color and size, but what I really want to adjust is the line-height. All the options are just shoved too close together and it makes it harder to read them. I only have the visible box showing one line, reading, "Please select..." or something like that. The other 100+ options are in the pull down menu. I've tried adjusting each of the following and gotten the indicated results:

padding: box gets bigger (padding added inside box) pull down not affected
margin: box moves (margin applied outside box) pull down moves in line with box
height: box gets bigger, but not as big as with padding (height applied to size of box) pull down not affected
line-height: nothing happens
font-size: font gets bigger - pull down gets bigger accordingly
color: changes font-color - both initial selection and throughout pull down
background-color: changes bgcolor in box & pull-down

Is the line-height of the pull down menu built into the zen_draw_pull_down_menu code itself? I did take a look at where this comes from (functions/html_output.php), but I don't think I want to touch anything there without specific instructions from somebody "in the know."

Any other suggestions to increase the line height in the pull down menu?

[kuroi]

Ah. I think I see now what you're trying to do - and unfortunately it can't be done.

Many aspects of form elements, such as the select about which you are talking, are not controllable by CSS, or only partially so. Web standards consider them to be part of the browser interface rather than the content being displayed in the browser. As a result they are left for each browser to style and you're in the hands of the browser writers as to how much control they choose to give you via CSS (and it varies from browser to browser).

If you think that sounds illogical and a little bizarre, then many people would agree with you. I can just about see some logic in it (when I'm feeling particularly generous), but it's damned inconvenient, and I'm afraid that if you're going to use selects like this, you'll have to take them much as you find them.

[k4satin]

Thanks for your explanation. I made the font size a little bigger, so that helps some. At least now the font style & color match my other menu.