Changing color of product variant selector

soyuz02 · #1 08-04-2006, 07:20 AM

Hi,

I am seeking to change the color of the product variant selector label which is displayed on the product details page. Any ideas?

Thanks a lot guys.

And Balinor, if you read this one, thank you so much for your dedication to this forum, you've helped me loads.

balinor · #2 08-04-2006, 11:06 AM

I read every one

Glad I can help!

By the selector, do you mean the drop-down box itself or the label next to it?

soyuz02 · #3 08-04-2006, 01:26 PM

I mean the text next to it, so the label of the control. Thanks

carpeperdiem · #4 08-04-2006, 01:32 PM

Although this post is not SPECIFICALLY how to change your specific "option" tag (actually you are not changing anything in the template -- you will be editing the CSS file), it will show you how you can figure this out on your own in about 30 seconds...

For your specific case, change step #4 to:

4. click on a product detail that has a variant

then proceed...

http://forum.x-cart.com/viewtopic.php?p=148575#148575

balinor · #5 08-04-2006, 01:36 PM

Unfortunately X-Cart didn't bother to assign a class to that piece of text, so it isn't that easy. This is the line that controls the code, it is in skin1/modules/Product_options/customer_options.tpl:

<td valign="middle" height="25">{if $usertype eq "A"}{$v.class}{else}{$v.classtext|default:$v.class }{/if}</td>

You'll need to either add a class to it, or use <span> tags to format it.

carpeperdiem · #6 08-04-2006, 01:52 PM

Sorry..

I was thinking you wanted

class="ProductDetailsTitle"

or

.ProductDetailsTitle in the CSS file....

In this case, change this line of code from:

Code:

<td valign="middle" height="25">{if $usertype eq "A"}{$v.class}{else}{$v.classtext|default:$v.class}{/if}</td>

to:

Code:

<td class="ProductVariantTitle" valign="middle" height="25">{if $usertype eq "A"}{$v.class}{else}{$v.classtext|default:$v.class}{/if}</td>

then in your skin1/skin1.css - add this anywhere...

Code:

.ProductVariantTitle { color: #FF00CC; text-decoration: line-through; font-weight: bold; font-size: 14px; }

Obviously, change the CSS to match what you really want it to look like. This particular code will look pretty nasty there...

if you are not proficient in CSS editing, no worries. there are countless sites on the web with everything you need to know. You only need to know how to search for the answer...

hope this helps.

Jeremy

soyuz02 · #7 08-05-2006, 04:07 PM

Thanks a lot guys, it worked just fine. Just one more question:

I have one selector box which lets the customer choose the product variant. Now left of it is of course the label or name of the option group whose format I have now been able to change. However I would like to inlcude another text label on the right side of it. How would I do this??

Thanks!

balinor · #8 08-05-2006, 04:08 PM

Same template, just add a new table cell at the end.

Scott DeToffol · #9 08-07-2006, 01:21 PM

balinor or anyone - is there a good guide to skin1.css that explains in detail what the selectors affect? Maybe someone has placed a bunch of comments in that would help guide us?