Results 1 to 6 of 6
  1. #1
    Join Date
    May 2006
    Location
    Texas
    Posts
    565
    Plugin Contributions
    4

    Default Styling The Attribute Dropdown Box

    I need to stylize each element in the attribute drop down list. I noticed by looking at the source that there is an option box, and each element is there but there isn't a class or id tag for any of them. See the code sample:

    Code:
    <div class="wrapperAttribsOptions">
    <h4 class="optionName back"><label class="attribsSelect" for="attrib-11">Size</label></h4>
    <div class="back">
    <select name="id[11]" id="attrib-11">
      <option value="69">4&quot; ( $4.00 )</option>
      <option value="70">6&quot; ( $4.00 )</option>
      <option value="71">8&quot; ( $5.00 )</option>
    -----snip-----
    </select>
    
    </div>
    <br class="clearBoth" />
    </div>
    How would I go about adding a class to each of the options, so they're like this?

    Code:
    <option class="69" value="69">4&quot; ( $4.00 )</option>
    <option class="70" value="70">6&quot; ( $4.00 )</option>
    That way, I can style each element individually (each one will be a different color.. client request). Here's something similar to what I'm going for: http://www.outfront.net/tutorials_02...unkyforms5.htm (scroll to the last dropdown on the page)

    Thanks

  2. #2
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,761
    Plugin Contributions
    9

    Default Re: Styling The Attribute Dropdown Box

    Use the override system and try that it will either be correct or break
    Zen-Venom Get Bitten

  3. #3
    Join Date
    May 2006
    Location
    Texas
    Posts
    565
    Plugin Contributions
    4

    Default Re: Styling The Attribute Dropdown Box

    Quote Originally Posted by kobra View Post
    Use the override system and try that it will either be correct or break
    I know that :) but I'm wondering where do I put in the code so that it has that class with each option?

  4. #4
    Join Date
    May 2006
    Location
    Texas
    Posts
    565
    Plugin Contributions
    4

    Default Re: Styling The Attribute Dropdown Box

    quick bump

  5. #5
    Join Date
    May 2006
    Location
    Texas
    Posts
    565
    Plugin Contributions
    4

    Default Re: Styling The Attribute Dropdown Box

    OK, got it. File to edit is includes/functions/html_output.php (though since it can't be overridden, I would suggest be careful during upgrades)

    Around line 501 you should have the following code:

    Code:
    for ($i=0, $n=sizeof($values); $i<$n; $i++) {
          $field .= '  <option value="' . zen_output_string($values[$i]['id']) . '"';
          if ($default == $values[$i]['id']) {
            $field .= ' selected="selected"';
          }
    Change it to:

    Code:
    for ($i=0, $n=sizeof($values); $i<$n; $i++) {
          $field .= '  <option class="' . zen_output_string($values[$i]['text'], array('"' => '&quot;', '\'' => '&#039;', '<' => '&lt;', '>' => '&gt;')) . '" value="' . zen_output_string($values[$i]['id']) . '"';
          if ($default == $values[$i]['id']) {
            $field .= ' selected="selected"';
          }
    Two notes: 1) It provides a different output than I wanted above, because for some reason you can't style a class if it's all numbers. So class="70" can't be styled.. don't ask me why.. I couldn't do it for some reason. Maybe theres a way to do it and I just overlooked it

    2) ALL dropdown forms will have a class now, and the class will be whatever the text is for the option. So, for example, lets say I have the following:

    Code:
    <option value="70">Zencart</option>
    <option value="71">Red</option>
    etc
    It will now read:

    Code:
    <option class="Zencart" value="70">Zencart</option>
    <option class="Red" value="71">Red</option>
    etc
    For more control over it I would suggest prefixing it with something so the classes don't conflict with something that may already exist.

  6. #6
    Join Date
    Dec 2007
    Location
    brighton UK
    Posts
    40
    Plugin Contributions
    0

    Default Re: Styling The Attribute Dropdown Box

    cant get the code to work - have you missed out a comma or quote in your php?


 

 

Similar Threads

  1. v150 Styling the 'Customers who bought this product' center box
    By OLCS in forum Templates, Stylesheets, Page Layout
    Replies: 11
    Last Post: 11 Sep 2012, 04:07 PM
  2. I want the Attribute dropdown to show the final price?
    By joeguy44 in forum Setting Up Categories, Products, Attributes
    Replies: 5
    Last Post: 19 Jun 2012, 02:35 PM
  3. Moving Attribute dropdown box
    By themadhattermd in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 18 Nov 2010, 01:20 PM
  4. styling manufacturer and alphabetical dropdown
    By Newbie76 in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 30 Jan 2010, 09:42 PM
  5. attribute dropdown box
    By stumped in forum Setting Up Categories, Products, Attributes
    Replies: 2
    Last Post: 25 Mar 2007, 06:36 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR