LIst of All Tags

  • 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+

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

     

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

  • Menu setting

    Template provides various menu options for desktop and mobile devices. All menu options are located within template settings. 

    In order to use all features provided by T3 framework select navigation type -> Megamenu otherwise you won't be able to define dropdown animation or use advanced layout setting of Megamenu.

    Starting with T3 version 1.3.0 is megamenu setting on standalone page accessible via template setting.

    Megamenu allows:

    • group submenus where 2nd level menu item serves as header for 3rd level menu items
    • add icons to menu items (use FontAwesome icons, ex: icon-bug)
    • add menu item captions
    • add columns
    • add rows
    • add modules into specified row / column

     

     

    Mobile menu setting

    For tablets and mobile devices is possible to choose between dropdown mobile menu and offcanvas mobile menu (inspired by Facebook menu).

    Mobile dropdown menu

    Mobile offcanvas menu

  • Module Chrome

    This template comes with built in module style / chrome that can be used to implement core Bootstrap component functionality like tabbed layouts, sliders, modal windows and even the pop over display.

     

    Granular control over module style

    One of the key features of Joomla 3.0 is the ability to assign modules a specific module chrome.

    Prior to Joomal 3.0 each module position was required to have the module style hard coded into the template. There were certain workarounds available for doing this in versions prior to Joomla 3.0 but workarounds to Joomla always come at a cost.

     

    Assigning a new module chrome to a module.

    Assigning a new module style to a module is as simple as selecting a style from the drop down list in the module manager.

    1. In your module manager edit the moduel you want to assign the new chrome to.

    2. Click on the Advanced options tab

    3. Scroll down the page and select the module style from the select list.

    4. Click apply.

    chrome

    Module style examples

    The following module styles are available in this template.

    • zendefault - A default module chrome
    • zentabs - a tabbed interface
    • zenslider - use the module title to slide open or closed a module
    • zenpopover - Use the module title to display a tooltip / popover with the module content.
  • 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
    • zenmodal - Bootstrap modal style
    • zenslider - Bootstrap collapse style
    • zenpopover - Bootstrap Popover 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.

  • Module Overview

    A myriad of module positions

    This template has 40+ module positions.

    You don't need to use all of them at the same time, but if you need a position, then it's highly likely that this template has got you covered. More 

     

    A collection of classes

    Eleven base classes that can be combined to create an unlimited number of module classes.

    Want to change the colour of a module? Easily add flavour to your layouts by adding simple to use moduel class suffixes for any of your modules. More.

     

    Bootstrap inspired module chrome

    Create modal windows, tabs, sliders and popovers out of the box

    The module chrome functionality in this template provides an easy / out of the box solution for adding the core Bootstrap functionality within your  module layouts. More.

  • Module Positions

    This template is built using the Zen Grid Framework and contains 52 module positions for you to use to create flexible page layouts. For a full understanding of how the module positions work in framework compatible templates please visit the Zen Grid Framework documentation.

    The screenshot below highlights the modules available in this template. For a run down on how we created the demo site for this template please visit the setup menu item and review the documentation available there.