- Flat pricing tables

Intro

Thank you for purchasing "Flat pricing tables". I hope you like and this manual will help you to instal and customize it for your needs. If you have any questions or feedback please feel free to drop me a message trough PM. Enjoy.

Contents of archive

The archive contains three folders with different layouts: 3 columns, 3 columns + feture description, 4 columns. Each of that folders contain 6 folders with different colors.

Installation

To include pricing tables to your page you have to perform three simple steps: upload css stylesheet file and icons, link your page to css stylesheet and add tables html code to html file of your page.

Step 1 - Upload

First of all you need to upload CSS file and images to your site directory. For example you can upload stylesheet files to /your_site/stylesheets/ and upload images to /your_site/images.

Step 2 - Link CSS to your page

After uploading files you have to link CSS style to your page. To do so you just have to add a following line to your html page (inside <head> tag)

<link rel="stylesheet" href="stylesheets/pricing_table.css" media="screen" />

Step 3 - Adding tables

To add the table to your page just add following <ul> tag and its contents to your page (you can find it in pricing_table.html)

<ul class='plans'>
...
</ul>

Once it is done you should have nice and functional pricing tables on your page.

Additional colors

In case you would prefer to have table in some other color you can easily change colors of the table to the color of your choice in css. Alternatively, you can contact me and I will send you the tables in desired color.

Modifications

Here is a list of simple modifications, that you can perform to adjust the tables.

Change width of table

The default width of the table is 75%, but no more than 958px, that ensures that table will fit most of the screens and will not be too wide. However if you want to have wide or narrow table you can chage following line in css file:

.plans {
...
    width: 75%;
    max-width: 958px;
...
}

Troubleshooting

Icons are not displayed

If icons are not displayed in the table please make sure that css file contains corret paths to icons in following lines:

	
.feature_yes {
    background-image: url(../images/yes.png);
    ...
    }
.feature_no {
    background-image: url(../images/no.png);
    ...
.plan:hover .feature_yes {
    background-image: url(../images/yes_white.png);
    }
    ...
.plan:hover .feature_no {
    background-image: url(../images/no_white.png);
    }
    }

Thank you!