3087Views39Replies

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? 

Discussions

0
canucksgirl
canucksgirl

Best Answer 8 years ago

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. :-)

html-color-palette-81.gif
0
bajablue
bajablue

Answer 8 years ago

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!!!! :-)

0
artfulann
artfulann

Answer 8 years ago

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

0
canucksgirl
canucksgirl

Answer 8 years ago

So you liked that huh? :-)

0
bajablue
bajablue

Answer 8 years ago

Trying!

0
bajablue
bajablue

Answer 8 years ago

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

0
bajablue
bajablue

Answer 8 years ago

Maybe this time?

0
bajablue
bajablue

Answer 8 years ago

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

0
canucksgirl
canucksgirl

Answer 8 years ago

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


source.jpg
0
bajablue
bajablue

Answer 8 years ago

Mebbee diss'l wurk?

0
canucksgirl
canucksgirl

Answer 8 years ago

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.

0
canucksgirl
canucksgirl

Answer 8 years ago

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

0
Vyger
Vyger

Answer 8 years ago

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.

0
canucksgirl
canucksgirl

Answer 8 years ago

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...

0
iceng
iceng

Answer 8 years ago


<font color="66ccff">

Cool

</font>

0
canucksgirl
canucksgirl

Answer 8 years ago

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*

source.jpg
0
kelseymh
kelseymh

Answer 8 years ago

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

0
canucksgirl
canucksgirl

Answer 8 years ago

Correct. *grumbles in frustration over elementary error*

0
artfulann
artfulann

Answer 8 years ago

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!

0
canucksgirl
canucksgirl

Answer 8 years ago

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

0
sly-corner
sly-corner

5 months ago

<font color="ff4e00"> works nicely in the text editor, and I can press save. But when i press Full Preview, all the formatting tags seem to get wiped out. What is happening please ?

0
NebulaIX
NebulaIX

3 years ago

where is source?

0
canucksgirl
canucksgirl

Answer 3 years ago

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... :(

0
NebulaIX
NebulaIX

3 years ago

i needed it too!

0
kelseymh
kelseymh

8 years ago

Here'sanexampleusingcolornames, instead of RGB hex codes.

0
kelseymh
kelseymh

Answer 8 years ago

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

0
canucksgirl
canucksgirl

Answer 8 years ago

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

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

0
kelseymh
kelseymh

Answer 8 years ago

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?
0
bajablue
bajablue

Answer 8 years ago

It looks like babyblue on my monitor, kelseymh.

0
bajablue
bajablue

Answer 8 years ago

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!!!! :-)

0
kelseymh
kelseymh

Answer 8 years ago

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

0
canucksgirl
canucksgirl

Answer 8 years ago

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

0
artfulann
artfulann

Answer 8 years ago

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

0
bajablue
bajablue

Answer 8 years ago

@ artful: LOL! ;-D

@kelseymh: okey-dough-key!

0
kelseymh
kelseymh

Answer 8 years ago

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

0
bajablue
bajablue

Answer 8 years ago

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

0
artfulann
artfulann

Answer 8 years ago

periwinkle

0
kelseymh
kelseymh

Answer 8 years ago

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.