CSS3 Web Pricing Tables Grids for WordPress
About

CSS3 Web Pricing Tables Grids for WordPress is a WordPress plugin with following features:

- pure CSS + HTML (no javascript)
- 2 table styles
- 12 color versions
- hover states
- font-face fonts
- intuitive administration panel
- implementatin with simple shortcode

You can check all styles and kind on this screencast.

Instalation

Instalation requires just few simple steps:

- unpack css3-web-pricing-tables-grids-for-wodpress.zip archive
- log into your WordPress administration panel
- open the "Plugins" submenu
- click "Add new" button
- click "Upload" link
- select css3_web_pricing_tables_grids.zip archive from unpacked folder (css3-web-pricing-tables-grids-for-wodpress folder)
- click "Install now"
- after installation process click "Activate" link

Implementation

You can configure the pricing table using administration panel. After installation you will find new subsection (CSS3 Web Pricing Tables Grids) under "Settings" submenu. Please open it and follow below steps:

- choose one of 12 predefined sample configurations from "Choose shortcode id" list...
- ...or create your own new configuration by simply putting its name/identifier into "Or create new shortcode id" textfield
- choose table kind from 2 available
- choose table style
- define number of columns
- define number of rows
- put contents into generated table
- click "Preview" button to see how the table will look on your page
- click "Save Options" button to save the configuration
- after saving operation you'll see the notice with shortcode. For example

      [css3_grid id='sample_identifier']

  Just simply copy it and paste it on your page or post
- you can come back to your configuration and edit it in any time, just choose it from "Choose shortcode id" list

You can watch how to implement the pricing table here.

How To...

- Resize column/row - in admin panel you can find in column header or row header appropiate text inputs, which you can fill with width/height/padding values (in pixels),
- Change column hover style - due to the incompatibility of IE8 browser for support CSS3 attributes you can remove or change column shadow hover style. This is a part of the code in the main.css file starting from div.p_table_1 div.column_1: hover... (you can do the same for p_table_2),
- Change data rows background colors - change background-color attributes of div.p_table_1 li.row_style_1, div.p_table_1 li.row_style_2, div.p_table_1 li.row_style_3, div.p_table_1 li.row_style_4 classes within main.css file

Used Fonts
Included fonts are 100% free for commercial usage.

- Yanone Kaffeesatz - http://www.google.com/webfonts/family?family=Yanone+Kaffeesatz.

Credits

CSS3 grids design is based on the awesome and popular Pricing Tables #1 by GraphiteValley http://graphicriver.net/item/pricing-tables-1/84427. QuanticaLabs has a full written rights to use this design.

Support
If you have any questions, please contact me at: QuanticaLabs@gmail.com