How To Create Colored Text (and other fun stuff)

Avatar for cmerin
Registered: 01-20-2004
How To Create Colored Text (and other fun stuff)
Wed, 10-24-2012 - 4:44pm

How To Create Colored Text (and other fun stuff)

Currently the board software does not have the WYSIWYG ability to change font colors. But that does not mean you're stuck with plain old black and white (we all know there are at least 50 Shades of Gray *wink*).

The easiest way to do this is by using inline styles.

The Short & Sweet of It: Inline styles are a basic, non-nonsense way of utilizing CSS (cascading style-sheets) to spruce up a webpage. The same idea applies to our posts here.

If I want to create a basic signature with my name, but want some color, I would use an inline style such as:

<p style="color: purple; font-size: 22px;">Erin</p>

which will give me:


So basically you can switch the info around in the above to suit your needs; any color, any size.

Once you know what you want, click on the disable rich-text link under the compose box, paste your code where you want it, then click enable rich-text under the compose box and you'll see your masterpiece.

You're not limited to color and size. What's nice about inline styles is the choices you have.

Properties > Possible Values
font-family > any font name
font-size > 22px | 15pt | .05em
font-weight > bold | normal
font-style > italic | normal
color > any color
background-color > any color

Example of some of the choices above:

<p style="font-family: trebuchet ms; font-size: 20px; font-weight: bold; font-style: italic; background-color: black; color: white;">Hi! My name is Erin. I am the Community Technical Assistant.</p>

which will give me:

Hi! My name is Erin. I am the Community Technical Assistant.

Your options are pretty endless. :)

As always, if you have any questions, please let me know. I'm more than happy to help.

Community Technical Assistant | Community Moderator

Avatar for vegiemama
Community Leader
Registered: 01-06-2000
Wed, 10-24-2012 - 6:00pm

Passing it along at SS...but will be nice when it's built into the WYSIWYG too!

Homeschooling mom to DD15 & DS11

CL of Homeschooling, Signature Showcase, Ectopic Loss, and Fertility Charting

Avatar for hugss
iVillage Member
Registered: 09-25-2010
Wed, 10-24-2012 - 9:17pm

But does it work to change the color of what one is typing?
Meaning not for my name but everything else
If so how do I do that if I would want say orange  or blue for now in comic sans size 2 & where would I put it?

Thanks Erin :)

iVillage Member
Registered: 03-20-2001
Thu, 10-25-2012 - 5:56am
This is just temporary though isn't it? I will go back to having a color selection tab like before right???? I'll post it on the board and let them test it out.
iVillage Member
Registered: 01-03-2001
Thu, 10-25-2012 - 11:09am

I'm sorry, but this is way to technical for me --- it's reverting back to the days when Macs didn't ahve WYSIWYG adn while I know a little code, I can't make it work with this complicated WYSIWYG-ignore html-filtered html-plain text option thing. Trying to keep track of which option to use when (which one works for posting a  link and making it active, for example, is different from posting html text for a cut-and-paste which is different from using this tutorial you've given us for signatures...).

What I'm finding, too, is if I post something in filtered html, for example, I can only edit that post in htl --- we USED to be able to post in html, witch to rich text and edit there. Without spell checking, one HAS to edit posts --- or at least I do since I can't type worth a dime. 

I'm not one to use fancy text and multiple colors in my posts but this plain jane vs. complicated stuff is getting to me... and I'm sure it's turning off my boardies who have stopped posting altogether because they can't read my replies to them anyway!

Avatar for cmlisab
iVillage Member
Registered: 09-30-2011
Fri, 10-26-2012 - 10:59am

If you're (pathetically) HTML-challenged like me, there is another option. It's not as cool, but it did work for me.  What I did was open a word processor (like Microsoft Word) that has the ability to change a font color. Pick the color you want, write a word in  that color, then copy (control-c) and paste (control-v) that word into a new post or reply. Anything you type after that word will be the same color: everything is red...Elmo, firetrucks, apples! everything is green.

Aqua/ all-time favorite color!

Hope this helps!