The Making of TBODC - Part 4

Now for the sake of brevity and my sanity (including yours, most likely) I'm not going to write down every little change I made to my code for the following tweaks. By this time you should have gleaned enough information from the previous three tutorials to figure these things out on your own (hopefully).

Note: Please keep in mind that the tweaks mentioned in these tutorials are for my own Thisaway template. The code and structure may vary depending on what type of template you are using.

And now, as Rocky the Squirrel was fond of saying ... here's something I hope you'll really like.

Hacking the Design

By now I wanted to embellish some elements on my page. You know, to make it look nice. I saw stuff on other people's blogs and I wanted some of those things on my blog, too. Stuff like ... a nice embedded comment form!

By default Blogger had my comments loading in a new window on a page that didn't look anything like mine. That had to die. Thankfully the wonderful folks at Blogger actually listen to us and are always adding neat new features, like ... an embedded comment form! Yaaay!

If you want to check and see if you already have this option then go to your Dashboard, click on Settings, and then Comments...



Look for the section titled Comment Form Placement and see if there is a selection for Embedded below post. If there is then click the radio button to select it and then save your settings.



If you don't see the embedded comment form option then try logging into Blogger In Draft. When you do this you'll see that the usual blue Blogger header now has a checkered pattern and there will be a light blue tab that says 'Make Blogger in Draft my default dashboard.'



You don't have to check the box in the tab, just go to your Settings as I described above and you should now see the embedded form option. Select and save and viola - you're embedded!

Now if you want to know more about installing the form or if you run into any trouble then check out this Blogger Buster article here. For this tutorial I'm just providing the code I used to style my own comment form. You will have to adjust the values in this code to suit your own blog design.

I discovered how to do this one day when I stumbled upon a comment left by Faisal Admar who posted this entire comment code in a reply he made to the Blogger article New Feature: Embedded Comment Form.

Thanks, Faisal! Wherever you are...

First, we must go to our template code via Layout > Edit HTML. You do not need to expand the widgets, just look for this code here...

.post h3 a, .post h3 a:visited {
color: $postTitleColor;
}

#comments h4 {
margin-top: 0;
font-size: 120%;
}


/* text
----------------------------------------------- */

Next, copy all the highlighted code below and, beginning with #comments h4, paste it...

.post h3 a, .post h3 a:visited {
color: $postTitleColor;
}

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: white;
}

#comments-block {
margin:0em;
line-height:1.6em;
background: #999;
color: black;
padding:1em;
}

#comments-block .comment-author {
margin:.5em 0;
}

#comments-block .comment-body {
margin:.25em 0 0;
background: #999;
}

#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}

#comments-block .comment-body p {
margin:0 0 .75em;
background: #999;
}

.deleted-comment {
font-style:italic;
color:gray;
}

/* text
----------------------------------------------- */

Now that's really all there is to it. If you go to your blog and click on the comments link in one of your posts you'll now be greeted with your very own stylized comments area. Neat, eh? Of course you'll want to return to the code and play around with the values to suit your own tastes.

Next I wanted to make my own stylized blockquotes like the ones you see in this tutorial. I got the idea for this from Amanda's tutorial on Blogger Buster. Thanks, Amanda!

Now this one wasn't very hard. You just locate your blockquote code, which is just under the body code in the Global section. This is what mine looked like...

blockquote {
margin: 0;
padding-top: 0;
padding-$endSide: 10px;
padding-bottom: 0;
padding-$startSide: 10px;
border-$startSide: 6px solid #f7e8d8;
border-$endSide: 6px solid #f7e8d8;
color: $postTitleColor;
}

I simply copied one of the examples that Amanda had on her page, pasted it in place of the one above, and then styled to suit...

blockquote {
margin:1em 20px;
border: 1px solid #E2B96A;
background: #FFE4B2;
padding: 10px;
}

The results are the light brown box with the thin beige border you're looking at right now. Cool, huh? I think so.

I'm not a big fan of all those underlined words on a page so after some Googling I found this nifty little fix on EchoEcho. To install this I went into my template (via Layout > Edit HTML) and beneath the <head> tag I placed the following highlighted CSS...



This CSS code removed the underlines from all my links so that they would only appear when someone hovered over them with their mouse pointer. In addition this also adds a nice red color for the hovered links. If you want a different color then just type it in or you could always use the hexadecimal value of a color you like (for example #FFCC33, which would be a light gold).

Now if you're curious what that other CSS style is right above that one then I shall tell you. This little bit of CSS is referred to as the Global Whitespace Reset which uses a universal selector (*) to reset all the padding and margins on your entire page. The results are pretty amazing. For instance, when I was building my content boxes for my sidebar I had these irritating spaces around the divs when I viewed the page in Firefox and IE, but after inserting the code below those spaces went bye-bye.



This helpful CSS trick zeros out the padding and margin of every single element on the page. After adding this rule, you must specify margins and padding for each element in the layout unless you want them to remain at zero. Avoid (or use caution when) applying this rule to pages that contain forms as it may interfere with usability. A more detailed explanation for the Global Whitespace Reset can be found here on Andrew Krespanis' site, Left Justified. The credit for this one goes to Paul O’Brien's eye-opening article No Margin For Error. Thanks, Paul!

And so, my dear readers, we have finally reached ...

- The End -

Well, folks, I hope you have enjoyed this four part tutorial on how I built my blog. Audee over at Graphic Identity informed me that I should have used more images so I went back and added a few here and there. As I said before I'm not great at writing tutorials, but I can only improve upon this if you take the time to leave me your suggestions. Don't be afraid to do so, because I welcome critiques as much as I do praise.

My thanks to Ecko for suggesting this tutorial and to you, dear readers, for following along. And now, in closing, I leave you with the immortal words of my favorite pink mountain lion, Snagglepuss ... Exit, stage left, or right even!