JB Type
Free Joomla Extension - Joomla 1.5 / Joomla 2.5 / Joomla 3.0
JB Type is a Joomla style and typography plugin for your content. By using some simple Joomla syntax you can create some awesome typography for your site without knowing any html at all.
Ready for Joomla 3.0 plus Bootstrap goodies
JB Type is now compatible for Joomla 3.0+ and also comes with some new icons that ship with the twitter bootstrap framework.
More downloads
JCE JB Type Plugin v2.0 - compatible with JCE v2.x
JCE JB Type Plugin v1.0 - compatible with JCE v1.x
Please note that you also need to have the JCE editor installed on your site.
Features at a glance
- Use simple syntax to trigger the JB Type styles.
- Use Iconic, orange sticker, coquette or glyphicon icons.
- The JCE JB type editor plugin allows you to use the JB Type syntax from the backendfor JCE users.
- A raft of other useful typographical styles including block quotes, breakout boxes and more.
Using JB Type
JB Type Syntax
Once you have installed and published the plugin open a content item where you want to use the style and use the syntax associated with the style you want to use.
eg { jb_code}This is your information here{ /jb_code}
Please note that there is a space preceding the last closing bracket to prevent the snippet from rendering here.
The JCE JB Type plugin
JCE wysiwyg editor are also able to use the JCE JB Type plugin which provides a drop down list of JB Type styles available from the within the Joomla editor. A big thanks to Ryan Demmer for creating this plugin for us.
The JB Type Font Icons
One of the best features of the JB Type plugin is the ability to render multiple font icons (via the font awesome font icon library.)
Font icons are great because you can easily target the fonts via standard css; making it easy to change the size, color, border and any other css normally applied to on page elements.
Each icon is name spaced with their corresponding icon so if you look at the source code of a page using JB Type font icons you would see something like the following code:
So in order to affect the appearance of the icon in this case you would need to add the following to your css:
.jbtype i:before {
font-size: 4em;
color: #333;
}
The code above would render icons 4 times the size of the base font size and change the color to dark grey.
New icons added to JB Type v1.9
This is the jb_icon-collapse style.
This is the jb_icon-collapse-top style.
This is the jb_icon-eur style.
This is the jb_icon-euro style.
This is the jb_icon-gbp style.
This is the jb_icon-usd style.
This is the jb_icon-dollar style.
This is the jb_icon-inr style.
This is the jb_icon-rupee style.
This is the jb_icon-jpy style.
This is the jb_icon-yen style.
This is the jb_icon-cny style.
This is the jb_icon-renminbi style.
This is the jb_icon-krw style.
This is the jb_icon-won style.
This is the jb_icon-btc style.
This is the jb_icon-bitcoin style.
This is the jb_icon-file style.
This is the jb_icon-file-text style.
This is the jb_icon-sort-by-alphabet style.
This is the jb_icon-sort-by-alphabet-alt style.
This is the jb_icon-sort-by-attributes style.
This is the jb_icon-sort-by-attributes-alt style.
This is the jb_icon-sort-by-order style.
This is the jb_icon-sort-by-order-alt style.
This is the jb_icon-thumbs-up style.
This is the jb_icon-thumbs-down style.
This is the jb_icon-youtube style.
This is the jb_icon-xing style.
This is the jb_icon-xing-sign style.
This is the jb_icon-youtube-play style.
This is the jb_icon-dropbox style.
This is the jb_icon-stackexchange style.
This is the jb_icon-instagram style.
This is the jb_icon-flickr style.
This is the jb_icon-adn style.
This is the jb_icon-bitbucket style.
This is the jb_icon-bitbucket-sign style.
This is the jb_icon-tumblr style.
This is the jb_icon-tumblr-sign style.
This is the jb_icon-long-arrow-down style.
This is the jb_icon-long-arrow-up style.
This is the jb_icon-long-arrow-left style.
This is the jb_icon-long-arrow-right style.
This is the jb_icon-apple style.
This is the jb_icon-windows style.
This is the jb_icon-android style.
This is the jb_icon-linux style.
This is the jb_icon-dribbble style.
This is the jb_icon-skype style.
This is the jb_icon-foursquare style.
This is the jb_icon-trello style.
This is the jb_icon-female style.
This is the jb_icon-male style.
This is the jb_icon-sun style.
This is the jb_icon-moon style.
This is the jb_icon-archive style.
This is the jb_icon-bug style.
This is the jb_icon-vk style.
This is the jb_icon-weibo style.
This is the jb_icon-renren style.
Available font icons
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.
This is the jb_icon-glass style.
This is the jb_icon-music style.
This is the jb_icon-search: style.
This is the jb_icon-envelope style.
This is the jb_icon-heart style.
This is the jb_icon-star style.
This is the jb_icon-star-empty style.
This is the jb_icon-user style.
This is the jb_icon-film style.
This is the jb_icon-th-large style.
This is the jb_icon-th style.
This is the jb_icon-th-list style.
This is the jb_icon-ok style.
This is the jb_icon-remove style.
This is the jb_icon-zoom-in style.
This is the jb_icon-zoom-out style.
This is the jb_icon-off style.
This is the jb_icon-signal style.
This is the jb_icon-cog style.
This is the jb_icon-trash style.
This is the jb_icon-home style.
This is the jb_icon-file style.
This is the jb_icon-time style.
This is the jb_icon-road style.
This is the jb_icon-download-alt style.
This is the jb_icon-download style.
This is the jb_icon-upload style.
This is the jb_icon-inbox style.
This is the jb_icon-play-circle style.
This is the jb_icon-repeat style.
This is the jb_icon-refresh style.
This is the jb_icon-list-alt style.
This is the jb_icon-lock style.
This is the jb_icon-flag style.
This is the jb_icon-headphones style.
This is the jb_icon-volume-off style.
This is the jb_icon-volume-down style.
This is the jb_icon-volume-up style.
This is the jb_icon-qrcode style.
This is the jb_icon-tag style.
This is the jb_icon-book style.
This is the jb_icon-bookmark style.
This is the jb_icon-print style.
This is the jb_icon-camera style.
This is the jb_icon-font style.
This is the jb_icon-bold style.
This is the jb_icon-italic style.
This is the jb_icon-text-height style.
This is the jb_icon-text-width style.
This is the jb_icon-align-left style.
This is the jb_icon-align-center style.
This is the jb_icon-align-right style.
This is the jb_icon-align-justify style.
This is the jb_icon-list style.
This is the jb_icon-indent-left style.
This is the jb_icon-indent-right style.
This is the jb_icon-facetime-video style.
This is the jb_icon-picture style.
This is the jb_icon-pencil style.
This is the jb_icon-map-marker style.
This is the jb_icon-adjust style.
This is the jb_icon-tint style.
This is the jb_icon-edit style.
This is the jb_icon-share style.
This is the jb_icon-check style.
This is the jb_icon-move style.
This is the jb_icon-step-backward style.
This is the jb_icon-fast-backward style.
This is the jb_icon-backward style.
This is the jb_icon-play style.
This is the jb_icon-pause style.
This is the jb_icon-stop style.
This is the jb_icon-forward style.
This is the jb_icon-fast-forward style.
This is the jb_icon-step-forward style.
This is the jb_icon-eject style.
This is the jb_icon-chevron-left style.
This is the jb_icon-chevron-right style.
This is the jb_icon-plus-sign style.
This is the jb_icon-minus-sign style.
This is the jb_icon-remove-sign style.
This is the jb_icon-ok-sign style.
This is the jb_icon-question-sign style.
This is the jb_icon-info-sign style.
This is the jb_icon-screenshot style.
This is the jb_icon-remove-circle style.
This is the jb_icon-ok-circle style.
This is the jb_icon-ban-circle style.
This is the jb_icon-arrow-left style.
This is the jb_icon-arrow-right style.
This is the jb_icon-arrow-up style.
This is the jb_icon-arrow-down style.
This is the jb_icon-resize-full style.
This is the jb_icon-resize-small style.
This is the jb_icon-minus style.
This is the jb_icon-asterisk style.
This is the jb_icon-exclamation-sign style.
This is the jb_icon-gift style.
This is the jb_icon-leaf style.
This is the jb_icon-fire style.
This is the jb_icon-eye-open style.
This is the jb_icon-eye-close style.
This is the jb_icon-warning-sign style.
This is the jb_icon-plane style.
This is the jb_icon-calendar style.
This is the jb_icon-random style.
This is the jb_icon-comment style.
This is the jb_icon-magnet style.
This is the jb_icon-chevron-up style.
This is the jb_icon-chevron-down style.
This is the jb_icon-retweet style.
This is the jb_icon-shopping-cart style.
This is the jb_icon-folder-close style.
This is the jb_icon-folder-open style.
This is the jb_icon-resize-vertical style.
This is the jb_icon-resize-horizontal style.
This is the jb_icon-twitter-sign style.
This is the jb_icon-facebook-sign style.
This is the jb_icon-camera-retro style.
This is the jb_icon-key style.
This is the jb_icon-cogs style.
This is the jb_icon-comments style.
This is the jb_icon-thumbs-up style.
This is the jb_icon-thumbs-down style.
This is the jb_icon-star-half style.
This is the jb_icon-heart-empty style.
This is the jb_icon-signout style.
This is the jb_icon-linkedin-sign style.
This is the jb_icon-pushpin style.
This is the jb_icon-external-link style.
This is the jb_icon-signin style.
This is the jb_icon-trophy style.
This is the jb_icon-github-sign style.
This is the jb_icon-upload-alt style.
This is the jb_icon-lemon style.
This is the jb_icon-phone style.
This is the jb_icon-check-empty style.
This is the jb_icon-bookmark-empty style.
This is the jb_icon-phone-sign style.
This is the jb_icon-twitter style.
This is the jb_icon-facebook style.
This is the jb_icon-github style.
This is the jb_icon-unlock style.
This is the jb_icon-credit-card style.
This is the jb_icon-rss style.
This is the jb_icon-hdd style.
This is the jb_icon-bullhorn style.
This is the jb_icon-bell style.
This is the jb_icon-certificate style.
This is the jb_icon-hand-right style.
This is the jb_icon-hand-left style.
This is the jb_icon-hand-down style.
This is the jb_icon-circle-arrow-left style.
This is the jb_icon-circle-arrow-right style.
This is the jb_icon-circle-arrow-up style.
This is the jb_icon-circle-arrow-down style.
This is the jb_icon-globe style.
This is the jb_icon-wrench style.
This is the jb_icon-tasks style.
This is the jb_icon-filter style.
This is the jb_icon-briefcase style.
This is the jb_icon-fullscreen style.
This is the jb_icon-group style.
This is the jb_icon-link style.
This is the jb_icon-cloud style.
This is the jb_icon-beaker style.
This is the jb_icon-cut style.
This is the jb_icon-copy style.
This is the jb_icon-paper-clip style.
This is the jb_icon-save style.
This is the jb_icon-sign-blank style.
This is the jb_icon-reorder style.
This is the jb_icon-list-ul style.
This is the jb_icon-list-ol style.
This is the jb_icon-strikethrough style.
This is the jb_icon-underline style.
This is the jb_icon-table style.
This is the jb_icon-magic style.
This is the jb_icon-truck style.
This is the jb_icon-pinterest style.
This is the jb_icon-pinterest-sign style.
This is the jb_icon-google-plus-sign style.
This is the jb_icon-google-plus style.
This is the jb_icon-money style.
This is the jb_icon-caret-down style.
This is the jb_icon-caret-up style.
This is the jb_icon-caret-left style.
This is the jb_icon-caret-right style.
This is the jb_icon-columns style.
This is the jb_icon-sort style.
This is the jb_icon-sort-down style.
This is the jb_icon-sort-up style.
This is the jb_icon-envelope-alt style.
This is the jb_icon-linkedin style.
This is the jb_icon-undo style.
This is the jb_icon-legal style.
This is the jb_icon-dashboard style.
This is the jb_icon-comment-alt style.
This is the jb_icon-comments-alt style.
This is the jb_icon-bolt style.
This is the jb_icon-sitemap style.
This is the jb_icon-umbrella style.
This is the jb_icon-paste style.
This is the jb_icon-user-md style.
This is the jb_icon-glass style.
This is the jb_icon-music style.
This is the jb_icon-search style.
This is the jb_icon-envelope style.
This is the jb_icon-heart style.
This is the jb_icon-star style.
This is the jb_icon-star-empty style.
This is the jb_icon-user style.
This is the jb_icon-film style.
This is the jb_icon-th-large style.
This is the jb_icon-th style.
This is the jb_icon-th-list style.
This is the jb_icon-ok style.
This is the jb_icon-remove style.
This is the jb_icon-zoom-in style.
This is the jb_icon-zoom-out style.
This is the jb_icon-off style.
This is the jb_icon-signal style.
This is the jb_icon-cog style.
This is the jb_icon-trash style.
This is the jb_icon-home style.
This is the jb_icon-file style.
This is the jb_icon-time style.
This is the jb_icon-road style.
This is the jb_icon-download-alt style.
This is the jb_icon-upload style.
This is the jb_icon-inbox style.
This is the jb_icon-play-circle style.
This is the jb_icon-repeat style.
This is the jb_icon-refresh style.
This is the jb_icon-list-alt style.
This is the jb_icon-lock style.
This is the jb_icon-flag style.
This is the jb_icon-headphones style.
This is the jb_icon-volume-off style.
This is the jb_icon-volume-down style.
This is the jb_icon-volume-up style.
This is the jb_icon-qrcode style.
This is the jb_icon-tag style.
This is the jb_icon-book style.
This is the jb_icon-bookmark style.
This is the jb_icon-print style.
This is the jb_icon-camera style.
This is the jb_icon-font style.
This is the jb_icon-bold style.
This is the jb_icon-italic style.
This is the jb_icon-text-height style.
This is the jb_icon-text-width style.
This is the jb_icon-align-left style.
This is the jb_icon-align-center style.
This is the jb_icon-align-right style.
This is the jb_icon-align-justify style.
This is the jb_icon-list style.
This is the jb_icon-indent-left style.
This is the jb_icon-indent-right style.
This is the jb_icon-facetime-video style.
This is the jb_icon-picture style.
This is the jb_icon-pencil style.
This is the jb_icon-map-marker style.
This is the jb_icon-adjust style.
This is the jb_icon-tint style.
This is the jb_icon-edit style.
This is the jb_icon-share style.
This is the jb_icon-check style.
This is the jb_icon-move style.
This is the jb_icon-step-backward style.
This is the jb_icon-fast-backward style.
This is the jb_icon-backward style.
This is the jb_icon-play style.
This is the jb_icon-pause style.
This is the jb_icon-stop style.
This is the jb_icon-forward style.
This is the jb_icon-fast-forward style.
This is the jb_icon-step-forward style.
This is the jb_icon-eject style.
This is the jb_icon-chevron-left style.
This is the jb_icon-chevron-right style.
This is the jb_icon-plus-sign style.
This is the jb_icon-minus-sign style.
This is the jb_icon-remove-sign style.
This is the jb_icon-ok-sign style.
This is the jb_icon-question-sign style.
This is the jb_icon-info-sign style.
This is the jb_icon-screenshot style.
This is the jb_icon-remove-circle style.
This is the jb_icon-ok-circle style.
This is the jb_icon-ban-circle style.
This is the jb_icon-arrow-left style.
This is the jb_icon-arrow-right style.
This is the jb_icon-arrow-up style.
This is the jb_icon-arrow-down style.
This is the jb_icon-resize-full style.
This is the jb_icon-resize-small style.
This is the jb_icon-plus style.
This is the jb_icon-minus style.
This is the jb_icon-asterisk style.
This is the jb_icon-exclamation-sign style.
This is the jb_icon-gift style.
This is the jb_icon-leaf style.
This is the jb_icon-fire style.
This is the jb_icon-eye-open style.
This is the jb_icon-eye-close style.
This is the jb_icon-warning-sign style.
This is the jb_icon-plane style.
This is the jb_icon-calendar style.
This is the jb_icon-random style.
This is the jb_icon-comment style.
This is the jb_icon-magnet style.
This is the jb_icon-chevron-up style.
This is the jb_icon-chevron-down style.
This is the jb_icon-retweet style.
This is the jb_icon-shopping-cart style.
This is the jb_icon-folder-close style.
This is the jb_icon-folder-open style.
This is the jb_icon-resize-vertical style.
This is the jb_icon-resize-horizontal style.
This is the jb_icon-hdd style.
This is the jb_icon-bullhorn style.
This is the jb_icon-bell style.
This is the jb_icon-certificate style.
This is the jb_icon-thumbs-up style.
This is the jb_icon-thumbs-down style.
This is the jb_icon-hand-right style.
This is the jb_icon-hand-left style.
This is the jb_icon-hand-up style.
This is the jb_icon-hand-down style.
This is the jb_icon-circle-arrow-right style.
This is the jb_icon-circle-arrow-left style.
This is the jb_icon-circle-arrow-up style.
This is the jb_icon-circle-arrow-down style.
This is the jb_icon-globe style.
This is the jb_icon-wrench style.
This is the jb_icon-tasks style.
This is the jb_icon-filter style.
This is the jb_icon-briefcase style.
This is the jb_icon-fullscreen style.
Other Features
Coloured Discs
The coloured discs styles are bright and colourful alternatives to your ordered lists. The style is ideally suited to stylign a single digit like a number or a letter to give the impression of creating an ordered list.
1 This is the jb_bluedisc style. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
2 This is the jb_greendisc style. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
3 This is the jb_reddisc style. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
4 This is the jb_blackdisc style. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
5 This is the jb_greydisc style. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
6 This is the jb_purpledisc style. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
7 This is the jb_yellowdisc style. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
8 This is the jb_orangedisc style. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
9 This is the jb_charcoaldisc style. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
10 This is the jb_browndisc style. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
Iconic Icons
Some elegant icons from the iconic icon set
Please note that these are images and not font-icons.
This is some text rendered using the jb_iconic_info syntax.
This is some text rendered using the jb_iconic_star syntax.
This is some text rendered using the jb_iconic_heart syntax.
This is some text rendered using the jb_iconic_tag syntax.
This is some text rendered using the jb_iconic_arrival syntax.
This is some text rendered using the jb_iconic_truck syntax.
This is some text rendered using the jb_iconic_arrow syntax.
This is some text rendered using the jb_iconic_article syntax.
This is some text rendered using the jb_iconic_email syntax.
This is some text rendered using the jb_iconic_beaker syntax.
This is some text rendered using the jb_iconic_book syntax.
This is some text rendered using the jb_iconic_bolt syntax.
This is some text rendered using the jb_iconic_box syntax.
This is some text rendered using the jb_iconic_calendar syntax.
This is some text rendered using the jb_iconic_comment syntax.
This is some text rendered using the jb_iconic_tick syntax.
This is some text rendered using the jb_iconic_cloud syntax.
This is some text rendered using the jb_iconic_document syntax.
This is some text rendered using the jb_iconic_image syntax.
This is some text rendered using the jb_iconic_lightbulb syntax.
This is some text rendered using the jb_iconic_search syntax.
This is some text rendered using the jb_iconic_mail syntax.
This is some text rendered using the jb_iconic_dash syntax.
This is some text rendered using the jb_iconic_movie syntax.
This is some text rendered using the jb_iconic_download syntax.
Some basic typography styles
jb_quote - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_quoteleft - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_quoteright - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_blackbox - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_greenbox - tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_redbox - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_purplebox - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_bluebox - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_brownbox - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_yellowbox - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
This is the jb_dropcapDonec tempus fringilla neque ac iaculis. Aenean eget ipsum elit, ac dapibus turpis. Nulla non felis est. Duis lacinia felis eu metus suscipit volutpat. Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_black - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_blue - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_red - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_green - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_yellow - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_white - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_brown - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_purple - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
The new styles are not at all revolutionary but they are incredibly useful for adding subtle flare to content and menu styling in Joomla.
Your bold text is here
Text with emphasis / italics is here
In addition to this the break tags can be used as follows. Note there is no need to add a closing bracket when implementing breaking spaces.
Insert Images
Also images can now be inserted into your content using the following syntax:
Adding spans to menu items
Please note that this feature was added to v1.4.1.
Sometimes it's helpful to be able to target specific parts of a content item title or a menu item and so using the {jb_span} syntax is ideal for adding a little hook for you to add some css emphasis to menu and content titles.
The syntax is very simple and is shown in the screenshot below.
With a little bit of css you can turn that extra span tag into somethign like this:
The css we used to transform the span above is:
{codecitation}
h2 a span {font-size: 3em;line-height: 1em;color: #fff;font-style: italic;font-family:georgia;margin-right: 10px;}
{/codecitation}
The code required for your template may be different but the example above should get you headed int he right direction.
Icons from the Coquette library
jb_info - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.jb_warning - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula. jb_film - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_pin - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_lightbulb - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_recycle - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_camera - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_comment - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_chat - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_document - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_accessible - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_star - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_heart - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_previous - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_cart - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_sound - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_new - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_code - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.
jb_calculator - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula. jb_cut - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula. jb_dollar - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula. jb_pound - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula. jb_euro - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula. jb_mail Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula. jb_support - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula. jb_next - Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum. Aliquam condimentum volutpat odio lacinia vehicula.