Results 1 to 5 of 5
  1. #1
    Join Date
    Oct 2006
    Posts
    225
    Plugin Contributions
    0

    Default Using css to change 'text' colors in options pulldown?

    In full disclosure, what I am posting here is part of a thread I started concerning spaces between attributes. Hopefully it will not be a problem to start a seperate thread as this is a seperate issue and may be able to be solved using css.

    Here's the deal, I run a decal webshop and am adding additional colors that the customer can choose from. What I'm trying to do is put a little square with the rgb value of the color name to give the customer a better idea of what their product will look like.

    I've managed to generate these little color swatches outside of the select pulldown box, but all of the little squares are black inside the pulldown. Does anyone know if I can pull some css magic (or anything really) to add the colored squares to the pulldown?

    Here's a link so you can see what I am talking about http://decaldepot.net/zencart/testing.php
    Visit my Decal website: DecalDepot.net

  2. #2
    Join Date
    Oct 2006
    Posts
    225
    Plugin Contributions
    0

    Default Re: Using css to change 'text' colors in options pulldown?

    Okay, I managed to find this:

    Code:
    <option style="color: rgb(255,255,0); background-color: rgb(0,64,0);">whatever</option>
    Which let's me change the text color and background color, but it only seems to work when you expand (press the down arrow) the select box to see all the options. After selecting a 'colored' line and clicking outside of the box, it goes back to the 'normal' colors. Can someone tell me what css is controlling that?

    I've updated the link to illustrate what's going on now:

    http://decaldepot.net/zencart/testing.php
    Visit my Decal website: DecalDepot.net

  3. #3
    Join Date
    Oct 2006
    Posts
    225
    Plugin Contributions
    0

    Default Re: Using css to change 'text' colors in options pulldown?

    Here I go again.. talking to myself.

    After fighting with this for a few hours, I've come back to where I started. What I'd really like to do is just add a link to the right side of the Color pulldown that says something like 'See colors' . When the customer clicks on the link it opens a small popup of an image I'll make of all the different color swatches. Does ANYONE know how I can go about accomplishing this?

    I've been looking through the php and can't seem to find where the actual select is being generated. I'm thinking that if I can do an if whatever the select name variable is = color then add the link, otherwise add nothing. Can anyone lend a newbie a hand?
    Visit my Decal website: DecalDepot.net

  4. #4
    Join Date
    Oct 2006
    Posts
    225
    Plugin Contributions
    0

    Default Re: Using css to change 'text' colors in options pulldown?

    I am posting this in the hopes that the solution I've found to my problem will help others who may want to do something similiar. Please note that the solution I have found does not have anything to do with css and is a bit of a hack.

    What I decided on was to generate a link on the right side of the pulldown box that when clicked would open a new window and open a page containing an image with the different colors on it (I haven't written this page yet, but the link opens a window and the page not found pops up).

    Here's what I did. First I copied tpl_modules_attributes.php from includes/templates/template_default/templates/ to my harddrive. Then, I edited the file like this:
    Code:
    <?php
    /**
     * Module Template
     *
     * Template used to render attribute display/input fields
     *
     * @package templateSystem
     * @copyright Copyright 2003-2005 Zen Cart Development Team
     * @copyright Portions Copyright 2003 osCommerce
     * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
     * @version $Id: tpl_modules_attributes.php 3208 2006-03-19 16:48:57Z birdbrain $
     */
    ?>
    <div id="productAttributes">
    <?php if ($zv_display_select_option > 0) { ?>
    <h3 id="attribsOptionsText"><?php echo TEXT_PRODUCT_OPTIONS; ?></h3>
    <?php } // show please select unless all are readonly ?>
    
    <?php
        for($i=0;$i<sizeof($options_name);$i++) {
    ?>
    
    <!--
    //Comment section moved
    //<?php
    //  if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {
    //?>
    //<h3 class="attributesComments"><?php echo $options_comment[$i]; ?></h3>
    //<?php
    //  }
    //?>
    //Comment section end moved
    -->
    
    <div class="wrapperAttribsOptions">
    <h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
    <div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
    
    <!--  Moved here -->
    <?php
      if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {
    ?>
    <h3 class="attributesComments"><?php echo "&nbsp;&nbsp;" . $options_comment[$i]; ?></h3>
    <?php
      }
    ?>
    <!-- End move -->
    
    <br class="clearBoth" />
    
    </div>
    
    
    <?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') { ?>
        <div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>
    <?php } ?>
    
    
    <?php
    if ($options_attributes_image[$i] != '') {
    ?>
    <?php echo $options_attributes_image[$i]; ?>
    <?php
    }
    ?>
    <br class="clearBoth" />
    
    <?php
        }
    ?>
    
    
    <?php
      if ($show_onetime_charges_description == 'true') {
    ?>
        <div class="wrapperAttribsOneTime"><?php echo TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION; ?></div>
    <?php } ?>
    
    
    <?php
      if ($show_attributes_qty_prices_description == 'true') {
    ?>
        <div class="wrapperAttribsQtyPrices"><?php echo zen_image(DIR_WS_TEMPLATE_ICONS . 'icon_status_green.gif', TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK, 10, 10) . '&nbsp;' . '<a href="javascript:popupWindowPrice(\'' . zen_href_link(FILENAME_POPUP_ATTRIBUTES_QTY_PRICES, 'products_id=' . $_GET['products_id'] . '&products_tax_class_id=' . $products_tax_class_id) . '\')">' . TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK . '</a>'; ?></div>
    <?php } ?>
    </div>
    You can see that I've commented out the original code section (in red) and moved it (in green) right after the dropdown box is created. This file was then copied to includes/templates/MY_TEMPLATE/templates/ .

    Now what I've done is just move the comments to the right side of the pulldown. Next, I went into the admin->catalog->option name manager and then clicked 'edit' on the color dropdown attribute. This brings up another page where you can add a comment.

    Here's what I put in for the comment:

    Code:
    <A HREF="colors.htm" target="_blank">View Color Samples</a>
    Now when you view any page with the color attribute you'll also see a link on the right of the dropdown that pops up the page that displays the colors available.

    Phew! The monkey is off my back!

    If you'd like to see it in action:

    http://www.decaldepot.net/zencart/in...products_id=79


    *NOTE* I was not using the attributes comments for anything before so if you are using the comments then this may not be the best approach for you.
    Visit my Decal website: DecalDepot.net

  5. #5
    Join Date
    Nov 2006
    Posts
    28
    Plugin Contributions
    0

    Default Re: Using css to change 'text' colors in options pulldown?

    Quote Originally Posted by dinki View Post
    I am posting this in the hopes that the solution I've found to my problem will help others who may want to do something similiar.
    Here's what I put in for the comment:

    Code:
    <A HREF="colors.htm" target="_blank">View Color Samples</a>
    Thank you very very much! This was exact what I needed. See it working http://www.kalustamohelsinki.fi/kaup...&products_id=1 ( testing )

    Next thing is to make this link work with little javascript... (popUp)

 

 

Similar Threads

  1. v151 Cannot Change Link Colors in CSS
    By amandavz in forum Templates, Stylesheets, Page Layout
    Replies: 15
    Last Post: 5 Feb 2014, 06:46 PM
  2. How do I change text fonts and BG colors
    By wachtn in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 6 Jul 2009, 12:02 AM
  3. How do I change catagory text and hover colors?
    By JC67 in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 2 Feb 2008, 04:52 PM
  4. How do I change the footer text colors?
    By ---kate--- in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 29 Oct 2007, 06:59 PM
  5. Change Some Text Colors
    By QueenKat in forum Templates, Stylesheets, Page Layout
    Replies: 14
    Last Post: 17 May 2007, 04:00 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