CSS Styles Achieved With The Special Text Boxes WordPress Plugin

Oops! These Textbox Examples Are Not Displaying Since Upgrading To WP 3.x Something’s not right with the Special Textboxes Plugin. I’m not sure what the problem is, but it’s being looked into. UPDATE: Fixed! Deleted the entire plugin. Then reinstalled it. For more details, read Quick Fix.

Your Textbox Easy Button: WordPress Style

I said in this post I first learned how to create simple colored borders around textboxes using nothing but CSS while I was studying the YAML framework.¹ Although those boxes in YAML only had colored borders, I gained a bit of CSS confidence.

That experience prepared me for the very first time I saw beautiful colored textboxes created with just CSS, while perusing a Joomla! site. Wanting to replicate this in my own Joomla-based site, I was directed to the xTypo extension.² Later, as I developed articles for a WordPress-based site, I hoped to find a plugin that would provide the same easy way to integrate textboxes. After much searching, manual code insertion, I finally found the Special Text Boxes WordPress Plugin,³ which was ported from the xTypo extension.

In addition to giving you several choices of simple boxes, there are two three FOUR things I like about this WordPress version of the xTypo plugin:

1. The styles are more 2D in their visual presentation — they are not as flat. The shadow gives it an attractive effect.
2. The ability to easily add a header aka caption to the textbox. The best you can do with xTypo (and manually coded CSS) is to add a bold line.
3. The accordion-style drop-down/fold-up effect, which saves space and is otherwise just really cool. This is accomplished by clicking on a little triangle in the right-hand corner of the box.
4. Icons! The included icons are more modern, they’re larger (with the option of using an even larger version of them) and they can be turned ON/OFF with a checkbox in the options panel.

If there were a fifth thing to mention, it would be the fact that the plugin has an options panel, which means you can do lots of things with your boxes without having to climb under the hood just to tweak a tiny feature.

That being said, nothing is taken away from the xTypo Extension for Joomla. Without it, I would not have easily gained the series of colorful boxes featured in the earlier post in this series. It is still quite cool to have it available for the Joomla CMS. Of course, somebody might come along and add these enviable features to it, making writers who use Joomla! very, very happy.

What’s not to like?

The only thing that is a little disappointing is that you don’t have any control over font sizes in the special text boxes. This hadn’t (yet) crossed my mind. I learned this when visiting the developer’s web site and flipping through the comments. Just to be absolutely sure I couldn’t get around this slight limitation, I took a look at the plugin’s CSS files. To my chagrin, I found it to be absolutely true. You cannot change any fonts (size, type, weight), neither within the textbox nor within the caption. I hope the developer will find a way to separate the CSS styling from the plugin functions, thereby giving users the finer-grained control some of them are sure to desire.

One other thing: Every now and then, all the textboxes disappear! I don’t know why that happens (it happened to me about 3 times when I was writing this post). If it happens to you, don’t panic. Just hit your browser refresh key (usually F5) a couple of times. They’re still there and will come back. Go figure!

Preview 2-D Textbox Styles

Here is a preview of some of the textbox styles. To see more examples, visit the developer’s site, where you can also see how to use them in your post, as well as download the plugin.

How To Add A Textbox Style To Your Blog Post

Add Personality Using the Custom Function

Change the width, change the location (float), change the color . . . Customize it! Below are two custom text boxes. I’ve changed the width, modified both the background color and the text color, and set them to float over to the right of the text. 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.

The second custom box uses a caption and is collapsible. Click on the little triangle to see what’s inside. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero.

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.

Mix and Mesh Alongside Personal CSS Styles

While using this plugin could reduce the need to add CSS styles to your stylesheet, you still might want to supplement its use with some of the other styles you came across in this series. For help using other styles in your writings, see How To Use These Styles In Your Posts.

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.

[download id="2" format="1" autop="false"]
Plain text file: [download id="1" format="4" autop="false"]

[download id="3" format="1" autop="false"]

There are more articles in this series. Use the Table of Contents at the top to reach other topics that might interest you.

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. This plugin is ported from the xTypo extension created by Template Plazza for the Joomla! Content Management System by Template Plazza.  [↩ go back]
3. Special Textboxes Plugin for WordPress was ported from the Joomla! xTypo extension. I found this colorful WordPress Plugin after I had assembled most of the CSS code snippets in this series. Thanks to Minimus at SimpleLib for great work and for sharing it with us writers!  [↩ go back]

About Vernessa Taylor

Vernessa Taylor has written 114 posts here.

As a Technology Consultant, Vernessa Taylor works with both online and offline business owners. She writes about small business systems such as project management and customer referral systems at CoachNotes Blog. Follow her on Twitter @CoachNotesBlog.

• 
  View all posts by Vernessa Taylor →
• Blog
• Twitter
• Google+

More articles on similar topics . . .

1. 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,...
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 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...