Welcome to our series on the basics of visually enhancing your diaries and comments! If you are joining us late, you can find links to the entire series at the top of the first diary in the series, New Diarists: Links & Blockquotes. We update that list as new diaries are added. ♥ Follow us above to see future installments in your stream. |
Lesson 7: Horizontal Lines
Just this week, there was a diary by Scott Wooledge (actually a republish of another author) whose layout made excellent use of horizontal lines. To use such lines in diaries or comments, we use another HTML tag that, like the "break" nomandates introduced last time, is a single tag, not a pair. The tag <hr /> by itself produces a plain line ("hr" stands for "horizontal rule") that divides the width of the space it's in, like this:
In the real world outside of Daily Kos, it is possible to do numerous fancy things to such lines, but the HTML that's allowed in here is fairly simple. We can adjust the width of a line, meaning how far across the page it extends, using either a number of pixels or a percentage:
<hr width="200" />
<hr width="400" />
<hr width="50%" />
|
We can also adjust the thickness of the line, using a number of pixels. Before showing this, I'll remark that, while a plain <hr /> makes what looks like a thin, dark gray line, fattening that line up shows that it's really more like a hollow box. If we want a thicker plain line, we'll also need to add
noshade into the tag. Noshade works a little differently in the outside world, I have heard, but here's what happens here in DKWorld:
<hr size="10" />
<hr noshade size="10" />
<hr noshade size="2" />
<hr noshade size="4" />
<hr noshade size="20" />
|
Finally, and here's the main reason I'm talking about these lines today, we can make them different colors. On Daily Kos, we cannot make our text any color other than black, but we can apply color to other elements of our presentation, and here's where we'll talk about how that works. Below the fold, in our next lesson, we'll use these simple lines to demonstrate how to introduce color.
Lesson 8: HTML Color Codes
A computer screen is like a TV screen, in that it's making pictures with light. When we mix paint, the primary colors from which we can mix all other colors are red, yellow, and blue. When a TV or monitor mixes colors with light, though, its primary colors are red, green, and blue. To describe a color to a computer, we use a code that consists of a pound sign (#) followed by three pairs of characters. Each of these pairs is a hexadecimal number that represents how much red, green, and blue respectively to use. (If you don't remember "base ten" and "base sixteen" from math class, take my word for it.)
You do NOT need to be able to guess what values will result in the color you want! The internetz are crawling with charts and tools that will help you. Here is a pretty good tool that lets you drag the rainbow-color slider on the right to the general color you're interested in, and then move a little circle around in the large box to the left to pick a shade. There's a little box on the top right that shows the color your circle is on, and if you click, it freezes there so you can capture the code (click again to unfreeze). You'll see the code up above the big box. It's written in the color you've clicked, so it may be hard to read, but you can use copy and paste to grab it and put it in your diary after the #.
Here's another tool that some people like and others find hard to look at. If you don't like either of these, try googling "html color codes" and make your own selection! Now, let's see some examples using our lines as color swatches:
<hr size="20" width="50%" color="#24E0E3" />
<hr size="20" width="50%" color="#F21870" />
<hr size="20" width="50%" color="#3FD117" />
<hr size="20" width="50%" color="#6117D1" />
<hr size="20" width="50%" color="#ED9E0C" />
|
It's fun to play with colors, and you can see in my tip jar that one way I've used a colored line is to partition off my sig line from the body of my comments, because I sometimes find it confusing when it looks like someone's sig is part of what they're commenting. Let me please inject a little caution here, though, because this
is a series about how to write better diaries.
Everyone likes pretty, vivid colors! That is why paint commercials so often show people painting their living room purple or some other bright color. However, you may have had the experience of buying some paint based on those little sample chips in the store, and then painting something that color and finding it rather... psychedelic. In our next diary, nomandates is going to be showing us how to make big colored boxes that we can put text in, and I am here to tell you that using boxes with the color scheme of John Lennon's Rolls Royce is not going to draw in readers and encourage them to understand the words you've written. Indeed, you need to err on the side of caution, because your readers are using many different browsers, monitors, and sets of eyeballs, and a color may look brighter or darker to others than it does to you. It's harder to sell a house with a purple living room, and it's harder to sell your ideas when you distract from them with color that's overwhelming, includes too many different hues in one diary, or does not show text (both black and the two orange link colors) clearly.
So if I pick a pretty color like this for a box with text,
|
Ahem! I was saying, if I pick a pretty color like this for a box with text, no one is going to have much idea what I'm writing about, and if I am not already a favorite diarist, they're probably not going to spend much time squinting to try and figure it out. If you're looking for a color that will have text on top of it, using that first color tool we looked at, you're going to want to drag your circle along the top of the big square till you get off to the left somewhere, where colors like #C1F1F5, #F3F5C1, and #DFFAC3 reside.
nomandates will show you a trick for surrounding text with a brighter color so it's still readable. BUT there is a reason that front page stories here are not gussied up with rainbow-colored boxes. If you're reporting a news story, you probably don't need colored boxes. If you're writing a personal story or showing pictures, a little color is okay. If you have a diary series like this one, that contains some "boilerplate" text about the series that appears every time, colored boxes can be useful for setting off that text and giving your series a "look". Like everything else, color is a tool. Judicious use of it can be an asset; too much and you become the "crazy color lady". Note: As a real-life crazy color lady, I am the last person who should be giving advice on tasteful and restrained use of color. Please ignore my purple shoes when considering the contents of this diary. Okay! Let's see some COLORED LINES in the comments!
In general, formatting "tricks" that can be done in a diary can also be done in a comment. Practicing your skills in comments (in this diary, for instance!) is an easy and low-stakes way to know what you're doing before you work on a diary. So while these lessons focus on how to do things in comments, know that the same tools will produce the same results in a diary. |
Preview Is Our Friend!
Preview is a lifesaver in TWO important ways! First, it shows us how our comment or diary will look when posted. That may NOT be the way you thought it was going to look when you composed it! Always take advantage of the ability to look at the preview and make sure everything works and looks exactly the way you planned. If it doesn't look right in Preview, your comment or diary will not magically improve after being posted!
Second, when writing a diary, Preview is also the way to SAVE your diary draft. If you're working on a diary, clicking Save & Preview periodically is a very good idea. Otherwise, if the site goes down, or your browser tab gets closed by mistake, you are back to the drawing board!
|
Additional Resources for Diarists
This diary is part of a series by nomandates and belinda ridgewood on the basics of enhancing diaries and comments at Daily Kos. All of them can be found at the New Diarists group page. Click the New Diarists' ♥ to follow the group and get all the diaries in your stream. Diaries in the series so far are:
If you have questions about any aspect of posting comments or diaries, feel free to post a comment and ask. These threads are for sharing, so more experienced Kossacks are welcome to both ask and answer questions, and to share advice and war stories.
We INTEND this thread as a place to practice, not just today's skills but anything you're working on with regard to posting on Daily Kos. Do not be afraid to write a comment and see if you've understood. We try to keep an eye on older diaries, but obviously, if you'd like coaching, the best place to practice is in the most recent diary. If you need advice after a diary has gotten quiet and no one's seeing your comment to help you, you may certainly send a private message (Kosmail) to one or both of us. (We don't advise a message to the group, because those don't let anyone know they're there!)
More resources: New Diarists: Resources for All provides links to 1) resource diaries for drafting, formatting, and mechanics of the site; 2) advice diaries re writing, interacting with commenters, and working with groups; and 3) a list of helpful groups and series for New Diarists. And Cranky Users: Our Story So Far lists how-to diaries published during DK4's first year.
|
New Diarists is a safe place to practice diary writing skills with a mentor's guiding hand. Experienced diarists are invited to join and buddy up with new diarists, and new diarists are welcome to join and to ask for help. The group's Publication Manager provides a space where we can collaborate on diaries and help with everything from revising to formatting to promoting your new diary.
How-to and Help diaries, such as smileycreek's New Diarists: How to Collaborate with Us on a Diary, are published to the New Diarists group. Visit our home page and click on the little ♥ to follow us.
Ready to play? Send a private message to nomandates for an invitation to join the group.
|