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 YAML framework. Not really WordPress-related, YAML (Yet Another Multicolumn Layout) is a framework for developing and hand-coding CSS website projects.¹


Web developers who develop websites outside of CMSes like WordPress and other CMSes would be interested in what YAML has to offer. But for the purpose of this post, we’re just grabbing some of the CSS for the textboxes and other text treatments that come standard within the YAML framework, yet are applicable anywhere you’re writing for the web.

Simple Textboxes Included in the YAML Framework

For the most part, the YAML boxes are simple, essentially a textbox with a colored border around it. There are a few styles that provide for colored text or indented text. The main point for me, like I said earlier, is YAML introduced me to CSS styles that handled text in a way that would interest writers. Second to that was how the code was all provided in a nice, neat package, so I didn’t have to figure it out.

Reminder:

• If you just want a plugin or extension that gives you many of the same options, get the Special Textboxes Plugin for WordPress² or the xTypo extension for Joomla.³
• 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. The cute drop-down accordion is achieved with Hackadelic Sliding Notes.⁴
• 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 plugin⁵, 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.

Without further ado, here are the YAML styles. They are not very fancy, just simple and useable.

This is the YAML Highlight Class. 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.

YAML_HIGHLIGHT : Click Here For The Code»

 

This is the YAML DIMMED Class. 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.

yaml_dimmed : Click Here For The Code»

 

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

yaml_info : Click Here For The Code»

 

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

yaml_note : Click Here For The Code»

 

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

yaml_warning : Click Here For The Code»

 

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

yaml_important : Click Here For The Code»

 

Below is the YAML TEXTAREA CLASS Normally, it’s the techies who might use this! (Actually, if you have something you want your visitors to copy verbatim, a textarea is a good place for you to put it, then tell them how easy you’ve made it for them to copy+paste your important info.)

Write your important copy+paste message here

TextArea Style: Click Here For The Code»

 

How do you use the textarea box?

You create a textarea box a little differently than the way you apply the other styles to your writing. Instead of adding a styke (known as a “class”) to a paragraph, you use the code as shown below. You would indicate how tall; you want the box to be (in rows) and how wide you want it to be (in columns).

<textarea class="standard" rows="5" cols="65">
Write your important copy+paste message here
</textarea>

Click the image below to get a better idea of how this would look.



For help using other styles in your writings, see How To Use These Styles In Your Posts. There are more articles in this series. Use the Table of Contents at the top to reach other topics that might interest you. For your convenience, all the styles in this series are included in the file below. Get it and the icons used in the various text boxes.


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


 


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)


 

 






---




Footnotes

1. Find out more about YAML (Yet Another Multicolumn Layout) for your development and hand-coding CSS website projects. Beautiful code, great documentation, extensible, and sensible. They also have The YAML Builder – a tool for visually creating YAML-based CSS layouts. The framework has been ported over to Joomla; I’m still waiting on a WordPress version.   [↩ go back]
2. 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]
3. 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]
4. Saving space by using the excellent Sliding Notes WordPress plugin by Hackadelic. Many thanks!  [↩ go back]
5. 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]



Series Navigation
«CSS Styles: Favorite Colored Text Boxes, Callouts, Sidebars, and QuotesNext Article in Series»





Please Share by clicking favorite social network below:

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 



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

## COPY CODE BELOW THIS LINE ##

.yaml_highlight { color: #f60; }

## 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.4

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

## COPY CODE BELOW THIS LINE ##

.yaml_dimmed { color: #888; }

## 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.4

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

## COPY CODE BELOW THIS LINE ##

.yaml_info { background: #f8f8f8; color: #666; padding: 10px; margin-bottom: 0.5em; font-size: 91.7%; }

## 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.4

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

## COPY CODE BELOW THIS LINE ##

.yaml_note { background: #efe; color: #040; border: 2px #484 solid; padding: 10px; margin-bottom: 1em; }

## 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.4

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

## COPY CODE BELOW THIS LINE ##

.yaml_warning { background: #fee; color: #400; border: 2px #844 solid; padding: 10px; margin-bottom: 1em; }

## 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.4

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

## COPY CODE BELOW THIS LINE ##

.yaml_important { background: #ffe; color: #440; border: 2px #884 solid; padding: 10px; margin-bottom: 1em; }

## 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.4

Copy the following code to your stylesheet
You CANNOT change the name from “textarea” BECAUSE that is a special HTML class

## COPY CODE BELOW THIS LINE ##

textarea, pre, code, kbd, samp, var, tt {
font-family: Consolas, “Lucida Console”, “Andale Mono”, “Bitstream Vera Sans Mono”, “Courier New”, Courier;
}
textarea.standard
{
background: #fee;
color: #400;
border: 1px #844 solid;
padding: 10px;
margin-bottom: 1em;
font-size:13px;
}
textarea.textinside
{
font-weight: normal;
}

## 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.4




You Might Also Be Interested In . . .

1. 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...
2. 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...
3. 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....
4. CSS Styles: Favorite Colored Text Boxes, Callouts, Sidebars, and Quotes Want to make your articles, reports, blog postings more visually appealing? Assembled here are my all-time favorite textboxes, callouts, sidebars,...