Supporting the Senate Health Care Bill
Reasons to Support the Senate Health Care Bill

ELDER GEEK: Playing With Boxes

VirginiaDeBolt75x75Virginia DeBolt (bio) writes the bi-weekly Elder Geek column for Time Goes By in which she takes the mystery out of techie things all bloggers and internet users need to know to simplify computer use. She has written several books on technology and keeps two blogs herself, Web Teacher and First 50 Words. You will find links to Virginia's previous Time Goes By Elder Geek columns here.


One of the questions from back in August when I asked what readers wanted to know was how to put a quotation from a news source in a box on a blog. I'm going to answer that question today, even though some of the bloggers among you may not be able to get to the file that controls this.

Today's post is the geekiest one I've written for Time Goes By. If it makes your eyes cross, please tell me I'm getting too geeky. If you get excited by the geek factor and try it out, please let me know that, too.

CSS means Cascading Style Sheet. CSS is what you use to determine how things look on a blog. If you use Wordpress for your blog, and it is hosted free with a URL like myblog.wordpress.com, you may not be able to get to the files that control the CSS. If you are on Blogspot, you can make changes to the template CSS.

If your blog is like Time Goes By, which Ronni hosts on her own domain and controls herself, you should be able to get to the CSS file with no problem.

So, for the bloggers who can work on their CSS, here's how to make a box around a quote.

This image shows a bit of CSS from a Blogspot blog. This is in the template area of the blog. In Wordpress, the CSS is in a separate file called styles.css. Let's use the image to get a bit of education on CSS.

Blogspot

In the image, you see this:

<style type="text/css">

That's where the CSS starts. On Wordpress, or any other place where the CSS is in a separate style sheet away from the blog template, you see only styles with no <style> at the beginning.

In the image, you see this: /* THE BACKGROUND COLOR, FOREGROUND COLOR AND FONT SETTINGS FOR THE BODY*/

That is a comment, an explanation to help you understand the style rule. It does nothing to the blog's appearance.

Finally you see a style rule:

body {
    margin:0px;
    padding:0px;
    background:#f6f6f6;
    color:#000000;
    font-family:"Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
    }

Here's what that rule means. It's a rule that styles the body. It sets a size for the body margin and the body padding. It sets a background color for the body. It sets a color (meaning the color of the words) for the body. It sets a font for the body. All the colons and semi-colons and curly braces mean something important. If you copy what I tell you exactly, you don't need to worry about what they mean.

What to Style, What to Style?
When you quote a source, you should put the quoted material in a blockquote on your blog. On both Wordpress and Blogger, the icon used to create a blockquote in the text looks like an opening quotation mark. When you select some text in your blog post and click the quotation mark icon, the text is indented. That's a blockquote.

You want to style a blockquote. You need a rule in your CSS for blockquotes. Look carefully at the CSS to see if there already is a rule for blockquote there. Sometimes the word "blockquote" is mixed up among a bunch of other words, so watch closely. Here's the rule on my Wordpress blog, Web Teacher. This rule styles blockquotes that are in my content and blockquotes that are in my comments. The things the rule does to my blockquotes are inside the curly braces.

div.entry-content blockquote, div.comments ol.commentlist blockquote {
    background:url(images/blockquote.png) no-repeat top left;
    margin-left:0;
    margin-right:3em;
    padding:0 0 0 2em;
    }

When I put a blockquote on my blog, here's how it looks.

Blockquoteexample

The quotation mark image shows up beside the blockquote because of the rule for background. The blockquote rule styles background and margin and padding. What this blockquote does not have is a box around it.

Get to Boxes Around Quoted Stuff Already
To make a box in CSS, you use "border." Border can be added to one, two, three, or all four sides of a box. Borders can come in various widths (1px, 10px, 50px, whatever), in various styles (solid, dotted, dashed, groove, inset) and in various colors (black, gray, blue, or color values like #746f70).

If I added some new CSS about border to my rule for blockquote, here's what I might add:

div.entry-content blockquote, div.comments ol.commentlist blockquote {
    background:url(images/blockquote.png) no-repeat top left;
    margin-left:0;
    margin-right:3em;
    padding:0 0 0 2em;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    }

I added a 1px wide, solid border in a black color to my blockquotes. Here's how it looks now.

Blockquoteexample3

The background image of the quotation marks doesn't show up now, which I would fix if I really wanted to do this on my blog.

To play around with borders on your blog, try copying my rules. Make sure you get them inside the last curly brace at the end of the blockquote rule, and make sure you include the colons and semi-colons just as shown here.

Then you can change the width or style or color to suit yourself. Don't be afraid to experiment. Save what you change and refresh your blog page to see how it looks. If you don't like what you see, take it back out of the style rules and go back to the original appearance.

If your blog doesn't already have a CSS rule for blockquotes that you can add border to, make one like this.

blockquote {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    }

Advanced Boxes
Each side of the box can have its own border rule. The sides start from the top and go around clockwise. So you can have a rule for border-top-width, border-top-style, border-top-color that is different in appearance from border-right-width, border-right-style and border-right-color. The other two sides of the box are border-bottom and border-left.

You can have a border on only the border-right part of the box and nothing on the other three sides. Or only on the border-bottom and nowhere else. Or a thick border on the right and bottom, with thinner ones on the top and left so it looks like a drop shadow.

Here's a tutorial on borders from w3schools. If you really get interested in boxes and borders, you can learn more there.


At The Elder Storytelling Place today, Lyn Burnstine: Sleuthing the Shelves

Comments

Love this post. Occasionally, it's fine to write from your uber geek inner soul;-) I have long wanted to use those gorgeous boxes as does Ronni. Alas, a mere Blogspotter am I. THANK YOU. An aside, a helpful link for Blogspotters — Blogger Tips and Tricks.

Thank you, Virginia. I need to know more 'geeky' stuff so I am able to do what I want to do on my blog. I don't have time to try this out but when I return from a trip I certainly will give it a go. I have copied and pasted it.

And Thank you, Tamar, for the link to the help page for Blogspotters. I believe that both of you have helped me make my future posts look more professional.

Goodness. I will read all this again when I get home. I use a box, sort of understand what I use, and this is of the greatest help. Thanks. Happy holiday to you.

Yes, Virginia, you are our Santa Claus. Going to save this and try. Thanks!

Thanks Virginia and Tamar!

Thanks so much, Virginia. I really need to have CSS demystified and this is a great start.

I LOVE this kind of post. Like everyone else, I'm too busy right now to give it a try, but once Santa's come and gone, watch out!!!

Nice post, love it !

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name and email address are required. Email address will not be displayed with the comment.)