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

Been here before? Skip reading. Jump to the Text Boxes!

Visual Appeal

Want to make your articles, reports, blog postings more visually appealing?

Assembled here are my all-time favorite textboxes, callouts, sidebars, and formatted quotations easily created using simple CSS. CSS experts and coding pros won’t need this article, but if you’re pretty low-tech, the information here will help you add visual appeal to your writings in a painless way.

For your convenience, below each example is the little code snipplet you’ll need to duplicate these on your own blog (whether using WordPress, Blogger, or another CMS). They also work on plain old HTML pages. Want the entire CSS file? Click here to download the entire file.



Notable Info

Although there are many examples included throughout this series, you might not need to look any further than this post, which has a good selection of my favorites. If you just want a plugin or extension that gives you many of the same options, get the Special Textboxes Plugin for WordPress1 or the xTypo extension for Joomla.2 Otherwise, scroll down to see some nice formatting options.

  • The CSS style code used for each effect is located right below the example. Just click the bold title to grab it (an accordion box will slide open), then click the title again to close it up.
  • WordPress Users: You should open your Theme’s Stylesheet file (in a new tab) so you can paste the CSS style into it.
  • If you don’t want to modify your theme’s stylesheet, get and install the MyCSS plugin3, which allows you to add more styles to WordPress without hacking up your stylesheet. The other benefit to using the MyCSS plugin is that any styles you add will be available if (when!) you change themes.
  • Styles below have been culled from different sources. In some cases, the style name in one stylesheet was the same as one in another stylesheet. So, I’ve taken liberty to change the names to suit me. You can change these style names to anything you want, so long as they don’t conflict with a name already in your stylesheet.
  • Graphics and Icons: Some of the styles have little icons associated with them. You can get the package of icons here. Don’t forget to upload them to your website. For instructions, see the bottom of this page.
  • Lastly, the cute drop-down accordion is achieved with Hackadelic Sliding Notes.4 and the dummy text was generated using the Lorem Ipsum Generator.5

Now on to the good stuff!

Favorite Colored Boxes

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 xINFO CLASS Click the bold title below to copy the code. Don’t forget to include the period (.) before the class name. Sed ultrices placerat dictum. Pellentesque sed odio sem, sed convallis enim. Vivamus eget risus risus.

 

xINFO Class Text Box : Click Here For The Code»

 

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 xWARNING CLASSClick the bold title below to copy the code. Don’t forget to include the period (.) before the class name. Sed ultrices placerat dictum. Pellentesque sed odio sem, sed convallis enim. Vivamus eget risus risus.

xWARNING Text Box : Click Here For The Code»

 

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 xSTICKY CLASS. Click the bold title below to copy the code. Don’t forget to include the period (.) before the class name. Sed ultrices placerat dictum. Pellentesque sed odio sem, sed convallis enim. Vivamus eget risus risus.

xSTICKY Text Box : Click Here For The Code»

 

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 xFEED 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.

 

xFEED Text Box : Click Here For The Code»

 

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 xDOWNLOAD CLASS. It is really quite plain and I wouldn’t use it to highlight something available for download unless you needed an unobtrusive textbox. Click the bold title below to copy the code. Don’t forget to include the period (.) before the class name.

xDOWNLOAD Text Box : Click Here For The Code»

 

This is the WARNING CLASS This box is from the G theme. I like it because it really says, “Pay Attention!!” Click the bold title below to copy the code. Don’t forget to include the period (.) before the class name. Sed ultrices placerat dictum. Pellentesque sed odio sem, sed convallis enim. Vivamus eget risus risus.

WARNING Text Box : Click Here For The Code»

 

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.

 

The next fw boxes don’t have any images associated with them.

This is the xyIMPORTANT 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.

xyIMPORTANT Text Box : Click Here For The Code»

 

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 xyNOTE 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.

xyNOTE Text Box : Click Here For The Code»

 

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 xyWARNING 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.

 

xyWARNING Text Box : Click Here For The Code»

 

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 xyDOWNLOAD CLASS. Click the bold title below to copy the code. Don’t forget to include the period (.) before the class name. HEY!! ==> Click here 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.

 

xyDOWNLOAD Text Box : Click Here For The Code»

 

 

On the next page are some fancy boxes for callouts, sidebars, and quotes.




Footnotes

  1. Use this colorful WordPress Plugin I found after I had assembled most of these code snippets. Thanks to Minimus at SimpleLib for great work and sharing it with us writers!  [↩ go back]
  2. Several styles are based on the xTypo extension created by Template Plazza for the Joomla! Content Management System. From the Template Plazza website: “XTypo is a GPL joomla mambot plugin that able to produce an extra nice css styling to your joomla content.”  [↩ go back]
  3. MyCSS is a WordPress plugin that allows you to attach your personal CSS stylesheet to your blog, regardless of the theme you might be using.  [↩ go back]
  4. Saving space by using the excellent Sliding Notes WordPress plugin by Hackadelic. Many thanks!  [↩ go back]
  5. Lorem Ipsum Generator   [↩ go back]

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

