Scribd Logo
Upload

Welcome to Scribd!

  • 19 views

    Griddler Pricing Grid 1 v.1.0

    Uploaded by

    Jaime Jimo Gálvez
    The document provides instructions for customizing and using Griddler Pricing Grid 1, a HTML/CSS pricing table template. It describes how to add the grid to a webpage by copying the HTML code, and how to modify the code to customize pricing columns, highlight featured columns, and add special features like banners and tooltip boxes. It also covers using Cufón fonts but limiting its effects to non-header elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Griddler Pricing Grid 1 v.1.0

    Uploaded by

    Jaime Jimo Gálvez
    19 views14 pages
    The document provides instructions for customizing and using Griddler Pricing Grid 1, a HTML/CSS pricing table template. It describes how to add the grid to a webpage by copying the HTML code, and how to modify the code to customize pricing columns, highlight featured columns, and add special features like banners and tooltip boxes. It also covers using Cufón fonts but limiting its effects to non-header elements.

    Original Description:

    AFter Effects

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides instructions for customizing and using Griddler Pricing Grid 1, a HTML/CSS pricing table template. It describes how to add the grid to a webpage by copying the HTML code, and how to modify the code to customize pricing columns, highlight featured columns, and add special features like banners and tooltip boxes. It also covers using Cufón fonts but limiting its effects to non-header elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    19 views14 pages

    Griddler Pricing Grid 1 v.1.0

    Uploaded by

    Jaime Jimo Gálvez
    The document provides instructions for customizing and using Griddler Pricing Grid 1, a HTML/CSS pricing table template. It describes how to add the grid to a webpage by copying the HTML code, and how to modify the code to customize pricing columns, highlight featured columns, and add special features like banners and tooltip boxes. It also covers using Cufón fonts but limiting its effects to non-header elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 14

    Griddler Pricing Grid 1

    Documentation

    Version 1.0
    Last Updated:
    August 5, 2010

    gothemeteam.com

    Thursday, August 5, 2010


    Table of Contents
    About Griddler Pricing Grid 1....................3

    Adding the Grid...........................................4

    Modifying the HTML Code.........................5

    Special Features......................................... 9
    “Best Value” Banner..................................10
    Tip Box/Bubble ........................................ 11

    Using Cufón ..............................................12

    Additional Help......................................... 14

    gothemeteam.com Griddler Pricing Grid 1 Instructions 2

    Thursday, August 5, 2010


    About Griddler Pricing Grid 1

    Thank you for purchasing Griddler Pricing Grid 1!

    Griddler Pricing Grid 1 is an SaaS (Software as a Service)-style HTML5/CSS3 grid with the following features:

    • Option of three, four or five modifiable grid columns

    • Ability to degrade to CSS & JS for older browsers

    • Highlighted columns

    • “Best Value” corner banner

    • Tip box/bubble that appears when the mouse hovers over a certain area

    • Includes a layered PSD file with elements you can modify to create a custom look
    This documentation contains notes on Griddler Pricing Grid 1’s code to help you customize the grid.

    gothemeteam.com Griddler Pricing Grid 1 Instructions 3

    Thursday, August 5, 2010


    Adding the Grid

    Adding the Griddler Pricing Grid 1 to your website simply consists of copying and pasting the correct HTML code.
    There can only be one pricing grid per webpage.

    To add the grid to a webpage:

    1. Determine how many grid columns you need. You have the option of displaying three, four or five columns.

    2. Open the HTML file with the desired number of columns: pricing-grid-col3.html, pricing-grid-col4.html or pricing-
    grid-col5.html.

    3. View the page’s source or open the file in a text editor. Copy and paste the HTML code to your webpage’s code.

    4. Make sure the grid links to CSS (line 5 below) and JavaScript (lines 6-8) for use in Internet Explorer:

    1 <html>
    2 <head>
    3 <meta charset="UTF-8">
    4 <title>Griddler I</title>
    5 <link href="lib/griddler.css" rel="stylesheet" type="text/css">
    6 <!--[if IE]>
    7 ! <script src="lib/html5.js"></script>
    8 <![endif]-->
    9 </head>

    gothemeteam.com Griddler Pricing Grid 1 Instructions 4

    Thursday, August 5, 2010


    Modifying the HTML Code

    You are now ready to customize the grid. We’ll use the following sample code to demonstrate how to modify a grid
    column:

    1 <article>
    2! ! <header>
    3! ! ! <hgroup class="top">
    4! ! ! ! <h1>Basic</h1>
    5! ! ! </hgroup>
    6! ! ! <hgroup class="price">
    7! ! ! ! <h2><span class="currency">$</span><strong>19</strong><span class="payment-basis">Monthly
    8 </span></h2>
    9! ! ! </hgroup>
    10! ! </header>
    11! ! <section>
    12! ! ! <ul>
    13! ! ! ! <li><strong>20 </strong> Users</li>
    14! ! ! ! <li><strong>100GB </strong> Space</li>
    15! ! ! ! <li><strong>3000 </strong> Photos</li>
    16! ! ! ! <li class="last"><strong>300GB </strong> Bandwidth</li>
    17! ! ! </ul>
    18! ! ! <div class="griddler-controls"><a class="button" href="#">Select Plan</a></div>!
    19! ! </section>
    20 </article>

    gothemeteam.com Griddler Pricing Grid 1 Instructions 5

    Thursday, August 5, 2010


    Modifying the HTML Code

    A column’s code begins with <article> as shown in line 1. Classes must be added for the first and last columns:
    <article class="first"> for the first column and <article class="last"> for the last column. A class
    must also be added for highlighted columns (see Figure 1a below). Highlighted columns “pop out” at the viewer as
    soon as the page loads. For a highlighted column, enter <article class="selected">. Figure 1a shows the
    difference between a regular column and a highlighted column:

    Regular column

    Highlighted column

    Figure 1a

    gothemeteam.com Griddler Pricing Grid 1 Instructions 6

    Thursday, August 5, 2010


    Modifying the HTML Code
    Lines 3-5 control the column’s header.

    Lines 6-8 control the blue area containing the price. Enter the currency symbol between <span
    class="currency"> and </span>. If a currency symbol isn’t needed (e.g. for a free offer), the code can be
    deleted. After the currency, enter the price. If you want to the font bolded as shown in Figure 1a on page 6, use
    <strong> </strong>. Next, if the cost is monthly, yearly, etc., a time period can appear next to the price. Enter
    the time period between <span class="payment-basis"> and </span>. If a time period is not applicable to
    your pricing plan, simply delete the code.

    Lines 12-17 control the rows of information in the light gray area. Use <strong> </strong> for bolded text. The
    last row must contain the class last.

    Finally, line 18 contains code for the green button at the bottom of the column. Enter the linking page’s URL in
    href="" and a button label between <a class="button" href=""> and </a>.

    Figure 1b on the next page shows the code’s corresponding webpage elements.

    gothemeteam.com Griddler Pricing Grid 1 Instructions 7

    Thursday, August 5, 2010


    Modifying the HTML Code

    Lines 3-5

    Lines 6-8

    Lines 12-17

    Line 18

    Figure 1b

    gothemeteam.com Griddler Pricing Grid 1 Instructions 8

    Thursday, August 5, 2010


    Special Features

    There are two features that can be added to the pricing grid: a “Best Value” corner banner and a tip box/bubble.
    The banner is another way of highlighting a particular column and can say anything you want (e.g. “Best Value,”
    “Most Popular,” “Best Offer,” “Limited Offer”). The tip box/bubble appears when you hover your mouse over
    specific text and is intended to contain more information or a special note about the text.

    “Best Value” banner

    Tip box/bubble

    Figure 2

    gothemeteam.com Griddler Pricing Grid 1 Instructions 9

    Thursday, August 5, 2010


    Special Features

    “Best Value” Banner

    To add a banner, simply add <span class="label"> </span> in the column’s header code:

    <header>
    ! ! ! <hgroup class="top">
    ! ! ! ! <h1>Professional</h1>
    ! ! ! </hgroup>
    ! ! ! <hgroup class="price">
    ! ! ! <span class="label">Enter banner text here.</span>
    !
    ! ! ! !
    <h2><span class="currency">$</span><strong>25</strong><span class="payment-basis">Monthly
    </span></h2>
    ! ! ! </hgroup>
    ! ! </header>

    The banner will be placed across the corner of the blue area containing the price:

    Figure 3

    gothemeteam.com Griddler Pricing Grid 1 Instructions 10

    Thursday, August 5, 2010


    Special Features

    Tip Box/Bubble

    To add a tip box/bubble, add <div class="tooltip"> to the section you want the box to appear:

    <li><strong>200GB </strong> Space


    <div class="tooltip">
    <div>
    <h3>Available Space</h3>
    <p>Enter tip box text here.</p>
    </div>
    </div>
    </li>

    The tip box will appear as follows:

    Figure 4

    gothemeteam.com Griddler Pricing Grid 1 Instructions 11

    Thursday, August 5, 2010


    Using Cufón

    Cufón can be used on Griddler Pricing Grid 1, but certain modifications must be made to prevent the font
    replacement from affecting all the grid elements. There are two ways you can use selectors to specify what
    elements should not be cufonized.

    For example, let’s say you do not want your headers cufonized. If generic selectors are used, the text will be
    cufonized automatically:

    function initCufon(){
    ! Cufon.replace('h1, h2', {fontFamily: '"Museo500"',hover: true});
    }

    Instead of using the generic selectors h1 and h2, use the class .cufon for elements to be cufonized:

    function initCufon(){
    ! Cufon.replace('.cufon', {fontFamily: '"Museo500"',hover: true});
    }

    gothemeteam.com Griddler Pricing Grid 1 Instructions 12

    Thursday, August 5, 2010


    Using Cufón

    Alternatively, you can add the :not selector with class .nocufon to elements that should not be cufonized:

    function initCufon(){
    ! Cufon.replace('h1:not(.nocufon), h2:not(.nocufon)', {fontFamily: '"Museo500"',hover: true});

    If you use this selector, make sure the latest version of jQuery library (or lightweight Sizzle or other JavaScript
    libraries) is added to the site. Otherwise, Cufón will not understand the selector.

    gothemeteam.com Griddler Pricing Grid 1 Instructions 13

    Thursday, August 5, 2010


    Additional Help
    For further assistance, please contact the Theme Team by filling out a contact form at http://themeforest.net/user/
    goThemeTeam.

    Thank you for purchasing Griddler Pricing Grid 1!

    gothemeteam.com Griddler Pricing Grid 1 Instructions 14

    Thursday, August 5, 2010

    You might also like