To display an unbranded pricing grid showing the package levels of the CMS, the page, storage and user limits of each package, and a listing of which features are included in which packages, simply copy and paste the following code snippet into the HTML of your website:

<script src="http://publishpath.com/scripts/resellerplans.js" type="text/javascript"></script>

See an example of an unstyled pricing grid dropped into one of our system's default templates.

Set your own package names and pricing

You can customize the names and pricing for the packages output by the script. To set custom pricing, use a script as follows with a comma-separated list of prices for each package, starting with the lowest level and moving up to the highest:

<script src="http://publishpath.com/scripts/resellerplans5,25,55,75,105,155.js" type="text/javascript"></script>

To set custom package names and custom pricing, use a script as follows, pre-pending the name of your package followed by an underscore in front of your package price:

<script src="http://publishpath.com/scripts/resellerplansSmall_5,Tall_25,Grande_55,Super%20Grande_75,Venti_105,Super%20Venti_155.js" type="text/javascript"></script>

What about styling?

In order to provide you with ultimate flexibility to create your own styles, we have not included any styles inside the script (other than styles required to create the popup help functionality on the pricing grid). The markup is pure and will take on the style of whatever site you place the script in (you can see this on the examples above which are included in our templates with no special styles applied). That said, here are a few helpful ideas for styling the lists.

You can use our styles as a starting point on the pricing grid

If you want, you are welcome to take a look at the style sheets we have created for the pricing grid on own marketing websites for WaterCMS, SkyCMS and LightCMS. You are welcome to utilize these style sheets as a starting point for your own styles or even link directly to them to utilize them as is. You can find them at the following links:

• WaterCMS -- http://publishpath.com/Websites/h20/templates/waterfinal/c/pricing.css
• SkyCMS -- http://publishpath.com/Websites/divum/templates/sky/c/pricing.css
• LightCMS -- http://publishpath.com/Websites/lumina/templates/light/c/pricing.css

Some basic CSS to add borders to the pricing grid

Adding borders to the pricing grid makes things a little easier to read. So, here are a few simple CSS statements you can add to your style sheet to achieve basic borders. Naturally, there's much more that you can do with CSS, but this will at least turn on some basic borders easily if you need a little help getting started.

div.tableholder { border: 2px solid #333; padding: 5px; }
table.signup td { border: 1px solid #333; padding: 5px; }
table.signup th { border: 1px solid #333; padding: 5px; }
table.signup { border-collapse: collapse; }