how to color individually - each letter in a text or header a different color?

lavisbre
71 Posts
lavisbre posted this 20 June 2016

Hello
Im trying to make a multicolored text and header.

I can color the who lot one color.
However I cant seem to do one by one.

So a word like web would have a red W and a blue E and a Green B.
I have attempted to make a PNG image and that looks ok till you test on the phone.
The image just shrinks and is not the same size as the text below it.

http://www.onecalmbreath.ca/ please let me know what I can do about this.
Im using wordpress and woo commerce

Hello Im trying to make a multicolored text and header. I can color the who lot one color. However I cant seem to do one by one. So a word like web would have a red W and a blue E and a Green B. I have attempted to make a PNG image and that looks ok till you test on the phone. The image just shrinks and is not the same size as the text below it. [http://www.onecalmbreath.ca/][1] please let me know what I can do about this. Im using wordpress and woo commerce [1]: http://www.onecalmbreath.ca/

Last edited 20 June 2016 by lavisbre

header color Text
Vote to pay developers attention to this features or issue.
3 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 21 June 2016

Hi,

Please provide your theme with the text as the image, we would try to review the settings so it will resize. The text in one control can not be colored as you explained. Using image will be the better solution.

Sincerely,
Hella

Hi, Please provide your theme with the text as the image, we would try to review the settings so it will resize. The text in one control can not be colored as you explained. Using image will be the better solution. Sincerely, Hella
lavisbre
71 Posts
lavisbre posted this 22 June 2016

Hello
i have made text images. it looks nice till i go phone mode.
In phone mode the images get small, so the image headers look smaller than the text.
currently it says

enter image description here

what solutions would i use to keep the header image looking larger than the text in phone mode?

Thanks in advance

Hello i have made text images. it looks nice till i go phone mode. In phone mode the images get small, so the image headers look smaller than the text. currently it says ![enter image description here][1] [1]: http://www.onecalmbreath.ca/wp-content/uploads/2016/06/cee1749d1c2a5355e10e64ea45fc8bba_creativemindfulnesschildrencolorheader.png what solutions would i use to keep the header image looking larger than the text in phone mode? Thanks in advance
Stagger Lee
1818 Posts
Stagger Lee posted this 22 June 2016

Simplest is to put letters/words inside separate classes and decide colors in custom CSS.

<span class="colored-text-1">Creative Mindfulness for</span><span class="colored-text-2">C</span><span class="colored-text-3">h</span>...etc...


.colored-text-1 {color:#f5f5f5;}
---etc....

etc
Then you have 100% control on all devices.

Simplest is to put letters/words inside separate classes and decide colors in custom CSS. <span class="colored-text-1">Creative Mindfulness for</span><span class="colored-text-2">C</span><span class="colored-text-3">h</span>...etc... .colored-text-1 {color:#f5f5f5;} ---etc.... etc Then you have 100% control on all devices.
You must log in or register to leave comments