Module classes

This template comes with a wide variety of module classes that can be used to change the appearance and structure of your module classes. 

The module classes are broken up into the three broad categories – strucure, function and appearance.

Structural module classes

Used to change the position of a module

Positioning

  • top25 {margin-top: 25px}
  • top50 {margin-top: 50px}
  • top75 {margin-top: 75px}
  • top100 {margin-top: 100px}
  • top125 {margin-top: 125px}
  • top150 {margin-top: 150px}
  • top175 {margin-top: 175px}
  • top200 {margin-top: 200px}
  • top225 {margin-top: 225px}
  • top250 {margin-top: 250px}
  • top275 {margin-top: 275px}
  • top300 {margin-top: 300px}
  • top325 {margin-top: 325px}
  • top350 {margin-top: 350px}
  • top375 {margin-top: 375px}
  • top400 {margin-top: 400px}
  • top425 {margin-top: 425px} 
  • top450″ {margin-top: 450px}
  • top475 {margin-top: 475px}
  • top500 {margin-top: 500px}

Functional module styles

Used to change the function of a module

All functional module classes are handled via the module chrome / style options in each module’s module settings.

Functional module styling available includes:

  • zentabs – Bootstrap tab styling
  • zenslider – Bootstrap collapse style

Appearance module classes

Used to change the appearance of a module

  • primary1
  • primary2
  • primary3
  • secondary1
  • secondary2
  • secondary3
  • inset
  • border
  • shadow
  • shadow2
  • hot – adds the word hot to the .moduletable h3 span:after
  • new – adds the word new to the .moduletable h3 span:after

The appearance module classes can be used in combination with each other to create more compel xmoduel styles. To use multiple styles together please ensure that each module class suffix is separated by a space as per the following example. Also please note that there needs to be a space before the start of the first class in order to render the class output properly:

 primary1 inset border

 

Font Icon Module classes

Add font awesome icons to your modules

Using a combination of module classes, it is possible to create a wide range of module styles using the font awesome font icons.

A typical module class suffix using the font icons looks like this:

icon icon-comments large bottom secondary1

  • icon – initiates the font icon display
  • icon-comments – selects the icon to display. You can see a full list of icons available on the typography page.
  • large – (optional) You can choose between tiny, medium or large which set the font-size of the icon as follows: 1em, 2em (default), 4em and 8em.
  • bottom – (optional) Displays the icon at the bottom of the module. By default the icon is set to display at the top.
  • secondary1 – as per the examples on this page this refers to the built in colour control in the template.

You can scroll down to the bottom of this page to see a very small selection of the styles in action.

Typography

This template features a wide array of beautiful typography and layout snippets that puts the power back at your finger tips. In conjunction with the JB Type plugin you can harness the power of Bootstrap and Joomla 3 to create some truly beautiful and unique in page layouts.

This template features a wide array of beautiful typography and layout snippets that puts the power back at your finger tips. In conjunction with the JB Type plugin you can harness the power of Bootstrap and Joomla 3 to create some truly beautiful and unique in page layouts.

Font Icons

Font Icon syntax

After installign the JB Type plugin, using the font icons is as simple as using the following syntax in your Joomla content.

[jb_icon-glass]Here is my font-iconified bit of text[/jb_icon-glass]

