Skip to main content

two penguinsWelcome 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. Color toolHere 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.

Originally posted to New Diarists on Thu Aug 16, 2012 at 02:30 PM PDT.

Also republished by Cranky Users and J Town.

Your Email has been sent.
You must add at least one tag to this diary before publishing it.

Add keywords that describe this diary. Separate multiple keywords with commas.
Tagging tips - Search For Tags - Browse For Tags


More Tagging tips:

A tag is a way to search for this diary. If someone is searching for "Barack Obama," is this a diary they'd be trying to find?

Use a person's full name, without any title. Senator Obama may become President Obama, and Michelle Obama might run for office.

If your diary covers an election or elected official, use election tags, which are generally the state abbreviation followed by the office. CA-01 is the first district House seat. CA-Sen covers both senate races. NY-GOV covers the New York governor's race.

Tags do not compound: that is, "education reform" is a completely different tag from "education". A tag like "reform" alone is probably not meaningful.

Consider if one or more of these tags fits your diary: Civil Rights, Community, Congress, Culture, Economy, Education, Elections, Energy, Environment, Health Care, International, Labor, Law, Media, Meta, National Security, Science, Transportation, or White House. If your diary is specific to a state, consider adding the state (California, Texas, etc). Keep in mind, though, that there are many wonderful and important diaries that don't fit in any of these tags. Don't worry if yours doesn't.

You can add a private note to this diary when hotlisting it:
Are you sure you want to remove this diary from your hotlist?
Are you sure you want to remove your recommendation? You can only recommend a diary once, so you will not be able to re-recommend it afterwards.
Rescue this diary, and add a note:
Are you sure you want to remove this diary from Rescue?
Choose where to republish this diary. The diary will be added to the queue for that group. Publish it from the queue to make it appear.

You must be a member of a group to use this feature.

Add a quick update to your diary without changing the diary itself:
Are you sure you want to remove this diary?
(The diary will be removed from the site and returned to your drafts for further editing.)
(The diary will be removed.)
Are you sure you want to save these changes to the published diary?

Comment Preferences

Subscribe or Donate to support Daily Kos.

Click here for the mobile view of the site