“ Pricing Grid” download here

---

A) HTML Structure -

Horizontal Layout

Below is the structure of a pricing grid container

<div class="apg-hori apg-hori-2">
	OPTIONS GO HERE
</div>

Specify the number of options you want by using the following classes apg-hori-2, apg-hori-3, apg-hori-4, apg-hori-5To add the options, use the html structure provided below and place each option container in the order you want them displayed.

Below is the structure of a pricing grid option box

<div class="apg-option ">

	<div class="apg-header">
		<h1>Standard</h1>

		<span class="apg-price">$35<span class="label">/Mo</span></span>
	</div>

	<ul>
		<li><strong>5</strong> Users</li>
		<li><strong>5GB</strong> Space</li>
		<li><strong>20</strong> Email Accounts</li>
		<li><strong>5GB</strong> Bandwidth</li>
		<li><strong>5</strong> Domains</li>
	</ul>

	  <a href="javascript:;" class="button">Order Now</a>
</div>

How to edit the features list

To edit the features list, modify the items in the unordered list. To add an icon to a list item, first you must define your icon class in the css file (example below). Then add this class to the LI tag of the item you want to add the icon to. Note: Only five icons from the FamFamFam icon package were used in this example. Many more icons can be downloaded at their website http://www.famfamfam.com/lab/icons/silk/

.user strong { background: url(./images/silk/user.png) no-repeat 0 0; padding-left: 24px;  }

How to create a featured option

To create a featured option, add the class apg-featuredto an apg-option container.

How to change the header color(s)

To change the color of the pricing grid header, open the build-hori-header.png file located in the build directory. After editing this file, save it as hori-header.png, and place it in the correcttheme folder (ex. blue+orange or black+turquoise) in the themes directory.

Mini Layout

Below is the structure of a pricing grid container

<div class="apg-mini apg-mini-2">
	OPTIONS GO HERE
</div>

Specify the number of options you want by using the following classes apg-mini-2, apg-mini-3, apg-mini-4To add the options, use the html structure provided below and place each option container in the order you want them displayed.

Below is the structure of a mini option box

<div class="apg-option">		
	<div class="apg-header">
		<h1>Standard</h1>
	</div>

	<div class="apg-content">
		<p>Lorem ipsum dolor sit amet, consetur adipisicing elit, sed do eiusmod tempo.</p>

		<ul>
			<li><strong>5</strong> Email Accounts</li>
			<li><strong>5GB</strong> Bandwidth</li>
			<li><strong>5</strong> Domains</li>
		</ul>
	</div>

	<div class="apg-footer">
		<span class="apg-price">$35<span class="apg-label">/Mo</span></span>
	  	<a href="javascript:;" class="button">Order Now</a>
	 </div>
</div>

How to edit the feature text

Simply modify the paragraph tag contained in .apg-features container. Be careful not to enter too much text for this.

How to edit the features list

To edit the features list, modify the items in the unordered list.

How to change the header color(s)

To change the color of the pricing grid header, open the build-mini-header.png file located in the build directory. After editing this file, save it as mini-header.png, and place it in the correcttheme folder (ex. blue+orange or black+turquoise) in the themes directory.

Vertical Layout

Below is the structure of a vertical layout container

<div class="apg-vert">
	OPTIONS GO HERE
</div>

The number of option boxes is unlimited as they will just fall below each other. To add the options, use the html structure provided below and place each option container in the order you want them displayed.

Below is the structure of a vertical option box

<div class="apg-option ">

	<div class="apg-header">
		<h1>Standard</h1>

		<span class="apg-price">$35<span class="apg-label">/Mo</span></span>
	  	<a href="javascript:;" class="button">Order Now</a>
	</div>

	<div class="apg-features">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
		incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
		exercitation ullamco laboris nisi utdo.</p>

		<ul>
			<li><strong>5</strong> Email Accounts</li>
			<li><strong>5GB</strong> Bandwidth</li>
			<li><strong>5</strong> Domains</li>

		</ul>

		<ul>
			<li><strong>5</strong> Email Accounts</li>
			<li><strong>5GB</strong> Bandwidth</li>
			<li><strong>5</strong> Domains</li>

		</ul>

		<ul>
			<li><strong>5</strong> Email Accounts</li>
			<li><strong>5GB</strong> Bandwidth</li>
			<li><strong>5</strong> Domains</li>

		</ul>
	</div>

</div>

How to edit the feature text

Simply modify the paragraph tag contained in .apg-features container. Be careful not to enter too much text for this.

How to edit the features list

To edit the features list, create up to three unordered lists and place them one after another in the .apg-features container. The unordered lists will automatically layout correctly.

How to change the header color(s)

To change the color of the pricing grid header, open the build-vert-header.png file located in the build directory. After editing this file, save it as vert-header.png, and place it in the correct theme folder (ex. blue+orange or black+turquoise) in the themes directory.

---

B) CSS Files and Structure -

1. hori.css - Horizontal Layout
2. vert.css - Vertical Layout
3. mini.css - Mini Layout

---

C) Examples

Horizontal Layout

Vertical Layout

Mini Layout

---