.xinfo {
background: url(icon/info.gif) center no-repeat;
background-color:#F8FAFC ;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#5E6273;
border-top: 2px solid #B5D4FE ;
border-bottom: 2px solid #B5D4FE;
}

Click the title again to close this box

Powered by Hackadelic Sliding Notes 1.6.5

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

.xwarning {
background: url(http://www.localbusinesscoachonline.com/_images/xtypo/icon/warning.gif) center no-repeat;
background-color: #FBEEF1;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#8E6A64;
border-top: 2px solid #FEABB9;
border-bottom: 2px solid #FEABB9;
}

Click the title again to close this box

Powered by Hackadelic Sliding Notes 1.6.5

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

.xsticky {
background: url(http://www.localbusinesscoachonline.com/_images/xtypo/icon/sun.gif) center no-repeat;
background-color: #E6FFE1;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#48793F;
border-top: 2px solid #FEABB9 ;
border-bottom: 2px solid #FEABB9;
}

Click the title again to close this box

Powered by Hackadelic Sliding Notes 1.6.5

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

## COPY CODE BELOW THIS LINE ##

.xfeed {
background: url(http://www.localbusinesscoachonline.com/_images/xtypo/icon/feed.gif) center no-repeat;
background-color: #E0E0E8;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#333333;
border-top: 2px solid #85BBDB ;
border-bottom: 2px solid #85BBDB;
}

## COPY CODE ABOVE THIS LINE ##

Click the title again to close this box

Source: Where did I find this code?

Powered by Hackadelic Sliding Notes 1.6.5

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

## COPY CODE BELOW THIS LINE ##

.xdownload {
background: url(http://www.localbusinesscoachonline.com/_images/xtypo/icon/download.gif) center no-repeat;
background-color: #F0F0F0;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#666666;
border-top: 2px solid #c0c0c0 ;
border-bottom: 2px solid #c0c0c0;
}

## COPY CODE ABOVE THIS LINE ##

Click the title again to close this box

Source: Where did I find this code?

Powered by Hackadelic Sliding Notes 1.6.5

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

.warning
{
border: 3px solid red;
background-color: #fff2ed;
padding: 1em;
margin: 2em 0em;
color: #A8254A;
}

Click the title again to close this box

Source: Guangzhou Theme

Powered by Hackadelic Sliding Notes 1.6.5

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

## COPY CODE BELOW THIS LINE ##

.xy_important
{
background: #ffd;
padding: 2em;
border-top: 2px #ddb dotted;
border-bottom: 2px #ddb dotted;
}

## COPY CODE ABOVE THIS LINE ##

Click the title again to close this box

Source: Where did I find this code?

Powered by Hackadelic Sliding Notes 1.6.5

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

## COPY CODE BELOW THIS LINE ##

.xy_note
{
background: #dfd;
padding: 2em;
border-top: 2px #bdb dotted;
border-bottom: 2px #bdb dotted;
}

## COPY CODE ABOVE THIS LINE ##

Click the title again to close this box

Source: Where did I find this code?

Powered by Hackadelic Sliding Notes 1.6.5

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

## COPY CODE BELOW THIS LINE ##

.xy_warning
{
background: #fdd;
padding: 2em;
border-top: 2px #dbb dotted;
border-bottom: 2px #dbb dotted;
}

## COPY CODE ABOVE THIS LINE ##

Click the title again to close this box

Source: Where did I find this code?

Powered by Hackadelic Sliding Notes 1.6.5

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

## COPY CODE BELOW THIS LINE ##

.xy_download
{
background: #f6f5d4;
padding: 2em;
border-top: 2px #4d3dc2 dotted;
border-bottom: 2px #4d3dc2 dotted;
color: #4d3dc2;
font-weight:bold;
}

## COPY CODE ABOVE THIS LINE ##

Click the title again to close this box

Source: Where did I find this code?

Powered by Hackadelic Sliding Notes 1.6.5

How Would You Like To Comment Today?

  10 Responses to “CSS Styles: Favorite Colored Text Boxes, Callouts, Sidebars, and Quotes”

Comments (6) Pingbacks (4)
  1. how to very well written and all that link love you just poured out, great post, if this was a forum you would have a sticky on this.

  2. Thanks Vernessa Taylor for your article, its really helpful

  3. I wonder if that’s one of the reason that people don’t post comments? That even though you might like what someone writes, you’re not sure how to reply?

Loading Disqus Comments ...
Loading Facebook Comments ...

No Trackbacks.

© 2009-2013 CoachNotes Blog & Vernessa Taylor, Boone, NC 28607
[ Login ]
Gratitude and heartfelt thanks to WordPress Developers, Plugin Authors, Graphic Artists, and Theme Creators. And did I say WordPress? Suffusion theme by Sayontan Sinha