Skip to content

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!

18 thoughts on “How do I make shaded box for a quote?”

  2. Nikki

    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?

  5. Jamie

    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?

  7. Victoria Hansen

    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.

  8. Jeannie

    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!!

  10. The Lazy Organizer

    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!

  14. GiBee

    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!

  16. tabrez

    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.

Comments are closed.