The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 07-11-2012, 05:59 PM
jules_jewels's Avatar
jules_jewels jules_jewels is offline
Junior Member
 
Join Date: Mar 2010
Posts: 24
Default Change color of specific product options - CSS

Hi,

Is there a way to change either the product option Title text color of only certain product options or even the background color of specific product options?

For example...

I have 3 product options:

1st product option: drop down menu

2nd product option: radio buttons

3rd product option: text area

Could I use CSS to separate them a bit more by either changing each product option Title to a different color, or maybe giving the entire product option a different background color?

I've tried, but nothing seems to affect it.

I'd be up for any other suggestions that may achieve something similar.

Thank you!

Last edited by PSD; 07-11-2012 at 06:12 PM.
  #2  
Old 07-11-2012, 09:31 PM
Maristany's Avatar
Maristany Maristany is offline
Senior Member
 
Join Date: Dec 2009
Posts: 419
Default

Some time ago the ecwid team added very useful classes for this, you can find them following these instructions.

For example, with Chrome you can Right click > Inspect Element over your "size" option, and you'll see something like this (screenshot attached):

"ecwid-productoption-4005-Size-container" refers to this product option only
"ecwid-productBrowser-details-optionPanel" --> every option in all your products
"ecwid-productBrowser-details-optionPanel-radio" --> every radio buttons option
"ecwid-productoption-Size-container" --> every option with the title "Size"

So if you want to change, say, the title of your "Size" option in all your products to blue, you can add this code to the bottom of your custom CSS theme:
Code:
div.ecwid-productoption-Size-container label.ecwid-fieldLabel {
    color: blue;
}
Don't worry about the "html#ecwid_html...".

Sometimes it's a bit more complex but this is a good start.
Attached Thumbnails
Click image for larger version

Name:	Customer’s Front-End - Ecwid- E-Commerce Widgets rsz.png
Views:	253
Size:	43.5 KB
ID:	1314  
The Following 2 Users Say Thank You to Maristany For This Useful Post:
Matt Ecwid (07-12-2012), Maya (07-12-2012)
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
background, change color, css, product options, title

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:04 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.