Quoted text in a highlighted area?

  • Author
  • #296230

    How do you highlight quoted text within a post in a “boxed area”?



    This code works for me. The color code used here is for light gray. You can find the color you want at any site that lists html color codes. You can also insert some other font style, and use italics instead of “normal”. I use “normal” because my theme would otherwise use italics for blockquotes.

    <blockquote><div style="background-color:#F2F2F2;"><span style="font-style: normal; font-family: Georgia;">Your text here</span></div></blockquote>

    I’m hoping the code shows up right. If not, I’ll post it again.


    Thank you so much! I’m really new to this – where exactly do I put this code? After writing my text in a post, do I go the the “html” and insert this code – if so, where? In front of the text I want to highlight?

    Thanks again!


    oops – now I see in your code where I put the text :-)


    It worked perfectly – thank you!


    oops- one thing. The first line of the highlighted text is not lined up with the rest of the text. It sticks out to the left and the rest of the sentences are pushed to the right. Can you help?


    I don’t know why the first line sticks out. It may be the theme you’re using. Text within the blockquote codes should be indented. Maybe if you skipped a line after your regular text, before beginning the blockquoted material? If that doesn’t work, I’m stumped.


    Thanks! I’ll try it.


    @tryingtobegreener: Where is that post with the sticking-out line? I don’t even see a post with highlighted text in your front page.

    Also, would you prefer background color or the text itself in a different color? In the first case sensuouscurmudgeon’s suggestion works, but it’s got an unnecessary complication, it shouldn’t include a font command (because not all blogs use the same font family) and it might need extra commands if you want some space between the edges of the colored area and the text. In the second case, you need a different code, of course.


    While we’re at it, a day or two ago someone posted this code, which creates a border around text. It’s not the blockquote solution you’re looking for, but it may be useful:

    <div style="border:10px solid black;padding:2em;">TEXT HERE</div>

    You can increase or decrease the blank space inside the border by changing that “10” in the code, and you can change the border’s thickness by changing that “2em” to a different number. For example, “6em” is really thick. You can also change “black” to “red” or whatever you like.

    I haven’t tried to combine this border with a background color inside it, but I suppose that’s possible. Go ahead and play. There’s nothing else going on around here.


    I haven’t posted yet – just trying to get it right and will post tomorrow.


    It seems to be working now – I just pressed “enter” before the quoted text and the problem went away.

    Thanks panaghiotisadam for chiming in!

    I always appreciate everyone’s help here :-)


    Thanks sensuouscurmudgeon for the extra code!


    Moderator Emeritus

    That’s also panaghiotisadam’s code.


    1tess: Funny that sensuouscurmudgeon’s “someone” happens to be me! And thanks for the remark, but I don’t own the codes! It’s true that occasionally I work out combinations of my own invention (in response to particular questions), but the basic elements are all freely available in various html sites. I just think that, for people not accustomed to coding, giving specific solutions here is more helpful than saying go to that tutorial and find the codes for such and such.

    sensuouscurmudgeon, a couple of remarks:

    – An opening and a closing div tag mean “apply this from here to here”; an opening and a closing span tag mean the same, so there’s no point in enclosing the SAME chunk of text between div AND span tags. Color, font, size etc. are all attributes of “style”: you put them within the same tag, separated by semicolons. The code you originally suggested would more properly be:
    <blockquote><div style="background-color:#F2F2F2; font-style: normal; font-family: Georgia;">TEXT_HERE</div></blockquote>

    – In the second code (where my original numbers were 20px and 6em, because it was a suggestion to a member who wanted a simple black border for a funeral announcement), things are the other way round: the border number has to do with thickness and the padding number with blank space between border and text. And of course you can combine the border attribute with the background-color attribute – in the manner I explained above.

    tryingtobegreener, for a highlighted blockquote you need no more than this:
    <blockquote><div style="background-color:#HEX_NUMBER_HERE; padding:1em;">TEXT_HERE</div></blockquote>

    For hex color numbers you can try any one of the following:


    panaghiotisadam: You are correct, that border code was first suggested by you for use in a funeral announcement. I copied it at the time (and reduced the border and padding numbers), which is how I was able to suggest it in this thread. I didn’t recall where it came from, but I didn’t want to pretend that I was the source, so I said it had been posted by “someone.” Your information about “div” and “span” is much appreciated.



    Hi sensuouscurmudgeon,
    It’s really works fine


    Here’s one more goodie, while we’re on the topic of “Quoted text in a highlighted area.” I’ve recently been putting this at the end of all my posts. Thanks to panaghiotisadam I’ve cleaned it up considerably to eliminate all the “span” codes, using only “div”:

    <blockquote><div style="background-color:#F2F2F2; font-style: normal; font-family: Georgia;">Copyright © 2008. The Sensuous Curmudgeon. All rights reserved.</div></blockquote>

    See how that looks in your blog, and if it works, make the obvious text changes. It’s probably unnecessary to add a copyright notice to each post, but you could also use that code to add any footer you like, without needing to mess with CSS code.


    SensuousCurmudgeon: “Me likey” your idea very much. Thanks for the creative input.


    Thanks. Bear in mind that you don’t need to use “font-style: normal” unless (like me) you don’t like the italics that your theme may automatically use for blockquoted text. Nor do you need to provide for a font-family if you’re happy with what your theme regularly uses. Without those optional items, the code would look like this:

    <blockquote><div style="background-color:#F2F2F2;">Copyright © 2008. The Sensuous Curmudgeon. All rights reserved.</div></blockquote>

    As you already know, you can use any background color. In my humble opinion, this makes a rather nifty-looking all-purpose footer.

The topic ‘Quoted text in a highlighted area?’ is closed to new replies.