Please change the square brackets above to the curly brackets {

List of available font icons:

New icons available in JB Type v1.8+

{jb_icon-cloud-download}This is the jb_icon-cloud-download style.{/jb_icon-cloud-download}
{jb_icon-cloud-upload}This is the jb_icon-cloud-upload style.{/jb_icon-cloud-upload}
{jb_icon-lightbulb}This is the jb_icon-lightbulb style.{/jb_icon-lightbulb}
{jb_icon-exchange}This is the jb_icon-exchange style.{/jb_icon-exchange}
{jb_icon-bell-alt}This is the jb_icon-bell-alt style.{/jb_icon-bell-alt}
{jb_icon-file-alt}This is the jb_icon-file-alt style.{/jb_icon-file-alt}
{jb_icon-beer}This is the jb_icon-beer style.{/jb_icon-beer}
{jb_icon-coffee}This is the jb_icon-coffee style.{/jb_icon-coffee}
{jb_icon-food}This is the jb_icon-food style.{/jb_icon-food}
{jb_icon-fighter-jet}This is the jb_icon-fighter-jet style.{/jb_icon-fighter-jet}
{jb_icon-user-md}This is the jb_icon-user-md style.{/jb_icon-user-md}
{jb_icon-stethoscope}This is the jb_icon-stethoscope style.{/jb_icon-stethoscope}
{jb_icon-suitcase}This is the jb_icon-suitcase style.{/jb_icon-suitcase}
{jb_icon-building}This is the jb_icon-building style.{/jb_icon-building}
{jb_icon-hospital}This is the jb_icon-hospital style.{/jb_icon-hospital}
{jb_icon-ambulance}This is the jb_icon-ambulance style.{/jb_icon-ambulance}
{jb_icon-medkit}This is the jb_icon-medkit style.{/jb_icon-medkit}
{jb_icon-h-sign}This is the jb_icon-h-sign style.{/jb_icon-h-sign}
{jb_icon-plus-sign-alt}This is the jb_icon-plus-sign-alt style.{/jb_icon-plus-sign-alt}
{jb_icon-spinner}This is the jb_icon-spinner style.{/jb_icon-spinner}
{jb_icon-angle-left}This is the jb_icon-angle-left style.{/jb_icon-angle-left}
{jb_icon-angle-right}This is the jb_icon-angle-right style.{/jb_icon-angle-right}
{jb_icon-angle-up}This is the jb_icon-angle-up style.{/jb_icon-angle-up}
{jb_icon-angle-down}This is the jb_icon-angle-down style.{/jb_icon-angle-down}
{jb_icon-double-angle-left}This is the jb_icon-double-angle-left style.{/jb_icon-double-angle-left}
{jb_icon-double-angle-right}This is the jb_icon-double-angle-right style.{/jb_icon-double-angle-right}
{jb_icon-double-angle-up}This is the jb_icon-double-angle-up style.{/jb_icon-double-angle-up}
{jb_icon-double-angle-down}This is the jb_icon-double-angle-down style.{/jb_icon-double-angle-down}
{jb_icon-circle-blank}This is the jb_icon-circle-blank style.{/jb_icon-circle-blank}
{jb_icon-circle}This is the jb_icon-circle style.{/jb_icon-circle}
{jb_icon-desktop}This is the jb_icon-desktop style.{/jb_icon-desktop}
{jb_icon-laptop}This is the jb_icon-laptop style.{/jb_icon-laptop}
{jb_icon-tablet}This is the jb_icon-tablet style.{/jb_icon-tablet}
{jb_icon-mobile-phone}This is the jb_icon-mobile-phone style.{/jb_icon-mobile-phone}
{jb_icon-quote-left}This is the jb_icon-quote-left style.{/jb_icon-quote-left}
{jb_icon-quote-right}This is the jb_icon-quote-right style.{/jb_icon-quote-right}
{jb_icon-reply}This is the jb_icon-reply style.{/jb_icon-reply}
{jb_icon-github-alt}This is the jb_icon-github-alt style.{/jb_icon-github-alt}
{jb_icon-folder-close-alt}This is the jb_icon-folder-close-alt style.{/jb_icon-folder-close-alt}
{jb_icon-folder-open-alt}This is the jb_icon-folder-open-alt style.{/jb_icon-folder-open-alt}
 

 

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

Zentools Filter

Overview

The filter layout is a grid based layout that allows the user to filter the items that are shown in the module according to their respective categories. The triggers are automatically populated based on the category of your item.

 

Features

  • Filter items shown in the module based on the item categories.
  • Display unlimited number of items from Joomla, k2 content or images from a folder.
  • Full control over the grid with multiple grid based layouts available.
 

Filter Demonstration

The tags are populated based on the the categories that the items in the module are assigned to using standard Joomla or K2 categories.

{loadposition filter}

Zentools Grid

Overview

The Zentools grid layout is a classic multi-column responsive grid that can be used to generate a wide range of layouts.

 

Features

  • A flexible grid based on 1 to 12 columns.
  • Create columns within columns
 

Grid Demonstration

ZenTools Grid Lots of Columns

The grid below is set to display 6 images in 6 columns. The images are referenced directly from a folder in your Joomla site.

{loadposition zengrid2}

 

 

Columns within columns

The grid below is set to display 2 columns however each item is also set to display it’s content in two columns.

{loadposition zengrid3}

Zentools Slideshow

Overview

A responsive slideshow with multiple layouts, themes with added control over pagination, speed and transitions.

 

Features

  • A responsive slideshow that responds to the width of your template.
  • Display any number of core elements sourced from Joomla, K2 or images from a folder.
  • Multiple pagination options including thumbnails, titles, numbers and discs.
  • A selection of simple pre-built themes.
  • Next / Previous buttons.
  • Control slideshow speed and duration.
  • Multiple slideshows on a single page.

ZenTools Slideshow

The slideshow below uses the slideshow standard layout. The image is the first item displayed int he module and then all other elements are absolutely positioned above it.

{loadposition slideshow}

ZenTools Flat slideshow

The slideshow below uses the flat layout and the contents of each item is set to display in two columns.

{loadposition slideshow2}

Zentools Masonry

Overview

The best way to think of the jQuery Masonry effect is that it’s the opposite of css floats. Whereas floating elements with css will organise each block horizontally (see the grid layout), masonry organises each block vertically. The blocks on the page consequently organise themselves based on the next available space below the preceding block, like a jigsaw puzzle or as the name suggests a piece of masonry.

 

Features

  • Create dynamic and flexible layouts using multiple width items as well as equal width items.
  • Display any number of core elements from your Joomla or K2 content or images retrieved from a folder.
  • Media queries revert all items to a 100% width for smaller screens.
 

Demonstration

{loadposition masonry}

ZenTools List

Overview

The Zentools list layout is the perfect layout for when you need to display your content in a simple unordered list.

 

Features

  • Each item is rendered underneath the next one in a vertical list.
  • Create layouts that include up to four columns.
 

Demonstration

ZenTools Two Columns

The layout below uses the list layout with each individual item set to display it’s contents in two columns.

{loadposition list}

 

 

ZenTools Three Columns

The layout below uses the list layout with each individual item set to display it’s contents in three columns.

{loadposition list2}

Zentools Carousel

Overview

The Zentools carousel layout places the content of your module in a horizontal carousel. Based loosely on the core grid layout you can determine the minimum number of items to be shown in the carousel at any one time.

 

Features

  • Responsive: responds to the width of your page (resize your browser to see)
  • Display unlimited images from a folder, Joomla or K2 content.
  • Determine the base width of the carousel item<
  • Determine the minimum number of items to display in a carousel at one time.
  • When the page is resized the current item is returned to the visible part of the carousel.
  • Based on the elastislide carousel script.
 

Carousel Demonstration

The carousel below uses the zen-boxed theme and is set to display a minimum of 2 items regardless of the screensize.

{loadposition carousel}