How do you highlight quoted text within a post in a "boxed area"?
Need help? Check out our Support site, then
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?
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!
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.
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.
It really does. I added it to a few of my posts on my home page - different color and didn't use the blockquote. I may change to blockquote though - just trying a few things here. Thanks again. :)
masterclasslady: I looked at your site. Very nice. One advantage to using blockquote is that the "footer" is essentially centered. I notice that you've added a bunch of spaces to get the same effect as centering, and you also get a full-width colored bar. It looks good.
@sensuouscurmudgeon: No need for explanations re "someone"; it was 1tess who said it was me - I wouldn't have mentioned it otherwise (in fact, when I saw that code I didn't even remember it was from a post of mine; and there's nothing special about it). I think the whole idea of the forum is mutual help and building a collective pool of possibly useful tips and answers, not making 'copyright' claims over suggested solutions.
Re. div vs span, let me also note what their difference is: div is used for text that may include paragraph breaks inside it and will also become separated from what precedes it by a paragraph break; span doesn't create such a break, so it's used for words or phrases WITHIN a paragraph.
@masterclasslady: And if you want this notice centered, add the relevant command instead of spaces:
<div style="background-color:pink;text-align: center;">Copyright © 2008. MasterclassLady.Com. All rights reserved.</div>
Sorry to cause a problem by mentioning your name. Obviously "the forum is mutual help and building a collective pool of possibly useful tips and answers, not making 'copyright' claims over suggested solutions." Your suggestions are often clever and specific, but with enough detail that a reader can make innovations with them.
There are quite a few skillful volunteers here with helpful advice. It's been helpful to click on "member" under their names to read the answers they've given to a variety of questions. I've learned that there are things that can be done that I never thought of, so it's not necessarily unimportant to remember who has written good advice.
@1tess: I don't see any "problem". Your intervention made me laugh as I realized the coincidence that sc's second suggestion happened to me mine, too, and I think we're all in good humor here.
"It's been helpful to click on "member" under their names to read the answers they've given". You've been doing THAT? You're even worse than me!
Little gift - can't help it:
(Sort of got the M & the C lover part - couldn't possibly find anything with Shakespeare as well!)
It's a good procrastination exercise: I am as vigilant as a cat to steal cream.
You know, my very favorite cat looked like that, but she never posed on my iMac.
panaghiotisadam: I hope nobody thinks I have a problem here. I'm delighted to learn who the "somebody" was.
nice to meet ya!
I think we're all friends.
@panaghiotisadam and sensuouscurmudgeon -thanks for your help and your positive feedback.
My blockquote was "set-up" differently in the CSS and so it wasn't working. So I appreciate the centering code, panaghiotisadam
I was going to work on this today, but my real job kept me busy. haha
This is a great thread. Keep the codes coming in!
Thanks again! :)
@1t & sc: We are!
@mcl: We will!
This topic has been closed to new replies.