2330Views38Replies

Author Options:

Is it possible to color the font in an instructable? Answered

I'm improving a published project over the weekend.  

I'm thinking it might be nice to use colored font (for distinction) on the specific improvement/changes/inclusions.

Is this possible using the rich editor or by inserting html code?

If it is possible, what color would you recommend? 

38 Replies

user
canucksgirlBest Answer (author)2012-08-10

Is it possible? Yes.

In the Instructables editor, click on the "Source" button and for the text that you want to change the color:

Add this code at the beginning of the text (for ibles orange):

<font color="ff4e00">

Add this code at the end of your text:

</font>

If you want to change the color to something else, change the color code (the 6 characters in the code).

Here's a chart for other basic colors (there's arguably millions more).

If you want to make the text size larger, let me know. :-)

Select as Best AnswerUndo Best Answer

user
bajablue (author)canucksgirl2012-08-11

CG... it works either way... so YAY!

I've selected a secret number. Please pick a number between 1-10. I've asked kmh to do the same. Whoever comes closest to the secret number wins "Best Answer"... and a new car!!!! :-)

Select as Best AnswerUndo Best Answer

user
artfulann (author)canucksgirl2012-08-10

that is too cool! I just tried this on an unpublished idble about colors....

Select as Best AnswerUndo Best Answer

user
canucksgirl (author)artfulann2012-08-10

So you liked that huh? :-)

Select as Best AnswerUndo Best Answer

user
bajablue (author)bajablue2012-08-10

I left out the parenthesis last time... Trying again!

Select as Best AnswerUndo Best Answer

user
bajablue (author)bajablue2012-08-10

DRAT! I'm doing something wrong. ;-(

Select as Best AnswerUndo Best Answer

user
canucksgirl (author)bajablue2012-08-10

Okay, here's an example...

This is bajablue text.

Click on "source" button in ibles editor. Find the text that you want to change the color, and make it look like this (in the "source"):

<font color="ff4e00">This is bajablue text.</font>

When you click out of "source" it should look like this:

This is bajablue text.

I used the same code to color the text here (by using the same "source" button).

----------------------------------------------------

Okay.... Something is acting weird here... Dare I say a bug?

If you refer to my little screenshot, you'll actually see that it does work (as the text is orange), but as soon as I posted the comment (or previewed), it went back to black.... *sigh*

So, try the directions within your ible's editor and if it doesn't work, then I don't know what to say, because it does work, and I can show you examples that it does (in Instructables AND in comments)....

Where's the can of RAID when you need to spray a bug. o_0


Select as Best AnswerUndo Best Answer

user
canucksgirl (author)bajablue2012-08-10

Okay, let's try it like this then....

in "Source" use the name of the color instead of the color code, like this...

<font color="green">So this is green.</font>

And it will display like this...

So this is green.

Select as Best AnswerUndo Best Answer

user
canucksgirl (author)canucksgirl2012-08-10

Apparently, not all the colors seem to work here.... *sigh*

Select as Best AnswerUndo Best Answer

user
Vyger (author)canucksgirl2012-08-10

You guys are gonna BREAK it and then it won't work for anybody, or any color.  Where is that anycolor key anyway. 

Hey, if you import colored fonts , like copy and paste from an editor
program, does it retain the colors?  I know it does for doing stuff on E bay. I never tried to get that fancy here.

Select as Best AnswerUndo Best Answer

user
canucksgirl (author)Vyger2012-08-10

nah... I neglected to put a stupid # sign before the value... *facepalm*

I haven't tried that, so I'm not sure. I'd recommend against it however (unless you really look at what gets pasted in source), because half the time it pulls other code that messes up the site and creates errors...

Select as Best AnswerUndo Best Answer

user
iceng (author)canucksgirl2012-08-10


<font color="66ccff">

Cool

</font>

Select as Best AnswerUndo Best Answer

user
canucksgirl (author)iceng2012-08-10

The only weird part is that the color value shows up in the editor, but the color isn't displaying in the comment...

This is like HTML 101. *sigh*

The only thing that seems to work is the really generic version of using "green" "yellow" etc instead of the color values.... *double sigh*

Select as Best AnswerUndo Best Answer

