We use shortcodes to do the bonus pages, and css file dedicated for bonus pages is joomla-page.less(path: ROOT/templates/YOUR_TEMPLATE/less/joomla-page.less)

[pricing columns="4"]
    [plan title="Free" button_link="#" button_label="Sign up!" price="$0 " per="month"]
        <ul class="pricing-list">
            <li><i class="icon-ok"></i> Disk Space <strong>10 GB</strong> </li>
            <li><i class="icon-ok"></i> Bandwidth <strong>Unlimited </strong>  </li>
            <li><i class="icon-remove"></i> Setup Free <a class="boxtip" rel="tooltip" data-original-title="TEXT_TOOLTIP" href="#" >(?) </a></li>
            <li><i class="icon-ok"></i><strong>1 </strong> Free Email Accounts <a class="boxtip" rel="tooltip" data-original-title="TEXT_TOOLTIP" href="#" >(?) </a></li>
            <li><i class="icon-ok"></i><strong>1 </strong> FTP Accounts</li>
            <li><i class="icon-ok"></i> Half Privacy</li>
        </ul>
    [/plan]
    
    [plan title="Basic" button_link="#" button_label="Sign up!" price="$15 " per="month"]
        <ul class="pricing-list">
            <li><i class="icon-ok"></i> Disk Space <strong>15 GB</strong> </li>
            <li><i class="icon-ok"></i> Bandwidth <strong>Unlimited </strong> </li>
            <li><i class="icon-ok"></i> Setup Free </li>
            <li><i class="icon-ok"></i><strong>3 </strong> Free Email Accounts </li>
            <li><i class="icon-ok"></i><strong>3 </strong> FTP Accounts</li>
            <li><i class="icon-ok"></i> Full Privacy</li>
        </ul>
    [/plan]
    
    [plan title="Pro" button_link="#" button_label="Sign up!" price="$30 " featured="true" per="month"]
        <ul class="pricing-list">
            <li><i class="icon-ok"></i> Disk Space <strong>30 GB</strong> </li>
            <li><i class="icon-ok"></i> Bandwidth <strong>Unlimited </strong>  </li>
            <li><i class="icon-ok"></i> Setup Free </li>
            <li><i class="icon-ok"></i><strong>5 </strong> Free Email Accounts </li>
            <li><i class="icon-ok"></i><strong>5 </strong> FTP Accounts</li>
            <li><i class="icon-ok"></i> Full Privacy</li>
        </ul>
    [/plan]
    
    [plan title="Premium" button_link="#" button_label="Sign up!" price="$70 "  per="month"]
        <ul class="pricing-list">
            <li><i class="icon-ok"></i> Disk Space <strong> Unlimited GB</strong> </li>
            <li><i class="icon-ok"></i> Bandwidth <strong>Unlimited </strong>  </li>
            <li><i class="icon-ok"></i> Setup Free </li>
            <li><i class="icon-ok"></i><strong> Unlimited </strong> Free Email Accounts </li>
            <li><i class="icon-ok"></i><strong> Unlimited </strong> FTP Accounts</li>
            <li><i class="icon-ok"></i> Full Privacy</li>
        </ul>
    [/plan]
[/pricing]

[pricing columns="4" style="red"]
    [plan title="PRICING_TITLE" button_link="#" button_label="PRICING_BUTTON_LABEL" price="$0"  featured="false" per="month"] TEXT_OF_PLAN[/plan]
    [plan title="PRICING_TITLE" button_link="#" button_label="PRICING_BUTTON_LABEL" price="$15" featured="false" per="month"] TEXT_OF_PLAN[/plan]
    [plan title="PRICING_TITLE" button_link="#" button_label="PRICING_BUTTON_LABEL" price="$30" featured="false" per="month"] TEXT_OF_PLAN[/plan]
    [plan title="PRICING_TITLE" button_link="#" button_label="PRICING_BUTTON_LABEL" price="$70" featured="true"  per="month"] TEXT_OF_PLAN[/plan]
[/pricing]

[pricing columns="4" style="blue"]
    [plan title="PRICING_TITLE" button_link="#" button_label="PRICING_BUTTON_LABEL" price="$0"  featured="false" per="month"] TEXT_OF_PLAN[/plan]
    ...
[/pricing]

[pricing columns="4" style="green"]
    [plan title="PRICING_TITLE" button_link="#" button_label="PRICING_BUTTON_LABEL" price="$0"  featured="false" per="month"] TEXT_OF_PLAN[/plan]
    ...
[/pricing]

[googleMaps addr="4 Yawkey Way~Boston, MA 02215" addoverview=0 label="GOOLE_MAP_LABEL" width=100% height=400 ]

[googleMaps addr="4 Yawkey Way~Boston, MA 02215" addoverview=0 label="GOOLE_MAP_LABEL" width=100% height=400 align="left" ]

[googleMaps addr="4 Yawkey Way~Boston, MA 02215" addoverview=0 label="GOOLE_MAP_LABEL" width=100% height=400 align="right" ]

Customization Options

