Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
This package includes all the necessary files in the HTML folder. The minimum setup requires to :
There are several options such as the colors or the table variant (light or dark) that can be switched from the HTML just by changing a few classes. Let's first have a look to the HTML setup.
The tables have a fixed width which is automatically resized on smaller screens. The first thing you'll need is to choose the size (or the number of columns) for your table. The general container is :
<div class="pricing_table pricing_six"> ... </div>
In the above code, you can choose between :
This will set the proper width for each column according to the number of columns you want. You have a second option for this container : the dark or light variant. In the above example, you'll get the default light variant. To set up a table with four columns and the dark variant, the container will be :
<div class="pricing_table pricing_dark_style pricing_four"> ... </div>
The key here is the additional pricing_dark_style class applied to the table container.
Then you have again 2 options : use only content columns (see the file colors_content_only.html) or use an additional column on the left explaining the meaning of each row (see any other example file).
If you want only the columns with the content, the general structure is (example with 4 columns) :
<div class="pricing_table pricing_four">
<div class="pricing_hover_area">
<ul class="pricing_column gradient_black">
First column content
</ul>
<ul class="pricing_column gradient_black">
Second column content
</ul>
<ul class="pricing_column gradient_black">
Third column content
</ul>
<ul class="pricing_column gradient_black">
Fourth column content
</ul>
</div>
</div>
If we want the same table but with the additional left column, the code will be :
<div class="pricing_table pricing_five">
<ul class="pricing_column_first">
Left column content
</ul>
<div class="pricing_hover_area">
<ul class="pricing_column gradient_black">
First column content
</ul>
<ul class="pricing_column gradient_black">
Second column content
</ul>
<ul class="pricing_column gradient_black">
Third column content
</ul>
<ul class="pricing_column gradient_black">
Fourth column content
</ul>
</div>
</div>
In the above example, the color of the header and the bottom "sign up" button is set with the class gradient_black. You can separately set a color for each column using one of the 6 color variants provided :
Then all the table content is coded with list items. The different HTML pages provided will show you the possible variants ready to be used in your project.
Since the version 1.1, all the tables are completely responsive : the columns are resized according to the available space in the browser. You don't have much things to do for that, everything is handeled by the CSS but there's one thing to keep in mind : the optionnal first descriptive column is hidden and all the labels are displayed in each cell. For example, if you open the file colors_five_columns.html and resize down, you'll see that at some point, the first column disappears and the labels like "Disk Storage" or "Monthly Bandwidth" are displayed in each corresponding cell.
You'll find them in the HTML markup, each cell as a data-table value and all of them are shown only on smaller screens, when the first column can't fit properly. It's somehow repetitive but it doesn't need any javascript and works well with modern devices.
This "data-table" value must be set for each column you want it to appear.
You will find a single CSS file that is required to use the tables. Just include it in your project or copy and paste its content at your convenience. Don't forget that there are several icons that are linked from this CSS file, you may have to update the path to those icons if you use a different folder structure.
The file is separated into sections using:
01 GENERAL STYLING 02 HEADERS 1. Common styling 2. First column specific styling 03 COLUMNS STYLING 1. Common columns styling 2. Columns sizes 3. Small screens styling 4. Rows styling 5. Table icons 6. Columns footer 7. Buttons 04 TOOLTIPS 05 COLORS 06 DARK TABLE
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
I've used the following images, icons or other files as listed.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Pixelworkshop