From the Blogabout me

Custom CSS for Gravity Forms

Gravity Forms is one of my favorite plugins designed for WordPress, and can be easily used for the quick blogger to advanced developer alike.

More than likely you already know about Gravity Forms, so I wanted to jump straight into some more advanced CSS features that most people do not know about or take advantage of but should. If you do not know why Gravity Forms is important for your WordPress site, I have talked about it before, so feel free to read about it here.

Gravity Forms offers an area for you to add Custom CSS to any of your fields.  For instance, you will see below two screenshots – #1 my fields, #2 where to find the Custom CSS area.

#1

#1
look @ the field
“How to get in touch with you?”

 

#2 Click on "edit" then "Advanced" you will see Custom CSS

#2
Click on Edit then Advanced
you will see Custom CSS

Here, you can add whatever you want as your Custom CSS Class; and you will be able to customize as you wish.

But Kevin, I don’t know much about CSS or don’t have the time to just simply make some easy adjustments to fields like Lists, Radio Buttons, and Checklists.

Yes, Gravity Forms makes long vertical lists by default, so if you have 10 items in your Checkbox it will look something like this:

Vertical Gravity Form Fields
Yikes, we probably don’t want that.

With a simple built-in class you could have something like this:

Columns in Gravity Forms

 

Now that is pretty cool – what did you do?

I used the built-in Gravity Forms class gf_list_3col – and it is already there so why reinvent the wheel, right?

Here is a quick list of all of the built-in classes:

Checkboxes and Lists Fields

gf_list_2col = 2 columned List
gf_list_3col = 3 columned List
gf_list_4col = 4 columned
gf_list_5col = 5 columned

Two Columns of Text Fields side by side

gf_left_half = The left column
gf_right_half = The right column

Three Columns side by side

gf_left_third = Left column
gf_middle_third = Middle column
gf_right_third = Right column

Some other miscellaneous styles

gf_scroll_text = Gets a scroll box into place, for those long sections where you need to give your visitor lots of information
scrolling-text
gf_hide_ampm = If you want to hide the AM/PM portion of the Time field
gf_list_inline = Simpliar to the above gf_list classes, but just show up next to each other using the amount of space the content can use on each line, instead of making it fit within 2,3,4,5 columns.
gf_hide_charleft = Do not display the amount of characters left / character counter

I’ve not found a great use for these, but they are available:
gf_list_height_25 = 25 pixels between list items
gf_list_height_50 = 50 pixels between list items
gf_list_height_75 = 75 pixels between list items
gf_list_height_100 = 100 pixels between list items
gf_list_height_125 = 125 pixels between list items
gf_list_height_150 = 150 pixels between list items

I hope this quick cheat sheet will have you using Gravity Forms at it’s greatest potential, and you will be the envy of your other programming friends since these are fairly unknown.

 

Gravity Forms is a plugin developed by Rocket Genius, and is well worth looking into for your WordPress website.

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.