• Lat: the latitude of the location to display on the map (an alternative to providing the address)
• Long: the longitude of the location to display on the map (an alternative to providing the address)
• Zoom: the initial zoom level of the map
• Width: width of the map embed
• Height: height of the map embed
• Options: Google map options.
• Control: Additional controls to attach to the map.
• Maptype: the type of map you want to display (roadmap, satellite, hybrid or terrain).
• Lang: Language of map
• Marker: whether you want to display the red marker showing the location specified by the address or longitude/latitude attributes.
• Addoverview: whether to display the overview map control (the arrow in the bottom right corner that expands to show the region currently being viewed).
• Addscale: whether to display the scale control (the marking that tells you the distances represented in the map).
• Streetview: A Street View Panorama to display when the Street View pegman is dropped on the map. If no panorama is specified, a default Street View Panorama will be displayed in the map's div when the pegman is dropped.
• Kml: A Kml Layer adds geographic markup to the map from a KML, KMZ or Geo RSS file that is hosted on a publicly accessible web server. A Kml Feature Data object is provided for each feature when clicked.
• Description: A localized string describing the location.
• Label: This is the label for the marker that indicates your designated address.
• Addr: You can display a Google Map by using your address or a latitude/longitude pair.

 [space height='60']

Clear Floated Div’s

 [clear ]

Line Break

 [br]

[divider margin="20px 0 20px 0" ]
[divider type="line" margin="20px 0 20px 0" ]
[divider type="dotted" margin="20px 0 20px 0" ]
[divider type="shadow" margin="20px 0 20px 0" ]
[divider type="stripes" margin="20px 0 20px 0" ]

 [youtube align='none' height='HEIGHT' width='WIDTH' ] PLACE_LINK_YOUTUBE [/youtube]

 [youtube align='left' height='HEIGHT' width='WIDTH'] PLACE_LINK_YOUTUBE [/youtube]

 [youtube align='right' height='HEIGHT' width='WIDTH'] PLACE_LINK_YOUTUBE [/youtube]

Kus eu laoreet nunc. Tincidunt nulla a Nulla eu convallis scelerisque sociis nulla interdum et. Cursus senectus alique.Ty fames pede elit nibh at risus tempus.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas libero odio, fringilla a elementum nec, iaculis a tortor. Praesent eget tortor leo. Cras bibendum mauris ut metus lacinia cursus. Aenean posuere diam quis quam aliquet nec dignissim orci convallis. Mauris molestie tincidunt convallis. Curabitur vestibulum vehicula erat eget placerat.Donec mattis, sapien id ornare interdum, orci nibh egestas nulla, at consectetur nunc libero eget nunc. Sed dignissim nisl at diam

Kus eu laoreet nunc. Tincidunt nulla a Nulla eu convallis scelerisque sociis nulla interdum et. Cursus senectus alique.Ty fames pede elit nibh at risus tempus.

Splitting a long Article into multiple linked pages

Splitting up long articles into sections is a helpful way of presenting content. Joomla! can be used to split Articles into multiple pages which are linked using Previous and Next page navigation and also a Table of Contents section which is displayed as part of the Article.

• Enter the Page Title and Table of Contents Alias as required:
  • Page Title: Allows you to enter a sub title for the page displayed after the Article title. If left blank the main Article title will be used.
  • Table of Contents Alias: Used to give a shortened name for the Table of Contents which is displayed as part of multiple page Articles. If left blank the link will be displayed as Page #.
• Click the Insert Pagebreak button. The screen will close and a horizontal rule will be inserted to show the location of the Pagebreak.
  • To close the Insert Pagebreak screen without inserting a Pagebreak click the X close button.
• Repeat steps 2-5 for each Pagebreak required.
  • To remove a Pagebreak delete the horizontal rule using the delete or backspace keys.

It is not possible to edit the Page Title and Table of Contents Alias using the content editor once it has been inserted. To modify the Pagebreak you can do one of the following:

• Delete and re-insert the pagebreak using the process described above.
• Edit the raw HTML of the Article using the editor and modify the title and alt attributes of the relevant <hr> HTML tag.

Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Curabitur luctus tortor non quam gravida ultrices. In erat urna, tincidunt nec pulvinar ac, laoreet ut orci. Duis vestibulum, mi id malesuada pulvinar, arcu nibh facilisis augue, ut accumsan urna orci sagittis justo. Donec ut metus eros.

Nulla at tortor et mauris accumsan adipiscing. Morbi pellentesque, dui ut blandit vehicula, lectus ligula aliquam nulla, sed mollis nunc odio at ipsum. Mauris scelerisque metus a justo facilisis ut semper ligula eleifend. Phasellus non odio nibh. Curabitur at tincidunt neque. Nunc euismod malesuada massa ac luctus. Pellentesque sed bibendum velit. Vivamus dictum pulvinar ipsum, vitae vestibulum eros ornare sit amet. Donec ut felis at sem auctor iaculis. Nullam hendrerit tempus tellus, ut fringilla diam vehicula quis. Nulla facilisi. Morbi at eros et leo pulvinar molestie at rutrum orci.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat justo sit amet dui sollicitudin eget interdum nibh gravida. Cras nec placerat libero. Cras id risus sem. Maecenas sit amet ligula turpis, malesuada convallis dui. Ut ligula lorem, vestibulum sit amet fringilla lobortis, posuere at odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer egestas lectus egestas erat convallis et eleifend sapien tempor. Nulla aliquam nisi sed lorem rhoncus ut adipiscing leo semper. Vestibulum sit amet libero ante, a porta augue. Morbi ornare, leo a tristique rutrum, arcu nulla ornare purus, et pharetra tortor lectus at lectus. Cras congue rhoncus eros et facilisis. Maecenas vehicula pretium turpis, in volutpat mauris imperdiet vel. Nulla facilisi. Sed at justo sem, at iaculis ligula. Phasellus ligula tortor, porttitor in imperdiet et, dignissim in metus. Etiam vitae lorem at felis porta auctor. Nullam semper pharetra gravida.