Custom HTML Elements

Logo grid

In this template we have included support for the grid layout with logotypes. It is based on the following structure:

<div class="gkGrid" data-cols="3"> <div> <a href="#logo1"><img src="/images/demo/logotypes/logo1.png" alt="Logo I"></a> <a href="#logo2"><img src="/images/demo/logotypes/logo2.png" alt="Logo II"></a> <a href="#logo3"><img src="/images/demo/logotypes/logo3.png" alt="Logo III"></a> <a href="#logo4"><img src="/images/demo/logotypes/logo4.png" alt="Logo IV"></a> <a href="#logo5"><img src="/images/demo/logotypes/logo5.png" alt="Logo V"></a> <a href="#logo6"><img src="/images/demo/logotypes/logo6.png" alt="Logo VI"></a> </div> </div> 

The most important are the gkGrid class and the data-cols attribute – this attribute specifies amount of the columns of logotypes. You can specify up to 8 columns.

Banners

If you want to put a banner using the standard com_banners component, you can use the clear module suffix – then the banner image will be displayed without any additional spacing, and will have applied streching CSS styles – it is very useful for responsive websites.

Price Table

Basic
$15 /month
Unlimited Storage
Unlimited Transactions
Unlimited Contacts
Unlimited Users
Try it for a month!
Choose
Premium
$99 /month
Unlimited Storage
Unlimited Transactions
Unlimited Contacts
Unlimited Users
Try it for a month!
Choose
Plus
$29 /month
Unlimited Storage
Unlimited Transactions
Unlimited Contacts
Unlimited Users
Try it for a month!
Choose

Price table Custom HTML is based on the following structure:

<div class="gkPriceTable col3"> <dl> <dt>Basic</dt> <dd class="gkPrice">$15<small>/ month</small></dd> <dd>Unlimited Storage</dd> <dd>Unlimited Transactions</dd> <dd>Unlimited Contacts</dd> <dd>Unlimited Users</dd> <dd>Try it for a month!</dd> <dd><a href="#">Choose</a></dd> </dl>  <dl class="gkPremium"> <dt>Premium</dt> <dd class="gkPrice">$99<small>/ month</small></dd> <dd>Unlimited Storage</dd> <dd>Unlimited Transactions</dd> <dd>Unlimited Contacts</dd> <dd>Unlimited Users</dd> <dd>Try it for a month!</dd> <dd><a href="#">Choose</a></dd> </dl>  <dl> <dt>Plus</dt> <dd class="gkPrice">$29<small>/ month</small></dd> <dd>Unlimited Storage</dd> <dd>Unlimited Transactions</dd> <dd>Unlimited Contacts</dd> <dd>Unlimited Users</dd> <dd>Try it for a month!</dd> <dd><a href="#">Choose</a></dd> </dl> </div>

The main wrapper contains two clases: the gkPriceTable class is required as a base of the CSS styling and the second class is used to specify the amount of columns – you can use classes col1col5.

Every column is specified by dl element (with gkPremium class the column will be highlighted) – in the dt element you can specify the table column title. In the dd element with gkPrice class you can specify the price – using the small element you can specify te service period time.

Adding of the button at the bottom is very simple – it needs just to add the link element in the dd element.

Page Break

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere nisi quis odio egestas non tempus est sollicitudin. Nulla facilisi. Pellentesque tempus suscipit nulla sed tempor. Phasellus et lorem id libero fermentum molestie sit amet sit amet mi. Quisque ultrices, neque et laoreet dictum, arcu sapien pulvinar odio, in aliquam mi dui eu leo. Nullam posuere, arcu et egestas fermentum, enim purus fermentum diam, quis porta mauris lectus ut odio. In tincidunt dapibus malesuada. Integer a lorem ligula. In tincidunt augue eget velit convallis nec pharetra eros tincidunt. Maecenas et tortor libero, vel malesuada est.

Quisque magna tellus, condimentum a porttitor eu, fermentum nec enim. Aenean et erat nec lectus adipiscing auctor. Sed tellus sapien, condimentum eget tristique ac, faucibus sed nisi. Curabitur pretium porta pulvinar. Integer cursus venenatis dictum. Morbi massa est, ultricies ut ultrices vitae, hendrerit vitae tellus. Duis a nulla quis tellus lacinia tristique.

Page break example

Ut dignissim aliquet nibh tristique hendrerit. Donec ullamcorper nulla quis metus vulputate id placerat augue eleifend. Aenean venenatis consectetur orci, sit amet ultricies magna sagittis vel. Nulla non diam nisi, ut ultrices massa. Pellentesque sed nisl metus. Praesent a mi vel ante molestie venenatis.

Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Mauris justo metus, ultrices id lobortis et, euismod sit amet metus. Maecenas sed nisl a arcu ultricies consectetur. Integer ut mollis elit. Nulla ultrices scelerisque mauris id commodo. Integer congue lectus et justo pellentesque sed semper lacus facilisis. Nunc tristique placerat odio eget rutrum.

