CSS3 Responsive Web Pricing Tables Grids for WordPress is a WordPress plugin with following features:
- pure CSS + HTML (no javascript)
- 2 table styles
- 20 color versions
- responsive
- hover states
- font-face fonts
- intuitive administration panel
- implementatin with simple shortcode
- and much more...
You can check all styles and kind on this screencast.
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
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 20 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.
- 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
- Yanone Kaffeesatz - http://www.google.com/webfonts/family?family=Yanone+Kaffeesatz.
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 for all our items is conducted through our Support Forum.
Please register an account and search the forum or create a new topic, we'll answer as soon as possible.
We're in GMT +1 and we aim to answer all questions within 24 hours (Monday – Friday). In some cases the waiting time can be extended to 48 hours.
Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.