VirtueMart Forum

Hi, I need to change the text colour for the sales price & the product details link as they are the same colour as my template. Using Joomla 1.5 & my own Artiseer template. Can anyone assist? Thanksvcnphk

Hi,

You could use firefox with firebug extension to examine your CSS files which is responsible for styling on a template/webpage.

You can find more information on that post that will help you to use firebug and change your CSS as you need and also a very useful joomla article how to change styling in joomla using firebug.

http://forum.virtuemart.net/index.php?topic=102850.0

try it out! :)

Regards

Thanks for the quick reply, I'll try. Do I need to be running Firefox?

Hi!

Chrome have also a firebug light version, but i prefer (as most of people) using firebug extension with firefox browser :)
take a look on the thread posted by jenkinhill and there are value information.
What you need is to create an override or edit your custom template CSS file for vm.

Great, thanks

Okay, Ive done both the Chrome then Installed Firefox and used firebug on both. I fear I'm going to be here for the rest of my life trying to findwhere the CSS line is for this. Sure this is a common issue and someone knows which line its on in the CSS edit page?

Hi,

On the previous post, the link have some very useful tips how to use firebug with joomla and make changes and overrides to your files, i think have some videos also. You can take a close look and you learn a lot of things.
Because and if someone tell's exactly what you have to change may be you are not able to find it or to tune it ... for your question for changing color to red for product price is (CSS):

.productdetails-view .product-price {
color:red;
}

or

.productdetails-view .product-price {
color:red!important;
}

the above is for product details page. if you make it like:

.product-price {
color:red!important;
}

then will change the color to product details, category, cart ... on wherever that class refer to.

NOW:
You should learn a litle bit how you should use firebug ... will help you to find exactly what you are seaching ... but first read or take a look to some videos maybe how to use it.

Last, virituemart is using joomla template system and you can make overrides but you have first to spend some time to learn some things ... not for a life may be but of 1-2 weeks, will help you in the feature.

Also take a look on template overrides and how you can accomplish them, so you will be able to make your template changes inside your template folder.

Thanks so much, my problem was that my Firebug wasn't operating as it was in the videos. It wasn't highlighting the sections as it was in the video, so I resorted to looking for it manually but gave up. I will take the time to do it again but sometimes frustration gets the better of me. Thanks again. Ian

The latest doc for looking at css with Firebug is on https://getfirebug.com/css

Hi,

Quotethen will change the color to product details, category, cart ... on wherever that class refer to.

I have problem, I would change CSS only for product details - unfortunately color, font size etc. is changing in category and cart too...

In this line on components/com_virtuemart/views/productdetails/tmpl/default_showprices.php:

echo $this->currency->createPriceDiv('salesPrice', 'COM_VIRTUEMART_PRODUCT_SALESPRICE', $this->product->prices);

when I change "salesPrice" to other name: for example "salesPriceProduct" in browser in Firebug I see all the time "<span class="salesPrice">"...

What should I change to give other name for a class?

Please help.

Hi just wondering:

I used this method -I'm not great at css but it works -

[attachment cleanup by admin]

Yes, this is good idea, but I would change style on the "20$".

With your solution I can't to do this.

for featured product
go to mod_virtuemart_product apply inline styling like

if (!empty($product->prices['salesPrice'] ) ) echo JText::_('COM_VIRTUEMART_PRODUCT_SALESPRICE') . '<span class="PricesalesPrice" style="color:red;">'.$currency->createPriceDiv('salesPrice','',$product->prices,true).'</span>';

and for categories pages u have to compromise and  delete this line. 

echo $this->currency->createPriceDiv('salesPrice', 'COM_VIRTUEMART_PRODUCT_SALESPRICE', $this->product->prices);

replace with
echo "Price: ",'<span class="PricesalesPrice" style="color:red; font-size:15px;">'."£".round($product->prices['salesPrice'],2).'</span>';



other wise there is no solution ... i spent tons of time and come-up with this solution.. and it works me...


hope this help

Hello,

I think there are plenty solutions, the best will be always using css overrides for your template. Also in the above example you can still use language overrides if you want to change the price strings or edit the currency for the symbols...

yes u r right ... css override is the best option.. but in this case override only change label... price should remains in he same color... that why i modify code at categories

Hello,

You can change both price and label css attributes with no issues, may be you make something wrong when you try to change it or you use any custom vm templates that overrides that css attributes. You can use firebug and test, will work like a charm :)