Ut viverra erat id augue bibendum rutrum. Nam aliquet feugiat molestie. Maecenas tempus scelerisque tellus eu mattis. Aliquam dignissim aliquam posuere. Sed dignissim, ipsum sed sodales aliquam, erat dolor varius eros, in semper sem metus vel metus. Nullam est mauris, laoreet condimentum hendrerit et, euismod quis dolor. Nunc eleifend lacinia libero eget scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.

Vivamus eget est urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus mauris justo, fermentum quis mattis vel, auctor vitae metus. Maecenas non dolor ac risus faucibus luctus non id turpis. Morbi ante nibh, suscipit non adipiscing in, ornare in ipsum.

Module variations

On this page you can see basic suffixes used in this template.

01For the modules used on the top1-2 and bottom1-2 module positions we recommened to use only default module styles due the structure of these module positions.

02The clear suffix is very useful to create banners or images without additional borders, margins and paddings. The clear suffix is also very useful inside the mainbody, mainbody_top and mainbody_bottom module positions.

03For the layout with the grey background please assign the frontpage page suffix in the template settings. Additionally if you need to create a transparent sidebar please use transparent-sidebar suffix.

04You can create modules with the border using the following module suffixes: border1(white border), border2(dark border), border3(color border). These suffixes are very useful especially on the pages when the frontpage suffix is used.

05You can create wider module on the bottom1-2 module positions – please use the double suffix which will increase the module width.

06If you want to create a modules with big title, please use the bigtitle suffix. Additionally you can use markdown syntax to achieve the small (subheader) and strong elements in the title. The small element can be created using syntax __text__, the strong element uses the following syntax: **text**.

Messages

Joomla! offers three different types of messages. Creatings standard information about Joomla! system is presented depending on a message type as follows:

 

Error
  • This is a sample message
Error
  • This is a sample of notice message
Error
  • This is a sample of error message

Typography

It is possible with templates which have a typography page to show you how you can use e.g. headline tags in order to structure your content in a better way. Below, we present rebuilt and refreshed typographical aspects of Gavern Framework. In order to use it, you have to use a plug in which is delivered in a package with a template or use HTML code.

Warnings

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan…

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan…

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan…

Headings

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Highlights

This is a highlight phrase.
Use <span class=»gkHighlight1″>Your highlight phrase goes here!</span>.

This is a highlight phrase.
Use <span class=»gkHighlight2″>Your highlight phrase goes here!</span>.

Code

#wrapper {
float: left;
display: block;
}

Use <pre> content here… </pre> or <code> content here… </code>

Unordered lists

<ul class=»gkBullet1″>

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

<ul class=»gkBullet2″>

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

<ul class=»gkBullet3″>

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

<ul class=»gkBullet4″>

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

numBlocks

<p class=»numblocks num-1″><span>here goes a number</span>and here text of element</p>

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p class=»numblocks num-2″><span>here goes a number</span>and here text of element</p>

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p class=»numblocks num-3″><span>here goes a number</span>and here text of element</p>

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blocks

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Use <div class=»gkblock-1″>content here… </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Use <div class=»gkblock-2″>content here… </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Use <div class=»gkblock-3″>content here… </div>

Legends

Legend

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Use <div class=»gkLegend1″> <h4> Title </h4> <p>and here text.</p> </div>

Bubbles

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Use <div class=»bubble-1″>content here… <cite>Author name</cite></div>

Robert Gavick

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Use <div class=»bubble-2″>content here… <cite>Author name</cite></div>

Robert Gavick

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.

Use <blockquote> Your quoted text goes here… </blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.

Use <blockquote class=»gkBlockquote1″> Your quoted text goes here… </blockquote>

Floated blocks

<p> Here goes main part of the text <span class=»gkBlockTextLeft»>Block of text</span>rest of the text</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus.

<p> Here goes main part of the text <span class=»gkBlockTextRight»>Block of text</span>rest of the text</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus.

<p> Here goes main part of the text <span class=»gkBlockTextCenter»>Block of text</span>rest of the text</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus. Nunc a malesuada felis. Cras ultrices sapien eu nisi elementum non blandit urna sodales.

Icons – Font Awesome

The Font Awesome is a set of base icons similar to the Glyphicons included with Bootstrap, plus a set of extended icons that include pictograms for external links, thumbs up/down, comments, cogs and more. Font Awesome is licensed under the Creative Commons Attribution 3.0 Unported (CC BY 3.0). More details you can find on project homepage at http://fortawesome.github.io/Font-Awesome/3.2.1/

