From the Blogabout me

Adding a CSS Class to WordPress Editor

The Reason

I like making it as user-friendly for my clients as possible.  WordPress does many, many things great, but some of the styling concepts lack just a little.  In this situation, I figure it is better just to create a simple hack to your WordPress theme, and it doesn’t matter if you are the client or the developer trying to help your client.

Solution

Believe it or not, it is just a few steps and you will be up and running before you know it.  Just follow these steps in the order I explain them, and you should be ready.

  1. Install the TinyMCE plugin
  2. Create a stylesheet in your theme directory, and name it anything you want.  I’ll call mine “new-styles.css” for sanity sake
  3. Inside your new CSS file, add a new class, doing what you want differently, maybe a different color or size

    a.External-Link { font-size: 2.2em; color: #FC0; }
    
    
  4. Now, open your theme functions.php file, and at the bottom add the following
    
     function addLinkClasses( $wp ) {
     $wp .= ',' . get_bloginfo('stylesheet_directory') . '/new-styles.css';
     return $wp;
     }if ( function_exists( 'add_filter' ) ) {
     add_filter( 'mce_css', 'addLinkClasses' );
     }
     

Yep, you are done.

Easy Random CSS Background Tip

Some times you want/need a background image to make the user experience fresh, but not too crazy.  What about a simple background change? I wish it was really simple, and I could just upload some images and not have to do anything else… No plugins, not much programming.. Guess what?  After I wrote my own script to do this very thing, I happened to come across a smarter script, so let’s get started.

Let’s make this super simple ————–

The Randomization:

  1. Download rotator.txt from A List Apart, rename it rotator.php.
  2. Unload your images for the randomization in the same directory as rotator.php.
  3. Upload all the files via FTP.

CSS:

#rotator { background: url(images/rotator.php) no-repeat center top; } 

 

DEMO:

For an example, I am using this idea on the homepage of this site.