CSS Styles: Favorite Colored Text Boxes, Callouts, Sidebars, and Quotes
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
- Use this colorful WordPress Plugin I found after I had assembled most of these code snippets. Thanks to Minimus at SimpleLibfor great work and sharing it with us writers! [↩ go back]
- 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]
- 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]
- Saving space by using the excellent Sliding Notes WordPress plugin by Hackadelic. Many thanks! [↩ go back]
- 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
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
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
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?
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?
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
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?
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?
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?
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?
You Might Also Be Interested In . . .
- CSS Styles Achieved With The Special Text Boxes WordPress Plugin The very first time I saw beautiful colored textboxes created with just CSS was while I perusing a Joomla! site....
- CSS Styles For Pretty-fying Text in Your WordPress Blog When presenting information online, you often want to do more with it than just italicize some text, or make a...
- CSS Styles From The Guangzhou Theme You rarely find the CSS code to create eye-catching text boxes included in the stylesheet that comes with your theme...
- CSS Styles Inspired By The YAML Framework I first learned how to create simple colored borders around textboxes using nothing but CSS while I was studying the...
Pages: 1 2
Welcome! I'm Vernessa Taylor, a local business Internet Coach. That's me in the B&W and this is a website I created to help entrepreneurs and local business owners (like you) put your business online. 
Great synopsis of commenting and 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.
Thanks!