Use <i class=»icon-CLASS_NAME«></i> content here…

  • icon-adjust
  • icon-asterisk
  • icon-ban-circle
  • icon-bar-chart
  • icon-barcode
  • icon-beaker
  • icon-beer
  • icon-bell
  • icon-bell-alt
  • icon-bolt
  • icon-book
  • icon-bookmark
  • icon-bookmark-empty
  • icon-briefcase
  • icon-bullhorn
  • icon-calendar
  • icon-camera
  • icon-camera-retro
  • icon-certificate
  • icon-check
  • icon-check-empty
  • icon-circle
  • icon-circle-blank
  • icon-cloud
  • icon-cloud-download
  • icon-cloud-upload
  • icon-coffee
  • icon-cog
  • icon-cogs
  • icon-comment
  • icon-comment-alt
  • icon-comments
  • icon-comments-alt
  • icon-credit-card
  • icon-dashboard
  • icon-desktop
  • icon-download
  • icon-download-alt
  • icon-edit
  • icon-envelope
  • icon-envelope-alt
  • icon-exchange
  • icon-exclamation-sign
  • icon-external-link
  • icon-eye-close
  • icon-eye-open
  • icon-facetime-video
  • icon-fighter-jet
  • icon-film
  • icon-filter
  • icon-fire
  • icon-flag
  • icon-folder-close
  • icon-folder-open
  • icon-folder-close-alt
  • icon-folder-open-alt
  • icon-food
  • icon-gift
  • icon-glass
  • icon-globe
  • icon-group
  • icon-hdd
  • icon-headphones
  • icon-heart
  • icon-heart-empty
  • icon-home
  • icon-inbox
  • icon-info-sign
  • icon-key
  • icon-leaf
  • icon-laptop
  • icon-legal
  • icon-lemon
  • icon-lightbulb
  • icon-lock
  • icon-unlock
  • icon-magic
  • icon-magnet
  • icon-map-marker
  • icon-minus
  • icon-minus-sign
  • icon-mobile-phone
  • icon-money
  • icon-move
  • icon-music
  • icon-off
  • icon-ok
  • icon-ok-circle
  • icon-ok-sign
  • icon-pencil
  • icon-picture
  • icon-plane
  • icon-plus
  • icon-plus-sign
  • icon-print
  • icon-pushpin
  • icon-qrcode
  • icon-question-sign
  • icon-quote-left
  • icon-quote-right
  • icon-random
  • icon-refresh
  • icon-remove
  • icon-remove-circle
  • icon-remove-sign
  • icon-reorder
  • icon-reply
  • icon-resize-horizontal
  • icon-resize-vertical
  • icon-retweet
  • icon-road
  • icon-rss
  • icon-screenshot
  • icon-search
  • icon-share
  • icon-share-alt
  • icon-shopping-cart
  • icon-signal
  • icon-signin
  • icon-signout
  • icon-sitemap
  • icon-sort
  • icon-sort-down
  • icon-sort-up
  • icon-spinner
  • icon-star
  • icon-star-empty
  • icon-star-half
  • icon-tablet
  • icon-tag
  • icon-tags
  • icon-tasks
  • icon-thumbs-down
  • icon-thumbs-up
  • icon-time
  • icon-tint
  • icon-trash
  • icon-trophy
  • icon-truck
  • icon-umbrella
  • icon-upload
  • icon-upload-alt
  • icon-user
  • icon-user-md
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-warning-sign
  • icon-wrench
  • icon-zoom-in
  • icon-zoom-out
  • icon-file
  • icon-file-alt
  • icon-cut
  • icon-copy
  • icon-paste
  • icon-save
  • icon-undo
  • icon-repeat
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-indent-left
  • icon-indent-right
  • icon-font
  • icon-bold
  • icon-italic
  • icon-strikethrough
  • icon-underline
  • icon-link
  • icon-paper-clip
  • icon-columns
  • icon-table
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-list
  • icon-list-ol
  • icon-list-ul
  • icon-list-alt
  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angle-down
  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-caret-down
  • icon-caret-left
  • icon-caret-right
  • icon-caret-up
  • icon-chevron-down
  • icon-chevron-left
  • icon-chevron-right
  • icon-chevron-up
  • icon-circle-arrow-down
  • icon-circle-arrow-left
  • icon-circle-arrow-right
  • icon-circle-arrow-up
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-hand-down
  • icon-hand-left
  • icon-hand-right
  • icon-hand-up
  • icon-circle
  • icon-circle-blank
  • icon-play-circle
  • icon-play
  • icon-pause
  • icon-stop
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-fullscreen
  • icon-resize-full
  • icon-resize-small
  • icon-phone
  • icon-phone-sign
  • icon-facebook
  • icon-facebook-sign
  • icon-twitter
  • icon-twitter-sign
  • icon-github
  • icon-github-alt
  • icon-github-sign
  • icon-linkedin
  • icon-linkedin-sign
  • icon-pinterest
  • icon-pinterest-sign
  • icon-google-plus
  • icon-google-plus-sign
  • icon-sign-blank
  • icon-ambulance
  • icon-beaker
  • icon-h-sign
  • icon-hospital
  • icon-medkit
  • icon-plus-sign-alt
  • icon-stethoscope
  • icon-user-md