Joomla gallery extension by joomlashine.com
Main Promo Images
Insoles_slider_2.png
Bonz_insoles_slider_960x350.png
Slider_itty.jpg
Slider_itty_bitty.png
Image of Pronation
Effects Of Abnormal Pronation On The Body
Aggressive pronation has been shown to contribute to the following conditions:
Read more...Sock Support
Not just for shoes, continue foot support at home. Simply put BONZ insoles in your socks or slippers.
Pressure Map
During weight-bearing, the human foot is subjected to extremely high pressures.
The image gallery you see on this website is another cool product JSN ImageShow from JoomlaShine.com. This product is shipped with component, module and content plugin, so you can place it anywhere on every website.
On this page you can see how JSN ImageShow is presented as module on top and as plugin in article content. With it, you get smooth experience and consistent performance in all browsers. The JSN ImageShow also support mobile devices normally with JS/HTML version switched automatically when you visit the website.
Currently, JSN ImageShow comes with 6 themes: Theme Classic, Theme Slider, Theme Grid, Theme Carousel, Theme Strip and Theme Flow. More themes will be released in the future.
Joomla gallery extension by joomlashine.com
Sample gallery images
180px_koala_ag1.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/180px_koala_ag1.jpg
180px_wobbegong.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/180px_wobbegong.jpg
200px_phyllopteryx_taeniolatus1.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/200px_phyllopteryx_taeniolatus1.jpg
220px_spottedquoll_2005_seanmcclean.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/220px_spottedquoll_2005_seanmcclean.jpg
JSN ImageShow with Theme Classic
JSN ImageShow with Theme Slider
Joomla gallery extension by joomlashine.com
Sample gallery images
180px_koala_ag1.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/180px_koala_ag1.jpg
180px_wobbegong.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/180px_wobbegong.jpg
200px_phyllopteryx_taeniolatus1.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/200px_phyllopteryx_taeniolatus1.jpg
220px_spottedquoll_2005_seanmcclean.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/220px_spottedquoll_2005_seanmcclean.jpg
JSN ImageShow with Theme Grid
Joomla gallery by joomlashine.com
Sample gallery images
180px_koala_ag1.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/180px_koala_ag1.jpg
180px_wobbegong.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/180px_wobbegong.jpg
200px_phyllopteryx_taeniolatus1.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/200px_phyllopteryx_taeniolatus1.jpg
220px_spottedquoll_2005_seanmcclean.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/220px_spottedquoll_2005_seanmcclean.jpg
JSN ImageShow with Theme Carousel
Joomla gallery extension by joomlashine.com
Sample gallery images
180px_koala_ag1.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/180px_koala_ag1.jpg
180px_wobbegong.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/180px_wobbegong.jpg
200px_phyllopteryx_taeniolatus1.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/200px_phyllopteryx_taeniolatus1.jpg
220px_spottedquoll_2005_seanmcclean.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/220px_spottedquoll_2005_seanmcclean.jpg
JSN ImageShow with Theme Strip Vertical
Joomla gallery extension by joomlashine.com
Sample gallery images
180px_koala_ag1.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/180px_koala_ag1.jpg
180px_wobbegong.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/180px_wobbegong.jpg
200px_phyllopteryx_taeniolatus1.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/200px_phyllopteryx_taeniolatus1.jpg
220px_spottedquoll_2005_seanmcclean.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/220px_spottedquoll_2005_seanmcclean.jpg
JSN ImageShow with Theme Strip Horizontal
Joomla gallery extension by joomlashine.com
Sample gallery images
180px_koala_ag1.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/180px_koala_ag1.jpg
180px_wobbegong.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/180px_wobbegong.jpg
200px_phyllopteryx_taeniolatus1.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/200px_phyllopteryx_taeniolatus1.jpg
220px_spottedquoll_2005_seanmcclean.jpg
http://bonzinsoles.com/images/sampledata/parks/animals/220px_spottedquoll_2005_seanmcclean.jpg
JSN ImageShow with Theme Flow
For mobile device, we have built special lightweight Javascript version, so you can be absolutely sure about images presentation.
Mobile optimized presentation (screenshot made by iPhone)
This extension is NOT included in the template package, but you can download it for free. Read more.
One of hottest features in JSN Teki is extended styles adapted for 5 most popular Joomla! extension: K2, Community Builder, Virtue Mart, JEvents and JoomGallery.
Technically extended styles are overrides of default extensions style (images + CSS) and located in folder /ext inside template folder. Some extensions have their own template system and you might want to turn off extended style thru template parameter in order to use those native templates.
The extensions discussed here are not included in the template package and you have to download separately. You can download the extensions on Joomla! Extensions Directory http://extensions.joomla.org/
Extended style for K2 includes adapted tabs color, additional module styles, fixed alignment issues and some other minor visual enhancement.
Here is how K2 component will look like after extended styles applied.
Besides from extended component styling you can use template module styles for K2 modules as well.
Extended style for Community Builder includes adapted dropdown menu style, tabs color, additional module styles and some other minor visual enhancement.
Here is how Community Builder component will look like after extended styles applied.
Adapted drop-menu style and tabs color on CB Profile page
Besides from extended component styling you can use template module styles for Community Builder modules as well.
In the example above:
Extended style for Virtue Mart includes adapted Add to Cart button, additional module styles, fixed alignment issues, redesigned checkout-steps icons and some other minor visual enhancement.
Fixed alignment issues on Product Details page
Besides from extended component styling you can use template module styles for Virtue Mart modules as well.
Extended style for JEvents includes redesigned calendar navigation icons and calendar table, adapted table header color, additional module styles, fixed alignment issues and some other minor visual enhancement.
Totally redesigned calendar navigation icons
Adapted calendar table header color
Adapted table header color on Event List page
Besides from extended component styling you can use template module styles for JEvents modules as well.
In the example above:
Extended style for JoomGallery includes redesigned navigation icons, fixed alignment issues, additional module styles and some other minor visual enhancement.
Totally redesigned navigation bar and information panel
Fixed alignment issues
Besides from extended component styling you can use template module styles for JoomGallery modules as well.
JSN Teki is equipped with very comprehensive documentation package that will help you with template utilization.
When purchasing our products you are backed up with professional and timely support providing via:
One more great benefit is that we provide support for all questions related not only to the product, but also to your Joomla! configuration.
At JoomlaShine.com, we put great efforts in optimizing our templates performance by multiple techniques like image sprites application, clean html code output and now one new step – CSS/JS Compression.
What it does is to combine all CSS/JS files into a single file and deliver it in GZIP compressed state to browser. This feature significantly reduce http request number to server as well as overall loading size, which results in 35% performance boost.
Before enabling CSS/JS compression
After enabling CSS/JS compression
CSS/JS Compression feature is enabled on this demo website. You can check the source code to see how it works.
This feature allows you to load multiple custom CSS files among with template default files. This feature is very useful, when you have special dedicated CSS file for content styling.
Custom CSS files are loaded among with other template CSS files
Just put custom CSS files to template's CSS folder and define them in template parameter Custom CSS File(s) each file name at a line. If you enable CSS/JS Compression feature, all custom CSS files will be compressed as well.
JSN Teki was developed with extreme focus on typography and we believe it provides the most comprehensive content presentation capability. Headings, text, links, tables, images, everything was designed with high level of refinement. Let's take a look.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
You can arrange content in multiple columns by using very simple html code. JSN Teki will detect the amount of columns you defined and automatically make arrangement.
Usage: <div class=”grid-layout”><div>Text in column 1</div><div>Text in column 2</div></div>
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
#ja-rightcol { width: 180px; float: right; color: #EEEEEE; }
You can us this style to quote somebody's speech, idea or a fragment from some book, articles, etc. Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <blockquote>This is your quote</blockquote>
You can use this special drop cap symbol style for magazine / newspaper text paragraph. Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-dropcap">This is the text with dropcap symbol.</p>
You can use this style to highlight important words and / or keyword expression in search result page. Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <span class="text-highlight">This is the text to be highlighted.</span>
You can use this style to highlight important text block on mouse over. Just roll mouse over this text block to see how it's highlighted.
Usage: <div class="text-box-highlight">This is the text to be highlighted.</div>
You can use this style to highlight important text block on mouse over. Just roll mouse over this text block to see how it's highlighted.
Usage: <div class="text-box-highlight">This is the text to be highlighted.</div>
You can use this style for alert or warning text paragraph requiring user's attention. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-alert">This is text that requires user's attentions.</p>
You can use this style for regular information text paragraph that does not require much user's attentions. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-info">This is your d text.</p>
You can use this style for information text paragraph related to download process. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-download">This is download related text.</p>
You can use this style for useful information like tips, hint or help text. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-tip">This is yourtip hint or help text.</p>
You can use this style for description text paragraph that related to video file. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-video">This is your video related text.</p>
You can use this style for description text paragraph related to audio file. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-audio">This is your audio related text.</p>
You can attach up to 20 predefined icons to the front of any link by adding simple class to it.
Usage: <a class="link-icon icon-xxx">This is link text.</a>, where xxx is the name of icon to be applied. Detailed information about all icon names can be found in template documentation.
Example: <a class="link-icon icon-download">This is link to download something.</a>
JSN Teki offers 6 button styles to decorate any call-to-action links you have in the content.
Usage: <a class="link-button button-xxx">This is link text.</a>, where xxx is the button color name selected from: light, dark, green, orange, blue and red.
Example: <a class="link-button button-orange">See plans & pricing.</a>
You can use both button and icon link style combined.
Usage: <a class="link-button button-xxx"><span class="link-icon icon-yyy">This is link text.</span></a>, where xxx and yyy are button color and icon names respectively.
Example: <a class="link-button button-green"><span class="link-icon icon-cart">Add to cart.</span></a>
JSN Teki is able to attach not only descriptive icon to the front of link as described in above section, but also 23 extension icons to the end of the link.
All icons can be assigned automatically by enabling a template parameter or manually by adding simple class to the link.
Usage: <a class="link-icon-ext icon-ext-xxx">This is link text.</a>, where xxx is the icon name. Detailed information about all icon names can be found in template documentation.
Table header | Column header 1 | Column header 2 | Column header 3 |
---|---|---|---|
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Table footer | Footer data |
Table header | Column header 1 | Column header 2 | Column header 3 |
---|---|---|---|
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Table footer | Footer data |
Table header | Column header 1 | Column header 2 | Column header 3 |
---|---|---|---|
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Table footer | Footer data |
You can assign any of predefined 20 icons to list items. 6 icons shown above are just samples.
You can use this style for comment text paragraph. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-comment">This is your comment text.</p>