Happy Friday, Cranky Users! We had such a good time last week with special characters and text-formatting tags! Someone asked about color, and that seems like an obvious followup for this Friday. Let's see if we can figure it out, beneath the orange squiggle. Many thanks to Snud for the awesomely cranky BearSharkTopus!
Suppose we take a little detour into making a table with html? That will help us understand what's going on with colored boxes. Last Friday, I had a table of special characters, and this was the first row:
|♥||& hearts;||¢||& cent;||¡||& iexcl;|
<tr> <td>♥</td> <td>& hearts;</td> <td>¢</td> <td>& cent;</td> <td>¡</td> <td>& iexcl;</td> </tr>
We know that, when we have a tag in pointy brackets that starts some style, we generally need another one with a forward slash to close it. Between the members of this pair, we put whatever will have that style, the way I just wrote <strong>tag</strong> to make that boldface word. Sometimes we can add more information to the opening tag. So our table goes inside <table> tags, and we add border="1" with no spaces before or after the = sign to make our table have lines around the cells. If we want columns and rows but no boxes, we can leave that out.
Inside a table goes a table row. That's what the <tr> and </tr> tags do. In the example above, if I wanted to start a second row, I'd put in another <tr> - </tr> pair with more stuff between them, after the first row closed with the </tr> tag.
And inside a table row go table cells. I know! <td> does not stand for "table cell"! (It stands for "table data".) So in our row, we put as many <td> - </td> pairs as we want cells, and inside them, we put whatever we want in the cells. Okay so far? Onward, then!
|Our basic knowledge about how to put text inside boxes with a colored background comes to us through the generosity of peraspera and the Gulf Watchers group. I'm simplifying a bit for clarity. To do this (and it will work in comments as well as diaries), we write some html that makes a one-cell table with the background color we want. It looks like this:
<tr> <td bgcolor="#F0F8FF">Whatever we want in the colored box</td> </tr>
Just as we added the attribute border="1" to the <table> tag, here we're adding bgcolor="#F0F8FF" to the <td> tag for our one cell. The code "#F0F8FF" designates this color, and bgcolor means background color.
What if I want colored letters? Red hearts? ♥I don't have an answer for that, and it makes me cranky. Keeping in mind that I am one diary (or less!) ahead of my cranky friends in knowing anything about html, I've spent the last 45 minutes in the dead of night trying to apply color to the <font> tag, by carefully following the instructions on the intertubez, and I got nothin'. Any html expert with advice for us is most welcome in the comments! I'm starting to suspect that the site doesn't allow us to override its font color, just its background color. That would be a shame, but we can undeniably be obnoxious with background colors too.
|The rather festive sample above is a table without the border="1", where each cell has a different background color. The colors in it are among a small group you can specify by name. The names are title case and are case-sensitive, so red must be called "Red", for instance. They're used the same as the numbers: <td bgcolor="Red"> There are innumerable color charts just a Google away (I'll give some links), but I think you'll agree if you mess with it a bit that peraspera has done an enormous public service by choosing the easy-on-the-eyes color in the first box. Picking these colors is sort of like looking at those little paint chips in the hardware store -- the sample looks very pale, but if you paint the whole room that color, you may find it a trifle psychedelic.
This is "#FAF8CC".
|This is "#C3FDB8".
Links to color charts:
http://www.kanzaki.com/... (Bottom has a good chart of the colors you can call by name)
http://www.utexas.edu/... (Note that UT orange is said to be #CC5500 -- good to know!)
UPDATE: rserven confirms below that we are barred from changing text color here.
UPDATE: Much later, two new color charts are volunteered:
JanF offers http://www.w3schools.com/...
asterkitty tells us about http://www.ficml.org/...