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

Warning: This Page Ain’t Pretty!

Pen beautiful blog posts using CSS, with the help of the Special Textboxes Plugin

Pen beautiful blog posts using CSS, with the help of the Special Textboxes Plugin


What’s This All About?

I like to write, but I’m beginning to suspect that I like to present the writing even more than I like putting the words down on virtual paper. Most of the content management systems used to organize information give writers a few tools to make their articles, reports, and tutorials look decent. For example, the WYSIWYG editors included in a CMS or blogging tool usually provide a toolbar that allows you to select some text and apply formatting like color, bold, italics, big or small headings, etc.. And if you know a little about coding, especially CSS (Cascading Style Sheets), you can do more and get fancy. (Most of my clients don’t know anything about CSS, and have no interest in learning!)

The thing about presenting information is that you often want to do more with it than just italicize some text, or make a headline big and red. I use OpenOffice, Microsoft Word, and Publisher offline to create reports, newsletters, tutorials, and fact sheets. Oftentimes, when I’m writing something for online consumption, I want the means to create callout boxes and sidebars, with different colors, different borders, in differing sizes — just like you would find in offline documents. The code to create such boxes is not usually included in the stylesheet that comes with your theme or template. (To be fair, sometimes they are, but that’s a moot point if they aren’t included with your particular theme.)

Non-Techie Solution

As you can see from the title of this article, I’m using WordPress. On other sites I use Joomla. Joomla has an extension (different jargon for plug-in) I use to get this text box functionality. But in my initial searching for such a plugin for WordPress, I came up empty. Thus, the hunt was on to find some code that I could include in my stylesheet to give me greater functionality for creating text boxes for my WordPress articles and tutorials.

I was really looking for a non-techie solution. I’m not a programmer, a CSS expert, a coder. Yes, I can make simple modifications (given good instructions), but I prefer not to do so. This is mainly because whatever I learn and use, I will likely share with my clients (and friends) who are not tech-heads. So, simple solutions are what I look for , and if I don’t find them, I’ll go the extra mile to get a workable solution that can be shared with my client-base and my family/friends who are likely to ask me about it.

This posting series is a summary of my findings. I did eventually find a plugin after much searching. I also located the code (that’s not a dirty word!) to create CSS text boxes and a new plugin that lets me add additional CSS to my own personal stylesheet. What began as a single post (or article) to share my findings had to be split into several articles because it became much too long, especially after adding all the examples and the code so you could use it, too. I divided the information into several distinct groups; each group is shown in a separate article. Then the articles are compiled into a series (with a nice little table of contents at the top of each one). That might not seem all that important, but it saves you the time of hunting around for related articles, and it makes me happy because it is properly presented!

Here’s a quick overview:

CSS Text-Box Styles For Serious Writers (Series)

  • CSS Styles For Pretty-fying Text in Your WordPress Blog – this post :)
  • CSS Styles: Favorite Colored Text Boxes, Callouts, Sidebars, and Quotes – My Favorites
  • CSS Styles Inspired By The YAML Framework – colored borders rule!
  • CSS Styles From The Guangzhou Theme – some nice discoveries in my own backyard
  • CSS Styles Achieved With The Special Text Boxes WordPress Plugin – finally, a plugin for WP ported over from a Joomla! extension

Sometimes there isn’t enough to be said when demonstrating a style. In order to have enough filler text, I used the good old standby: Lorem Ipsum. In case you don’t already know this, lorem ipsum is Latin dummy text used as a placeholder. The Lorem Ipsum text was created using something called the Lipsum Generator.1 You can see an example below.

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 Code and Instructions Are Included

Hey, I didn’t leave you hanging. What good is it to read about this stuff if you can’t use what you find useful? After each textbox example, you will find the code and instructions on how to use it in your articles. Click on Get the code or Get the instructions and a little box will drop down. Click on it again to hide it. Also, these styles are not limited to WordPress. You can use the code in any blog, or on any webpage. You can add the stylesheet code to any stylesheet! So, don’t feel intimidated, copy-and-paste to your hearts content.

Sources

No man is an island. I found information in a variety of places. Take a look at the sources below (in case you ever want to go deeper) and say a silent thank-you. For more information, click the footnote number to jump to corresponding note at the bottom of this page (which includes links to any additional plugins you might need to take advantage of the tips in this series).

NOTES:
Several of the formatting styles featured were already a part of the theme currently in use here.2

No need to mess up your theme’s stylesheet. Best way to do this is with MyCSS.3

Space-Saving Code: Beneath each text box is the code to style it. Click on the title to reveal the code. Click on it again to close the code box. Thanks to Hackadelic.4

You can skip all this code stuff and just use the WordPress Plugin I finally found after I had assembled most of these code snippets. See it in action later in the series.5

The YAML framework is not really WordPress related.6

xTypo was created for Joomla! but CSS styles are universal.7

Finally, if you like these little “notes,” here’s info on the Footnotes plugin.8

Let’s move on to the next article in the series where I’d like to show you some of my favorite sidebars, textboxes, quotes, and callouts. These are probably the types of textboxes I will use most often. They might be all you need. Again, the code and instructions are included for your convenience. Click on the next article in the series to get started.

 

 

Want to Skip Reading? Just Get The Styles!
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="4" autop="false"]
[download id="3" format="4" autop="false"]

 




Footnotes

  1. The Lipsum Generator creates dummy text (fondly called lorem ipsum text), but the original writer was no dummy! Use the generator and find out more about the Latin origins at http://www.lipsum.com   [↩ go back]
  2. I’m using the Guangzhou Theme by John Godley – Unfortunately, I haven’t found any place where the styles included in the Guangzhou stylesheet are actually documented. As I came across textbox styles I liked, I updated the style sheet to include them. Inadvertently, I discovered some really neat styles were already a part of my stylesheet!   [↩ 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. 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]
  6. 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]
  7. 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]
  8. Footnotes are achieved using the WP-Footnotes plugin developed by Simon aka DrZaz . Even though the author doesn’t spend much time updating it, so it would seem to be outdated (last update 2007??), it stilljust works! Admittedly, I came across it ages ago, and didn’t use it because I erroneously figured it didn’t work with the latest WP. Ooops!  [↩ go back]

About Vernessa Taylor

Hi, I'm Vernessa Taylor. I write most of the articles, tutorials and reviews around here. Join in the discussions, share your thoughts, ask questions and lend a hand when you can. Need something? Ask! Check out my About page to learn more about me and my work as a technology consultant and internet coach. Don't forget to connect with me on Google+ and Twitter @CoachNotesBlog.

How Would You Like To Comment Today?

  One Response to “CSS Styles For Pretty-fying Text in Your WordPress Blog”

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

No Trackbacks.