How do I make shaded box for a quote?

A quote box looks like this:

Chilihead is smert.

And, it’s not as hard to do as you might think. You will, however, have to get your hands dirty in your HTML. Wait! Don’t leave! You can do this! Deep breaths, people. Stay with me.

To make a blockquote without a box, you simply type your text, then highlight it, then click on the Quote Mark button. If you look at your Edit HTML tab, you’ll see the HTML for a blockquote is <blockquote>This is some quoted text.</blockquote>

To spice up your quote you may want to add a shaded box so it stands out on your page more. To do that, copy and paste this code into your Edit HTML tab (not your Compose tab).

<blockquote style="border: 2px solid #666; padding: 10px; background-color: #ccc;"> This is some quoted text.</blockquote>

You can change any of the bolded elements to your preference. The border can be 10px instead of 2px if that’s your thing. It can be dashed, dotted, or invisible instead of solid; just change the word "solid" to "dashed" (without the quotes) or whichever type of border you want.

The #666 and #ccc are HTML elements that tell your browser what color to use. They are called Hexadecimal values. Here is a chart that will help you choose which value you’d like to use for your background and border colors.

Finally, change the italicized part that says This is some quoted text to the actual text you’d like to use. Click over to the Compose Post tab and make sure you like what you see. If you do, click Save. If not, keep making changes until you’re happy and then click Save.

See? That wasn’t so bad. You are an HTML-wielding quoter!

Comments

  1. Thanks! I’ve always wondered how to do this! Do you do it for each individual quote? Dumb question, I know….
    dawn:)

  2. If you have a style.css file and you know where it is located(usually in the theme directory), you can add the following text at the bottom of that file:

    blockquote {
    color: #888;
    border: 2px solid #333;
    padding: 10px;
    background-color: #ccc;
    }

    You only need to use the bare blockquote tag from here on in your posts.

  3. oh Bless You for answering my question! ;0)

    and thank you tabrez for following up on dawnz question, because I was about to ask that part of it too.

    Thank you!
    Karla

  4. Not only is Chilihead “smert” … but she is one “#C0000-hot” internet-savy mamacita! (that’s “red-hot” in plain-ol’-english)

    You can also go here: http://www.colorschemer.com/online/ and get a great, GREAT tool for color schemes, and you can click on the color blocks for all kinds of shades, variations, etc. Very cool stuff!

  5. Thanks, Chilihead. I’ve been trying to get my hubbie to show me how to do this for a while now. Next time I want to blockquote I can do it all on my own! :-)

  6. Wow, good info. I should start reading this blog more often! (*wink*)

  7. I’ve always wondered about this one… Now watch; there’s going to be a bunch of shaded quotes around the sphere this week!

  8. You read my mind. I was just trying to figure this out last week!

    I’m going to be block quoting everything I can get my blockquotes around. Now I just need to see if I can make tabrez’s idea work.

    Thanks!

  9. I figured it out! All I had to do was change the blockquote in my template. Thanks again to everyone!

  10. Thank you for the helpful info. How did I exist before I could google “html shaded box”?? Oh, I remember – didn’t have computers or internet!!

  11. Hi, thanks for all this has been very helpful. I have a question though, I want to create these shaded boxes and add other things into them like products or ads so I can uses them in my sidebars. Can anyone help me with that, and how do you change the font colour in the shaded box with this one? Thanks.

  12. I’ve been trying to do this for ages! Thank you for making it so simple to do!

  13. Thanks for this awesome tutorial! I’ve been trying to figure out how to do this for forever and all the tutorials I found were rather confusing.

    When I do this though it makes the box going all the way to the edge of the post. My post to show you the example hasn’t been posted yet but the example is actually from the person who posted above me. http://readersdialogue.blogspot.com/2012/01/glimmerglass.html

    So when I do it…the box extends all the way to the left side of the book cover. There isn’t any space there like there is with her box.

    Any idea why?

  14. I suspect it’s because of the width of your main column. I think you’ll have to adjust the padding number until it works for you.

  15. You should’ve heard the sigh of relief that came out when your web page popped up from my Google search “shaded text box around text HTML”. lol

    Thanks a lot for making this so simple. And also for sharing the CSS styling for the box in the comments section. (That’s my reward for actually reading comments!)

    One question though… the little ” still shows up alongside the box when I input the code on my website. Is there a way to get rid of that one little quotation mark?

  16. Thank you so much!!!! This is perfect! I was looking all over the place for this. I’m very happy now!

Speak Your Mind

*

css.php