Tips and Tricks HQ Forum

Support Forum for Tips and Tricks HQ Products

Register or log in - lost password? (Having an issue with the forum login?)

Search the Forum

Tips and Tricks HQ Forum » WP eStore Forum

Styling Variation Buttons

(7 posts) (2 voices)
  • Started 1 year ago by JackAubrey
  • Latest reply from JackAubrey
  • Possible Solutions (Related Topics):
    1. How to change drop-down menu styling for variations?
    2. How to change positions of variations, price, buy now buttons
    3. Separate styling for buttons vs text-fields?
    4. Shipping Variation Option on Individual Products
    5. Styling Question for wp_eStore_buy_now_fancy

Tags:

  • variation
  1. JackAubrey
    Member

    This might be kind of weird question but is it possible to style the variation buttons in a way that's different from the standard pulldowns? The default one doesn't really match the font of my overall site and I'd love to change the colors of the arrows and the color background that the arrows are on.

    Just curious...

    -JA

    Posted 1 year ago #
  2. amin007
    Key Master

    Open the "wp_eStore_style.css" file and look for the following CSS code:

    .eStore_variation{
    margin-top:0px;
    margin-bottom:0px;
    }

    The class "eStore_variation" is responsible for how the variations look so change the above CSS to how you want to style it.

    Posted 1 year ago #
  3. JackAubrey
    Member

    So I tried to test this by changing the font and it didn't work. I put in:

    .eStore_variation{
    margin-top:0px;
    margin-bottom:0px;
    font-family: georgia;
    }

    -JA

    Posted 1 year ago #
  4. amin007
    Key Master

    There are two things here. One is the full area that controls the labels of the variations and buttons. The other is the individual variation drop down.

    paste the following code in the "wp_eStore_style.css" file and you should see a change:

    .eStore-button-form{
    font-size:20px;
    font-family:arial;
    }
    
    .eStore_variation{
    margin-top:0px;
    margin-bottom:0px;
    font-size:20px;
    font-family:arial;
    }

    Now tweak it slowly to what you want.

    Posted 1 year ago #
  5. JackAubrey
    Member

    Thanks so much -- that's really helpful.

    One hopefully last question: Do you know how I would alter the font of the variation options themselves? With this I was able to alter the variation type, i.e., "Hand: left/right" where "hand" changed fonts but not the options. And do you know if it's possible to change the color of the arrows that are on the blue background on the far right-hand side of the variation options? I know this is incredibly nitpicky and OCD of me, but I figured I would at least give it a shot before moving onto other priorities. I can't seem to find out what the proper selector is using firebug...

    -JA

    Posted 1 year ago #
  6. amin007
    Key Master

    I don't think you can choose the color of arrow as those comes from the browser (this why you will see on safari or on a mac system they look different).

    You should be able to change the font color, size etc by modifying the "eStore_variation" class but I am pretty sure your theme has another CSS definition of how it looks and that one is taking precedence so even though you are changing "eStore_variation" it is not taking effect. So look for the CSS for select boxes in your theme.

    Posted 1 year ago #
  7. JackAubrey
    Member

    Okay that's helpful. I didn't realize that the browser controlled that but it makes sense. Also makes sense that the theme is fighting my attempts to modify "estore_variation" -- I actually noticed it acting a little funny before so that makes good sense too.

    Thanks for your help -- I'll take a crack and see if I can get it styled into some kind of decent shape!

    -JA

    Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.

Tips and Tricks HQ  | WP Shopping Cart  | WP Affiliate Software  | WordPress Membership Plugin