CSS Styles: Favorite Colored Text Boxes, Callouts, Sidebars, and Quotes

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on new articles and tutorials. You can also get updates in your email. Thanks for stopping by today.

This entry is part 2 of 5 in the series CSS Text-Box Styles For Serious Writers

Fancy Boxes for Callouts and Sidebars

Next up are some fancy boxes for callouts, sidebars, and quotes.

This is the CALLOUT CLASS. It’s a full-width callout . . . Click the bold title below to copy the code. Don’t forget to include the period (.) before the class name. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum.

CALLOUT Text Box : Click Here For The Code»

Just use a few words here because the letters are big and the space is small!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam.

This is the CALLOUT_LEFT CLASS. Click the bold title below to copy the code. Don’t forget to include the period (.) before the class name. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam.

CALLOUT_LEFT Text Box : Click Here For The Code»

Just use a few words here because the letters are big and the space is small!

This is the CALLOUT_RIGHT CLASS. Click the bold title below to copy the code. Don’t forget to include the period (.) before the class name. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam.

CALLOUT_RIGHT Text Box : Click Here For The Code»

Title is created with H3 heading + INSET Class

This is the INSET CLASS. Note the difference between this box and the Callout boxes above. Click the bold title below to copy the code. Don’t forget to include the period (.) before the class name. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

INSET Text Box : Click Here For The Code»

Placing Your Quotations

This is the xQUOTE CLASS. Click the bold title below to copy the code. Don’t forget to include the period (.) before the class name. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam.

xQUOTE Text Box : Click Here For The Code»

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero.

This is the xQUOTE_LEFT CLASS. Click the bold title below to copy the code. Don’t forget to include the period (.) before the class name. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam.

xQUOTE_LEFT Text Box : Click Here For The Code»

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero.

This is the xQUOTE_RIGHT CLASS. Click the bold title below to copy the code. Don’t forget to include the period (.) before the class name. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam.

xQUOTE_RIGHT Text Box : Click Here For The Code»

Dropcap Usually you would only use the first letter as the dropcap. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam.

Above is the DROPCAP CLASS. Click the bold title below to copy the code. Don’t forget to include the period (.) before the class name. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam.

How do you get the dropcap effect? Add a “class” to the SPAN designators.. Then, place the capital letter between SPAN designators. See the image below (click to enlarge).

DROPCAP Style : Click Here For The Code»

Something Different and Fun: Text Changes Color When Selected

Are you quotable? Do people highlight and select what you’ve written? How do you know? That’s not a trick question! Whether you know or not, the idea here is to bring a little extra enjoyment to those who quote you, or copy+paste pieces of info from your website (hopefully to quote you later).

Here’s a nice “select text” enhancement from CSS-Tricks.¹ You can set text to be highlighted in different colors when it is selected. For browsers that don’t support it, nothing is different. Try it yourself by selecting text in any of the three paragraphs below. Neat, eh? (If you’re using IE, you won’t see it! Go grab Firefox, Google Chrome, or Opera.)

Select this text. It becomes RED! Select this text. It becomes RED! Select this text. It becomes RED! Select this text. It becomes RED! Select this text. It becomes RED! Select this text. It becomes RED! Select this text. It becomes RED!

Select this text. It becomes blue! Select this text. It becomes blue! Select this text. It becomes blue! Select this text. It becomes blue! Select this text. It becomes blue! Select this text. It becomes blue! Select this text. It becomes blue! Select this text. It becomes blue! Select this text. It becomes blue! Select this text. It becomes blue!

Select this text. It becomes yellow! Select this text. It becomes yellow! Select this text. It becomes yellow! Select this text. It becomes yellow! Select this text. It becomes yellow! Select this text. It becomes yellow! Select this text. It becomes yellow! Select this text. It becomes yellow! Select this text. It becomes yellow! Select this text. It becomes yellow!

(If you’re using IE, you won’t see it! Go grab Firefox, Google Chrome, or Opera.)

How might this be useful? I’m sure you could find a use for it. But if not, it would be a pleasant surprise for someone selecting text on your site to copy to his notes or to quote you! (So long as the browser supports it.)

Here’s the code …

Change Selected Text Color : Click Here For The Code»

Bookmark this page or feel free to copy+paste these instructions somewhere. There are more articles in this series. Use the Table of Contents at the top to view what interests you.

In case you need it, the next section illustrates how to actually use the styles showcased here.

How To Use These Styles In Your Posts?

Once you have the code you need, and you have copied it into either your existing stylesheet or your MyCSS stylesheet, it is easy to use it while you are writing. You’ll have to get a little bit technical! All that really means is, while you are writing, switch over from the visual editor to the HTML editor (see the image below).

Now just add the “class” designator you want to use. For example, if you want to use the Warning Textbox, the corresponding style’s name is “warning”. Thus, the “class” name you’ll use is also “warning”. (It’s easier than it sounds.) See the image below for a better understanding. Click the image for a larger view.

Make sure you save (update) your changes, then switch back to your visual editor. Now when you view the page you were editing, you’ll see your new textbox in place. (If you don’t see your new box, just refresh the page using the F5 key.)

For your convenience, all the styles in this series are available to download.
Click below to grab the entire CSS stylesheet with these codes already included. Then copy+paste it to your current stylesheet or add it to your MyCSS stylesheet. Also get the icons, unzip them on your server, and change the CSS file to reflect the proper location.

CSS Styles for Textboxes (ver. 1.0 / 3.35 kB)
CSS Text-Box Styles For Serious Writers is a collection of my favorites textboxes, sidebars, callouts, quotes for pretty-fying text in WordPress articles, reports, reviews, and blog posts. (This is the ZIPPed version.)

Plain text file: CSS Styles for Textboxes (Plain Text CSS File) (ver. 1.0 / 11.89 kB)

xTypo Icons for CSS Textbox Styles (ver. current / 37.85 kB)
xTypo Icons to accompany the CSS Text-Box Styles For Serious Writers series. (ZIPPED)

Real-Life Examples

Want some real-life examples? You can see these various styles in action around this site. Clicking any link opens a pop-out window you can close when finishing viewing.

Footnotes

Thanks to Chris Coyier of CSS-Tricks, for the article “Over-riding The Default Text Selection Color With CSS,” which shows how you can set text to be highlighted in different colors when it is selected. According to the article and comments: For browsers that don’t support it, nothing is different, meaning users see whatever they always see. Works in Firefox, Safari, and possibly Opera but doesn’t seem to work in Internet Explorer (surprise!). [↩ go back]

Series Navigation«CSS Styles For Pretty-fying Text in Your WordPress BlogNext Article in Series»

Please Share by clicking favorite social network below:

Digg This Post

Copy the following code to your stylesheet
You can change the name from “callout” to whatever you prefer