Thread: How to Change the Color of product price?

Any one know how to change the color of just the product price?

You can mod the variantprice, RegularPrice, and SalePrice CSS classes in your skin's style.css file.

Hi I'm having the same problem. I would like to change the color of the price and make it larger along with the SKU. I have gone to my skins style.css folder. I'm using skin 2. I find SKU at line 553 & Price at 557. I have tried to edit these an nothing happens. This is what it looks like at the moment:

#sku
{
display: block;
}
#price
{
font-weight: bold;
font-size: 1.5em;
display: block;
}
.SalePrice
{
color: #cc0000 !important;

Any help would be greatly appreciated. Thank you for your time.

Same thing for me also....

I have found that many pages (especially in older versions of ASPDNSF) do not always put style settings around things like prices, product names, etc.

Therefore, making changes to the CSS file, as directed by the documentation and by the admins in these forums, doesn't always work.

When browsing your site, "View Source" on your page where the font/color of your price is not changing as you expect. Does your price show up as $14.95 (for example) or does it show up as <span class="price">$14.95</span>.

If the span tag is missing, that explains why the color isn't changing. I have gone back and forth with support on this several times, and the best they can do for you is log it as a defect and try to get the span tags into a future release. Therefore, in order to get the span tag back now, you'll have to add it yourself to the proper XSLT page.

I'll get some information from the DEV team regarding this and will get back to you shortly.

TrevorSides,

I'm not sure what version are you talking here, but I've checked several versions of ML even the oldest v6.2 (the only oldest version I got locally), I can see the Variantprice, RegularPrice, etc with a <span> tag on it in the GetVariantPrice method under XSLTExtensionBase.cs file.

Try to put this in style.css (if you can't find it), view the product pages and you should be able to see the change.

.variantprice
{
color: #009999;
}

Would anyone know how to change just the numerical value of the display price as apposed to the whole string?

Right now if you change .variantprice it will make the "Price: $99.99 (USD)" the specified color.

I would like "Price:" to be one color and "$99.99 (USD)" to be a different color.


Thanks in advance.

The "Price:" prompt is a string resource, showproduct.aspx.26. If you go into the string resource manager, you can then put HTML markup directly into the string resource Value box.

It would look something like this:

Code:

<font color=#0000FF>Price:</font>

The color of the price itself would be changed through style.css as mentioned above.

That should do it!

Perfect, but lets say you have a list of products that work great with one color, but a list of specials that need a different color for price instead. Two string resources probably but how would you tell the getVariantPrice() function on one page to use string resource a and the other getVariantPrice() on the other page to use string resource b?

Thanks in advance

You can try out these to change.
/*price in featured products*/

#featuredProducts {

font-weight: bold;
color: #cc0066;
}
If you want to control the text color as well as the price, you can use this:

.centerBoxContentsFeatured, .centerBoxContentsFeatured a {
{"
font-weight: bold;
color: #cc3366;
}