Price formatting ?

[Gio]

Hey,

I just wanted to know how I can format the price of a product ?
Like the place where it shows

Price: £29.99

I wonder how I can make this bolder or change the color and the font size.

I tried searching the stylesheet, couldnt find anything.

[Golf Tee Warehouse]

Using Firebug for Firefox will allow you to see how it is being styled.

[Gio]

Okay, downloaded that, but when I do the 'select and element in the page to inspect', and selec the price it doesnt show me anything important:

<actinicrices retail_price_prompt="Price:" prod_ref="499">
<br/>
Price: £49.99
</actinicrices>

[Chunkford]

I feel unless you know how CSS works you are fighting a losing battle.
You need to wrap the price in actinic with a <span> tag and give it a class to control it in the style sheet or use inline styling.

try reading through this site http://www.w3schools.com/css/
This will be a good starting point.

[Golf Tee Warehouse]

You need to look at the pain on the right hand side, but if the site in question is giosconcept dot co dot uk then it appears that the price is using the styling that controls much of the text throughout the whole site:

p, table, td, th {
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
font-style:normal;
font-weight:normal;
margin-top:0;
}

To be able to individually style the price you are going to need to know at least the basics of CSS.

You would need to surround the product price variable or layout with something like:

<span class="product_price">PRODUCT PRICE LAYOUT HERE</span>

and then add something like:

.product_price	{
	font-size: 14px;
	font-weight: bold;
	color: #A70303;
}

to the CSS


Please note I new to CSS myself and you may find others have better suggestions, but the above should give you a push in the right direction.

If you don't know much about CSS you will need to do a bit of reading and should be able to find hundreds of tutorials on the web.

[Gio]

Guess ill have to learn more about CSS then : O

Thanks for the replies, now I have an idea of what to do!

[Gio]

Ah, sorry for the double post, but I have found the section in the CSS where the price layout is specified, and have been mucking around with it anyway I can think of, but the price remains the same no matter what i do.

[leehack]

Tell us what you have done and provide a link so we can see it, no other way of us really telling what you haven't done right.

[IanSaunders]

The biggest stumbling block I used to fall over was that the browser reads a CSS stylesheet from top to bottom. If you set something at the top and it gets re-set later on, you'll never see the effect of your changes. At least while you're getting used to it, I'd recommend adding any new CSS declarations to the end of the stylesheet.

[Gio]

h3.product_price {
font-size: 1.875em;
font-weight: bold;
color: #A70303;
}

This is the place where I edit the price, correct ?

Well, as I said, I can change this all i want, it has zero effect at all.

Should I put this at the bottom of the code ?

[Golf Tee Warehouse]

Have you wrapped the price in a <span> tag or similar to tell the browser which style to apply

[leehack]

What is the html code around the price?

[Chunkford]

That's because it doesn't control the pricing you want to change, and probably is used for a different theme.

You will need to encapsulate the price in a span tag and control it that way

[IanSaunders]

h3.product_price {
font-size: 1.875em;
font-weight: bold;
color: #A70303;
}

This means 'apply all this styling to any <H3> tags with a class of "product_price"'.

In the code, they would look like:

<h3 class="product_price">some stuff here</h3>

[Gio]

Ian, there is no such code you mentioned : O I am looking in the right place, arent I ? Design > Actinic Stylesheet

Do you guys mean that I have to put the span tag on this part of the code:

h3.product_price {
font-size: 1.875em;
font-weight: bold;
color: #A70303;
}

?

Cuz im having trouble finding anything else which would relate to the price.