CSS3 Web Pricing Tables Pack (Grids)

CSS3 Web Pricing Tables Pack (Grids) - Table #2

CSS Styles

The project uses the following cascade of style sheets:

main.css - base style sheet,
active.css - style sheet for active (highlighted by default) columns,
style_1.css - style_8.css - style sheets for 8 predefined color styles (skins).

These style sheets are located in styles directory. To change the appearance of the template (to change the skin) you should add the appropriate style sheet to html file. For example:

<link rel="stylesheet" type="text/css" href="styles/main.css" />
<link rel="stylesheet" type="text/css" href="styles/active.css" />
<link rel="stylesheet" type="text/css" href="styles/style_2.css" />

will result in a change in the appearance - style 02, or

<link rel="stylesheet" type="text/css" href="styles/main.css" />
<link rel="stylesheet" type="text/css" href="styles/active.css" />
<link rel="stylesheet" type="text/css" href="styles/style_6.css" />

will result in a change in the appearance - style 06 etc.

HTML Structure

<!-- pricing table -->	
<div class="p_table">
	<div class="frame_border">
	
		<!-- caption column -->
		<div class="caption_column">
			<ul>
				<!-- column header -->
				<li class="header_row_1">
				<li class="decor_line">
				<li class="header_row_2">
		
				<!-- data rows -->
				<li class="row_style_4">
				<li class="row_style_2">	
				<li class="row_style_4">
				<li class="row_style_2">	
				<li class="row_style_4">
				<li class="row_style_2">	

				<!-- column footer -->
				<li class="footer_row">
			</ul>		
		</div>
	
		<!-- column_1 -->
		<div class="column_1">
			<ul>
				<!-- column header -->
				<li class="header_row_1">
				<li class="decor_line">
				<li class="header_row_2">
		
				<!-- data rows -->
				<li class="row_style_3">
				<li class="row_style_1">	
				<li class="row_style_3">
				<li class="row_style_1">	
				<li class="row_style_3">
				<li class="row_style_1">		

				<!-- column footer -->
				<li class="footer_row">	
			</ul>	
		</div>
	
		[...]
	
	</div>				
</div>

The entire pricing table is contained within p_table class, then within frame_border class. Each single column is a separate class in order: caption_column - this is a column with a legend / captions, column_1 - column_4 - these are the other columns.

Each column header has three classes: header_row_1 - this is the first header row with title, decor_line - this is 1px height horizontal line with glare light effect, header_row_2 - the second header row with the given price etc.

Next there are data row classes: row_style_1 - row_style_3 - each of these classes has a different background color. TIP: align_center class added to any element will center its content inside.

The final element of a column is a footer - footer_row class.

How To...

Resize column - in main.css file find class: div.p_table div.caption_column, there is a width attribute. Change that value to resize column width. Proceed similarly for other columns below: div.p_table div.column_1, div.p_table div.column_2... Next step is to resize width of div.p_table class by the same value.
Change column hover style - Look for COLUMN HOVERS labels within .css files.
Change data rows background colors - change background-color attributes of div.p_table li.row_style_1, div.p_table li.row_style_2, div.p_table li.row_style_3 classes within main.css file.
Remove or add a new data row - inside html document, remove or add a block of code:
```
<li class="row_style_1"><span>Website Statistics</span></li>
```
You can choose from row_style_1 to row_style_3 value,
Remove or add a new column - inside html document, remove or add a block of code:
```

<div class="column_4">
...
</div>
```
Add ribbon to column header - inside html document, there is a block of code (below each of column div):
```



```
Remove html comments from the second line of this code leaving:
```

<div class="column_ribbon ribbon_style1_new"></div>

```
ribbon_style1_new identifies a specific ribbon. In main.css file under /* ------ ribbon styles ------ */ comment you can find a list of these identifiers (class names that describe them). Use one of them eg.:
```

<div class="column_ribbon ribbon_style1_off35"></div>

```
Add tooltip - tooltip is associated with links and appears when you hover your mouse over the link. To add the tooltip just create empty link in the table cell eg.:
```
<li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Put here your tooltip text.">1</a></span></li> 
```

Set one or many columns as active (popped-up) by default - inside html document, add active_column class right after column_x class, eg.:

<div class="column_1 active_column">
<!-- ribbon (optional) -->
<!--<div class="column_ribbon ribbon_style1_new"></div>-->
<!-- /ribbon -->
               
<ul>
<!-- column header -->
<li class="header_row_1 align_center"><h2>standard</h2></li>
[...]

Used Fonts

Included fonts are 100% free for commercial usage.

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

Support

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. If you need a custom modification, please feel free to contact us.

Thank You for purchasing and for your support for our work!

QuanticaLabs 2013
quanticalabs@gmail.com
www.quanticalabs.com