Dashboard

In the code for this template, the three columns of links at the bottom part of this blog are called the "dashboard." The left column is "dashboard1," the middle column is "dashboard2," and the right column is "dashboard3."

One problem I've had with this template from the start is that the title for each set of links butted up against the last link in the set above it. So, I've been pouring over the code trying to figure out how to fix this. I noticed that this problem did not exist in the sidebar to the right, that there was plenty of space between the small block of text with my photo and brief description and the "Writer-Speak . . ." quote. With that as my guide, I tried to find the code that spaced them apart. I found some code that read:

.sidebar .widget{margin-bottom:1.5em;}

I know a little about CSS (Cascading Style Sheets), so I know that a dot preceding a name defines a "class." "Classes" are used in conjunction with HTML code to give a blog's contents a uniform appearance. In the following code, for example, . . .

<p class="name_of_class">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

The class name is inserted within the paragraph tag (<p class="name_of_class"> insert_text_here </p>), and the class name tells the browser to refer to the class defined in a blog or web site's cascading style sheet. Style sheets are sometimes embedded within an HTML page, but more often they are separate, thus saving on the file size for each page of HTML code: one page of CSS describing all the layout and text attributes and more for a blog or web site (instead of having all that CSS code embedded on each separate page of HTML code) and then separate pages of HTML code for each page in a web site. It makes not only for less file space, but also for easier blog/site management.

The point of all this detail is to say that ".sidebar" and ".widget" are classes. The information in the code following ".widget" — namely, {margin-bottom:1.5em;} — tells the browser how much space is be placed below each widget. That's what each block of text in the sidebar and each list of links in the dashboard are: widgets.

(In "1.5em," "em" is a typographical term. It is, in fact, used in the proper name of the long dash (—), known as the "em-dash." The "em" refers to the letter "M"; an em-dash is the width of the upper-case "M" in any typeface. There are three distinct dashes in a typeface and most folk don't call them correctly. There's the hyphen "-"; the en-dash "–"; and the em-dash "—". When put side-by-side, the difference between them is obvious: - – —. Hyphens are used to hyphenate words and to break up a word between syllables when it breaks at the end of a line. En-dashes are used in numbers, typically between dates: 19 Mar 2001 – 31 Mar 2001. Em-dashes are used, per Strunk and White, "to set off an abrupt break or interruption, and to announce a long appositive or summary." They explain, "A dash is a mark of separation stronger than a comma, less formal than a colon, and more relaxed than parentheses." It is used "only when a more common mark of punctuation seems inadequate.")

So, taking the code mentioned above as my cue, I searched for the code for the widgets at the bottom of this blog, and that's how I discovered those three columns are called the "dashboard." I took the code and changed it — .dashboard .widget{margin_bottom:1.5em} — placed it along with the other "dashboard" code, saved the template, refreshed the blog page, and . . . it didn't work. Something was wrong. I knew it had to be the class name. After more searching through the code, I found what I believed was the correct class name, ".col3_content," which is an abbreviation for "column 3 content." I replaced ".sidebar" with ".col3_content," saved the template, reloaded the blog, and . . . violà! . . . it worked!

I enjoy messing with code like this, but I don't know if I could do it for a living or not. For one thing, it would require some training that I don't have.

My next goal is to figure out how to do the same thing to place space between the end of a blog post and the comment and label links below it. With this post, you can see just how little space there is. I hate it. It must be changed. [EDIT: This is now fixed.]

The goal I have after that is to increase the leading in my blog posts. "Leading" is another typographical term. It refers to the space between lines of text. In this blog, the lines are too close together for my tastes. I hate it. It must be changed, too. (Sometimes, I wonder what the hell some of these designers are thinking. :P) [EDIT: This is now fixed, too.]

[EDIT: It would appear that a lot has changed since I last did any major muckin' about with Cascading Style Sheets! o.o I've been able to slowly, but surely, decipher the mess, but while I recognize a lot of the code, there's a lot of new shit swimming around in that pool that I don't recognize. It's made me understandably cautious, lest my muckin' about should bite me in the arse by way of screwin' up this blog.]