Willkommen
auf unserer
Homepage!
In our templates all wordings of both back-end and front-end are moved to separated language files, so you can easily translate them into any language you want.
Interactive images presentation by JSN ImageShow extension
All JoomlaShine.com templates have special built-in design optimized for modern mobile devices iPhone, Android and Windows Mobile-based. The responsive design is applied for both Joomla 2.5 and 3.0 versions, and for Pro Edition only.
Unlike other template providers, we do not develop something that looks like a mobile app with heavy menu and animation. We built compact and lightweight version of the template preserving the whole original look-and-feel.
Mobile layout overview
Module positions in mobile layout
As default, all modules will be displayed on both desktop and mobile. To display a module on only desktop or on only mobile, you can add Module Class Suffix parameter as following:
Mobile layout overview on Ipad
Article presentation (com_content)
News feeds presentation (com_newsfeeds)
We optimized HTML overrides for all default Joomla! extensions to make them looks neat in mobile edition. The work is mainly focused on rearrangement content from columns to rows.
For mobile edition, we have built very simple, yet effective menu system, where all children menu items are presented as tree in collapsible panel. This menu system utilizes only little Javascript (MooTool) for expanding/collapsing submenu panels and is very fast and lightweight.
Special designed mobile menu system
Children menu items are presented as tree
Mobile menu with icons applied
Mobile menu with rich text
The responsive feature is enabled on live demo. You can check this by resizing the demo to the desired size and see how it presents on mobile devices.
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.
JSN ImageShow with Theme Classic
JSN ImageShow with Theme Slider
JSN ImageShow with Theme Grid
JSN ImageShow with Theme Carousel
JSN ImageShow with Theme Strip Vertical
JSN ImageShow with Theme Strip Horizontal
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.
JSN Dome 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 Dome 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.
div.grid-layout2 div.grid-col { float: left; width: 49.95%; } div.grid-layout3 div.grid-col { float: left; width: 33.3%; }
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 jsn-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 jsn-icon-download">This is link to download something.</a>
JSN Dome 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 jsn-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 jsn-icon-cart">Add to cart.</span></a>
JSN Dome 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 jsn-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 |
---|---|---|---|
Table footer | Footer data | ||
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 header | Column header 1 | Column header 2 | Column header 3 |
---|---|---|---|
Table footer | Footer data | ||
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 header | Column header 1 | Column header 2 | Column header 3 |
---|---|---|---|
Table footer | Footer data | ||
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 |
You can assign any of predefined 20 icons to list items. 6 icons shown above are just samples.
JSN Dome provides 6 box designs for module background styling, which can be combined with 20 predefined icons for module title styling. Take a look around to see how module styles are applied.
Module styles are configured by module's parameter Module Class Suffix with very simple syntax. To set up icons, you need to add string icon-xxx to module class suffix, where xxx is the icon name.
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>