user
kelseymh (author)canucksgirl2012-08-10

You must prefix the hex code with an octothorpe (#). In your example, it would be


<font color="#ff4e00">Add this code at the end of your text:</font>

to get:

Add this code at the end of your text

Select as Best AnswerUndo Best Answer

user
canucksgirl (author)kelseymh2012-08-10

Correct. *grumbles in frustration over elementary error*

Select as Best AnswerUndo Best Answer

user
artfulann (author)canucksgirl2012-08-11

It is interesting that I didn't put in the pound sign, but copied and pasted your instructions with my color code and somehow magically the octothorpe appeared anyway
Blue and yellow make? You guessed it! Green!

Select as Best AnswerUndo Best Answer

user
canucksgirl (author)canucksgirl2012-08-10

So in summary bajablue.... I neglected to add a silly (but important) number sign before the color value.

What it should be is, "#ff4e00" (leave everything else the way it was).

Sorry.... its been a very long day, and I've been up since 5am. o_0

Select as Best AnswerUndo Best Answer

user
NebulaIX (author)2016-12-15
user
canucksgirl (author)NebulaIX2016-12-15

I don't think you can access that anymore (but I haven't tried looking for a work around). When they made some major changes to the site, they dropped some functionality... :(

Select as Best AnswerUndo Best Answer

user
NebulaIX (author)2016-12-15
user
kelseymh (author)2012-08-10

Here'sanexampleusingcolornames, instead of RGB hex codes.

Select as Best AnswerUndo Best Answer

user
kelseymh (author)kelseymh2012-08-10

And very interesting that the name "orange" didn't work!

Select as Best AnswerUndo Best Answer

user
canucksgirl (author)kelseymh2012-08-10

That is a little weird that orange didn't work?!

Technically, the code version I used should work (I use it all the time!)

Select as Best AnswerUndo Best Answer

user
kelseymh (author)canucksgirl2012-08-10
Well, first, the "color" attribute is deprecated (see HTML 4.01), and second, when you use the RGB code, you must prefix the hex value with an octothorpe:
<font color="#aabbcc">


Thus: I wonder what color that is?

Select as Best AnswerUndo Best Answer

user
bajablue (author)kelseymh2012-08-11

It looks like babyblue on my monitor, kelseymh.

Select as Best AnswerUndo Best Answer

user
bajablue (author)bajablue2012-08-11

HA! I did it, thank you very much! ;-D It works both ways!

kelseymh, I've selected a secret number. Please pick a number between 1-10. I'll ask CG to do the same. Whoever comes closest to the secret number wins "Best Answer"... and a new car!!!! :-)

Select as Best AnswerUndo Best Answer

user
kelseymh (author)bajablue2012-08-11

Canucksgirl should get Best Answer. She got here first, with all of the right information for you. I just added a bit.

Select as Best AnswerUndo Best Answer

user
canucksgirl (author)kelseymh2012-08-12

Thanks. I would've lost the guess.... I'm on holidays. Just doing a quick check in.

Select as Best AnswerUndo Best Answer

user
artfulann (author)kelseymh2012-08-11

#8 I'd like a truck if I win .

Select as Best AnswerUndo Best Answer

user
bajablue (author)artfulann2012-08-11

@ artful: LOL! ;-D

@kelseymh: okey-dough-key!

Select as Best AnswerUndo Best Answer

user
kelseymh (author)bajablue2012-08-11

Interesting. I used the exact (arbitrary) hex code I posted, which comes out looking kind of grey. You used the "blue" color name.

Select as Best AnswerUndo Best Answer

user
bajablue (author)kelseymh2012-08-11

It looks baby-blue on my screen. :-)

Select as Best AnswerUndo Best Answer

user
kelseymh (author)canucksgirl2012-08-10

Hmmm. How weird. I used "View Source", and in my comment above, what is saved on the I'bles server is "<font>an</font>", which doesn't really do much, does it?

So I tried doing another orange test here: <font color="orange">test</font>. But the color disappears in the preview.

Ah, ha! In the HTML 4.01 document, they list just 16 allowed color names, and orange is not one of them! Why not? I have no idea. But to get orange you have to specify a hex code, such as #FF8000.

Select as Best AnswerUndo Best Answer