Add colour to product description

[CraftyJoy]

I would like to add a spot of colour to my product descriptions i.e. was £1.99.

Can anyone help by instructing me how to do this please, if this is possible!

Joy

[wjcampbe]

If you only want to do it occasionally, add html to your description like so
!!< <font color="red">was £1.99</font> >!!
(EDIT: The !!< needs to be at the very beginning of the description and the >!! at the very end of the description.)

If you want to do it many times, AND you are using one of the css based actinic themes add this in your actinic.css file (after one of the curly } end brackets)
wastext {
font-color : red;
}
and in your description
!!< <span class="wastext">was £1.99</span> >!!
(EDIT: see note above about position of the !!< >!!!.)
not much difference? But - if you decide this text should also be in bold italics, then using the css version you would just change the code once to
wastext {
font-color : red;
font-weight : bold;
font-style : italic;
}
and in every place you had previously used wastext, the text would now show in bold italic.

[CraftyJoy]

Thanks Bill,

Have just copied and paste your first suggestion as I only want to use it 5 or 6 times have pasted to the full description on the general tab of the product upload?
I am using smart theme
Joy

[wjcampbe]

No worries :)

The code and the concept are there if anyone else ever needs it. (Or if you decide you want to go the other way in amonth or so).
I have just changed my non-actinic site to css and it cetainly makes maintenance much easier.

[CraftyJoy]

Oops, sorry Bill but I forgot to add the important bid to the previous reply, the was £1.99 is still in black! The red text has not appeared. I have only tried this in preview screen (not uploaded) Sorry but its getting late!

Joy

[wjcampbe]

It should work in the preview screen.

Strange this, but if you move the !!< to the beginning of your description, leave the <font ... /font> bit intact around your was £1.99 and move the >!! to the end of your description, it works OK then - must be a bug in Actinic descriptions.

[Highlander]

Just browsing and noticed that in you example for css you left off the >!!

!!< <span class="wastext">was £1.99</span>

should be

!!< <span class="wastext">was £1.99</span> >!!

[wjcampbe]

Thanks Niall,
I have edited the code in the original post to correct that error and also added a note about position of the !!< >!!.

[CraftyJoy]

Just tried the basic code on a product with nothing in the description box and still no difference!

Joy

[wjcampbe]

I tested this and it worked OK for me - see attached.

[jont]

Hi Joy,

the above code has a space after !!< and before >!!

it shoud read !!<<span .... /span>>!!


delete the spaces between the brackets and that should work

[jont]

Bill - can you edit your code above to remove the spaces for others to use

[jont]

Should there be a hypen between font and color (font-color)

[CraftyJoy]

This is the code I have edited

!!<<font-color="red">was £1.99</font>>!! copy & paste

Still no luck!

Joy

[jont]

remove the hyphen betwen font-color

!!<<font color="red">was £1.99</font>>!!

[wjcampbe]

Jont - #15 good catch. I was thinking css when I typed that, and in my own tests, of course I did it without the hyphen. Code edited again.

On the spaces #11 - I have found it works reliably with them in. I will leave those to personal preference.

[CraftyJoy]

Thats done it now! Thanks alot, certainly got you all thinking!!

Many Thanks

Joy :)

[jont]

Fair enough on the spaces - I prefer to keep the HTML code all together and add my own space around the tags to seperate the code in a sentence eg:

normal !!<<b>bold</b>>!! normal

as opposed to

normal!!< <b>bold</b> >!!normal

both work the same so I guess it is which works best for each individual