Word Count Widget

Visiting Drew’s blog, I saw he has a lovely text widget which he calls “WIPS” (works in progress). I suggest you head over to Writerly Words to see the widget for yourself, but it’s essentially progress bars for each novel he’s working on. I thought it was a brilliant idea, so I snatched the code from the page source and modified it a bit to make my own word count widget for NaNoWriMo.

Now of course you can get the official NaNoWriMo word count widgets, though the 2010 ones aren’t coming out until November 1st. In fact, I would recommend that over my custom one as I’m pretty sure the official one automatically updates when you update your word count on your author page. However, I thought I would give a little tutorial on how to make it anyways.

*Disclaimer: I did not write this code, I simply modified the code from Drew’s blog. Unless he tells me differently, the original code belongs to him. I am not an HTML expert, so feel free to correct any errors I make. This post is so you can take what I know and modify it for your own use.

If you were to look at the page source for my blog, you would see something like this:

<p>NaNoWriMo 2010 Word Count
<div style="text-align:right;width:100%;margin:auto;">

<div style="text-align:left;border:ridge 2px #61300D;background:oldlace;overflow:hidden;margin:2px auto;">
<div style="font-size:0;line-height:0;height:10px;min-width:0;max-width:100%;width:0;background:goldenrod;">
</div></div>0 / 50,000</div></p>

So what does that mean?

the <p> tag means paragraph, and that’s really all there is to it. The fun stuff starts in the next line:

<div style="text-align:right;width:100%;margin:auto;">

The only part you want to mess with here is the text-align:right;. This sets the 0 / 50,000 to the right side of the widget. You can also set it to left or center. width:100%; determines the width of the bar itself. If you want to make the bar smaller horizontally, make this number smaller. The margin:auto; sets the margins on either side of the bar to be the same. In other words, using auto margins centers the progress bar. You can also set the margins to be a specific number of pixels, but lets just leave it at auto.

<div style="text-align:left;border:ridge 2px #61300D;background:oldlace;overflow:hidden;margin:2px auto;">

Yay more fun stuff! The text-align doesn’t do anything in this case because I have no text. If I were to put text at the end of this line, it would follow that alignment. This text would appear inside of the progress bar, like words in a table.

The border style is “ridge” and it’s 2px wide. There are several different border styles which I suggest you try out on your own, as well as changing the wide of it to see what style you can come up with. The number after the hash (#) sign is the border color, in hexadecimal.

The background color shows you a different way to declare colors: by name. This is the background of the progress bar. Google “colors in HTML” and you’ll find tons of lists, experiment to see what you like best.

For a short and simple explanation of overflow, check out Quirksmode.org. I suggest you leave it at hidden for this purpose.

The margin tag here means there is a 2px margin for the top and bottom, but auto margins for left and right. In other words, there are 2px of space above and below the progress bar, and it is centered horizontally.

<div style="font-size:0;line-height:0;height:10px;min-width:0;max-width:100%;width:0;background:goldenrod;">

Unless you put text here, the font-size and line-height aren’t going to make a difference. font-size is self-explanatory. line-height is the amount of space between lines of text. These are irrelevant for this widget, but you can read more about it at Webdesign.org.

Height, however, is the height of the progress bar. Increase this number if you want the bar thicker, and decrease if you want it thinner.

The next three tags are connected and mostly intuitive. You shouldn’t have much of a reason to change the min-width and max-width. The third one is where you would change the displayed progress. The easiest way to do this, in my opinion, is by percentage. If you’ve hit 10k out of 50k words, change the width:0 to width:20% and the progress bar will cover 20% of the box, starting from the left. Conversely, you can change the min-width to 20% instead and achieve the same effect, but that’s not as intuitive.

The background in this case is the color of the progress bar as it fills the box. The same rules for colors apply here. As far as aesthetics go, it looks better to have this color be darker than the previous background color, and the border color darker than both. That’s just my opinion though. Play around with colors and find what best works for you.

Almost done!

</div></div>0 / 50,000</div></p>

Anything with a slash means it’s closing what you declared before. In HTML, tags close in the opposite order you declare it. So in this case, the first </div> closes the the bit I just explained, the part with the progress bar. In other words, anything that happens after this </div> does not have the qualities we previous declared.

The second </div> closes the portion where we declared the border style. Nothing after this point will carry those attributes.

But we had three div styles. So far, we’ve only closed the last two. Remember what the first one was?

<div style="text-align:right;width:100%;margin:auto;">

Oh right, our text! Here is where we finally put in our word count, which for NaNoWriMo will be 0/50,000, aligned to the right side of the widget.

Close off the last div style, end the paragraph, and we’re done!

Add this code to your own text widget and play around with it. There are tons of things you can do to embellish it and personalize it however you want. I’d love to see what you can come up with.

<p>NaNoWriMo 2010 Word Count
<div style="text-align:right;width:100%;margin:auto;"><div style="text-align:center;border:ridge 2px #61300D;background:oldlace;overflow:hidden;margin:2px auto;"><div style="font-size:0;line-height:0;height:10px;min-width:0;max-width:100%;width:25%;background:goldenrod;"></div></div>0 &#047; 50,000</div></p>

About Squishy

Writer, dancer, gamer, and admirer of all that is beautiful.

Posted on October 7, 2010, in Ishy Writes! and tagged , , . Bookmark the permalink. 3 Comments.

  1. The promised widget! 😀 Thanks so much for posting how to do it…. and for encouraging me to go for it this year. I can’t wait to get started. I wish it were November 1st tomorrow.

    • Oh I know I’m so excited for it! Feel free to add me as a writing buddy if you want (link is on my web badge). Good luck on NaNo and happy writing ~ !

  2. I would love that. Happy writing to you too!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: