Simple Guide to Highlighting Content Within Your Posts for Those with Limited Technical Skills
Part nine of: “Stylizing Your Content”.
Sometimes we need to highlight a specific chunk of text. This should get you started:
Open up your Stylesheet — style.css — and add the following:
/* note: Grey */
p.note {
padding: 0.57143em 0.78571em;
background: #f5f5f5;
border: 1px solid #ddd;
}
/* alert: Yellow */
p.alert {
padding: 0.57143em 0.78571em;
background: #ffffa0;
border: 1px solid #e5e597;
}
/* info: Red */
p.info {
padding: 0.57143em 0.78571em;
background: #ff4f52;
border: 1px solid #ef1d21;
}
/* download: Green */
p.download {
padding: 0.57143em 0.78571em;
background: #a3df61;
border: 1px solid #7abf2f;
}
Now, whenever you have a specific block of text (a paragraph) that you want highlighted in a specific way (e.g. a yellow alert), all you have to do is wrap that text in a paragraph tag with the appropriate class attribute, like so:
<p class=”alert”>This paragraph will be contained within a yellow box, signifying an “alert.”</p>
<p class=”note”>This paragraph will be contained within a grey box, signifying a “note.”</p>
<p class=”download”>This paragraph will be contained within a green box, signifying a “download.”</p>
<p class=”info”>This paragraph will be contained within a red box, signifying “info.”</p>
You can call the classes anything you’d like, you can even add more — and put images inside, like this:
If you haven’t done so already, please subscribe to Scribbles and Words. It’s good for your heart. Plus, your feed reader is looking malnourished. Give it a healthy dose of S&W.
All I did there was add an image to the css, like so:
/* subfeed: Feed Image */
p.subfeed {
padding: 0.57143em 0.78571em;
background: #f2f2f2 url ('images/corner-feed.gif') no-repeat top right;
border: 1px solid #ddd;
}
Good luck!
Image credit: sektordua.
{ 17 comments… read them below or add one }
The more of these great tips I come across, the more appreciation I have for just how powerful CSS is. Thanks!
Now, how I need to figure how to combine the RSS graphic idea you finish with with the What Would Seth Godin Do? Wordpress plugin.
Now, could you share with us the code you use to affect the “Bookmark/Share this post:” icon row at the end? I like it much better than what the plugin I currently use does.
CSS rocks- thanks Jay for this better-late-than-never installment!
Rock on.
Dude, my sidebar needs work. what do you suggest?
lawton chiless last blog post..The Value Of Free Blogging
@ Matt - Powerful stuff it is.
Here’s how you can manipulate the WWSGD plugin:
Open up the
what_would_seth_godin_do.phpfile and look for the following (it’s near the top):<p style='border:thin dotted black; padding:3mm;‘>If you’re new here, you may want to subscribe to my <a href=’”.get_option(’home’).”/feed/’>RSS feed</a>And, replace the red part with something like this:
padding: 0.57143em 0.78571em; background: #f2f2f2 url ('images/corner-feed.gif') no-repeat top right; border: 1px solid #ddd;As far as the bookmark plugin, I just use that as it is. The plugin is called Sociable.
@ Lawton - It did take a while, didn’t it?
I say clean it up a bit. Get rid of stuff that doesn’t really need to be there. Like, what is that magnify thing? Move the subscribe section to the top, along with the search bar. Add a popular posts section. Consider dropping the ClickBank ad or moving it to a lower position. What happened to that video intro you had?
I took the video down, not many were watching i don’t think. I’ll do another one. How do I add a popular posts section?
lawton chiless last blog post..“That’s It. I’m Going To Set The Building On Fire.”
Re-designed, as ordered, Sir.
lawton chiless last blog post..“That’s It. I’m Going To Set The Building On Fire.”
Thanks for this cool tip. For the non-technical this is so much time saving. It sure will add color to my site and make my post easier to read. Cheers.
Jay sorry, posted that comment in the wrong poster before. what i meant to do was post here- about the rss mini-call to action. i can make my background white and get a while rectangle,right?
And then i just push it into the singlepost.php file?
@ Lawton - That is correct.
To add a popular posts section, just add a new widget to your sidebar and add in some posts. You can do it manually or use a plugin.
@ NaijaEcash - Hope it works for you. If you have any questions, shout.
Cool. How do you get this to work in a sidebar widget though?
Have you tried throwing that HTML in a text widget…and adding the necessary CSS to your stylesheet? It should work.
Jay, can these styles be anywhere in my css style sheet? i’m not seeing it render when i preview in firefox.
Make sure you don’t have any cache plugins turned on. Also, you may want to add
.entrybefore the css declaration.[…] of my appreciation for the skills of Jay from Scribbles & Words but for you newbies, check out this great, quick tutorial from Jay about how to highlight text using only […]
Jay, waht about adding quotes and pull styles to the css?
lawton chiless last blog post..How To Explode The Number Of Visitors To Your Website-For Cheap!
You mean blockquotes? You can find that here.
As for pull quotes, you can use Arc90’s cool JavaScript solution (adds images too) or check out Chris’s guide to pullquotes.
Leave a Comment