2731Views38Replies

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
None
canucksgirl

Best Answer 6 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
None
bajabluecanucksgirl

Answer 6 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
None
artfulanncanucksgirl

Answer 6 years ago

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

0
None
bajabluebajablue

Answer 6 years ago

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

0
None
bajabluebajablue

Answer 6 years ago

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

0
None
canucksgirlbajablue

Answer 6 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
None
canucksgirlbajablue

Answer 6 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
None
canucksgirlcanucksgirl

Answer 6 years ago

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

0
None
Vygercanucksgirl

Answer 6 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
None
canucksgirlVyger

Answer 6 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
None
icengcanucksgirl

Answer 6 years ago


<font color="66ccff">

Cool

</font>

0
None
canucksgirliceng

Answer 6 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
None
kelseymhcanucksgirl

Answer 6 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
None
canucksgirlkelseymh

Answer 6 years ago

Correct. *grumbles in frustration over elementary error*

0
None
artfulanncanucksgirl

Answer 6 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
None
canucksgirlcanucksgirl

Answer 6 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
None
NebulaIX

2 years ago

where is source?

0
None
canucksgirlNebulaIX

Answer 2 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
None
NebulaIX

2 years ago

i needed it too!

0
None
kelseymh

6 years ago

Here'sanexampleusingcolornames, instead of RGB hex codes.

0
None
kelseymhkelseymh

Answer 6 years ago

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

0
None
canucksgirlkelseymh

Answer 6 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
None
kelseymhcanucksgirl

Answer 6 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
None
bajabluekelseymh

Answer 6 years ago

It looks like babyblue on my monitor, kelseymh.

0
None
bajabluebajablue

Answer 6 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
None
kelseymhbajablue

Answer 6 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
None
canucksgirlkelseymh

Answer 6 years ago

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

0
None
bajablueartfulann

Answer 6 years ago

@ artful: LOL! ;-D

@kelseymh: okey-dough-key!

0
None
kelseymhbajablue

Answer 6 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
None
bajabluekelseymh

Answer 6 years ago

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

0
None
kelseymhcanucksgirl

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