Created: August 29, 2010
By: Made by Amp
Email: amp@madebyamp.com
Thank you for purchasing Amp Pricing Grid. If you have any questions that have not been answered below, feel free to shoot me a message by email at here. Thanks again!
<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-5
To add the options, use the html structure provided below and place each option container in the order you want them displayed.
<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>
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; }
To create a featured option, add the class apg-featured to an apg-option container.
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 correct theme folder (ex. blue+orange or black+turquoise) in the themes directory.
<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-4
To add the options, use the html structure provided below and place each option container in the order you want them displayed.
<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>
Simply modify the paragraph tag contained in .apg-features container. Be careful not to enter too much text for this.
To edit the features list, modify the items in the unordered list.
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 correct theme folder (ex. blue+orange or black+turquoise) in the themes directory.
<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.
<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>
Simply modify the paragraph tag contained in .apg-features container. Be careful not to enter too much text for this.
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.
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.
Again, thank you so much for purchasing this item. As I stated at the beginning, I'd be more than happy to help should any questions arise relating to this item. No promises, but I'll do my best to help you in any way I can. Should you have a more general inquiries relating to the items on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Made by Amp