Changing CSS Style For attribute drop down

[Dan1234]

Hi,

I am really new to ZenCart and PHP, php really confuses me as Im used to html so sorry about the noob question.

I am trying to change the css on the choice menu, for flavour. All's i want to do is put padding on it, but not effect any other parts of the website that use SELECT.

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back">[B]<?php echo "\n" . $options_menu[$i]; ?>[/B]</div>

The above in bold is the part of the css style I am trying to change.

This converts to

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-1">Flavour</label></h4>
<div class="back">
<select name="id[1]" id="attrib-1">
  <option value="4">Banana</option>
  <option value="3">Choc Cookie</option>
  <option value="2">Strawberry</option>
</select>

I cant seem to locate the select name="id[1]" id="attrib-1" bit, so I can edit it and put my own CSS style into it, can anyone tell me where it will be?

[stevesh]

A link to your site will help us help you.

[Trinity14]

Make a new class for the item you want (h4 class="optionName back") to add your css to, then add it to your stylesheet.

includes/templates/YOUR_TEMPLATE/css/stylesheet.css

for example:
.choiceMenu { padding: 1em;} instead of h4 class

Hope that helps,

[lat9]

Hi,

I am really new to ZenCart and PHP, php really confuses me as Im used to html so sorry about the noob question.

I am trying to change the css on the choice menu, for flavour. All's i want to do is put padding on it, but not effect any other parts of the website that use SELECT.

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back">[B]<?php echo "\n" . $options_menu[$i]; ?>[/B]</div>

The above in bold is the part of the css style I am trying to change.

This converts to

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-1">Flavour</label></h4>
<div class="back">
<select name="id[1]" id="attrib-1">
  <option value="4">Banana</option>
  <option value="3">Choc Cookie</option>
  <option value="2">Strawberry</option>
</select>

I cant seem to locate the select name="id[1]" id="attrib-1" bit, so I can edit it and put my own CSS style into it, can anyone tell me where it will be?

A link to your site will help us help you.

As stevesh indicated, a link to your site would really help, but in answer to your last question, you can add some padding to that specific <select> statement by adding something similar to the following to the bottom of your /includes/templates/YOUR_TEMPLATE/css/stylesheet.css file:

#attrib-1 { padding: 5px; }

Since the Flavour attribute is option ID#1, it will always appear with id="attrib-1". Within the CSS, you identify that you want to apply a style to an id using the # character, so that bit of CSS indicates that wherever in the HTML there is an id="attrib-1" that the specified style is to apply.

[Dan1234]

Really appreciate the replys guys, was really helpful, got it done now!