JB Type - Joomla typography plugin
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.
Using the JB Type styles
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.
features
- Use simple syntax to trigger the JB Type styles.
- Currently two icon styles with more on the way
- Now comes with a JCE plugin to render your styles in the editor window. You can download the JCE JB Type plugin below:
- Compatible with Joomla 1.5, Joomla 1.6 and Joomla 1.7
Use JB Type within JCE
Download the JCE JB Type plugin
Users of the 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.
JCE JB Type v2.0 - compatible with JCE 2.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.
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.
Some elegant icons from the iconic icon set.
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.
Simple CSS Styling
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.
Bold and italic text.
The new styles are not at all revolutionary but they are incredibly useful for adding subtle flare to content and menu styling in Joomla.
The new styles and syntax are:
{jb_b}Your bold text is here{/jb_b}
{jb_i}Text with emphasis / italics is here{/jb_i}
Creating line breaks.
In addition to this the break tags can be used as follws. Note there is no need to add a closing bracket when implementing breaking spaces.
{jb_br}
Inserting images.
Also images can now be inserted into your content using the following syntax:
{jb_img}images/stories/key.jpg{/jb_img}
Icons from the Coquette icon library
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.
Adding spans to menu and content 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.