- Details
- Written by John Doe
- Category: JM-Sample-Data
- Details
- Written by John Doe
- Category: JM-Sample-Data
This template is using fully responsive layout that adjusts to various screens: desktops, tablets or mobiles.
EF4 Framework includes Layout Builder tool which allows you to customize template layout for different screen dimensions.
- Details
- Written by John Doe
- Category: JM-Sample-Data
Image Borders
<img class="img-rounded" src="/joomla30/jm-lux-v2/image.jpg" />
<img class="img-circle" src="/joomla30/jm-lux-v2/image.jpg" />
<img class="img-polaroid" src="/joomla30/jm-lux-v2/image.jpg" />
Headings
This is Heading One (h1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Two (h2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Three (h3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Four (h4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Five (h5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Six (h6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
Numered blocks
<p class="jm-block"><span class="jm">01</span>Text goes here</p>
01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
<p class="jm-block second"><span class="jm">a</span>Text goes here</p>
aLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
bLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
cLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
Colored Blocks
Icon blocks
<p class="jmbadge" >Text goes here</p>
<p class="jmcalendar" >Text goes here</p>
<p class="jmchat" >Text goes here</p>
<p class="jmcheck" >Text goes here</p>
<p class="jmcloud" >Text goes here</p>
<p class="jmdirection" >Text goes here</p>
<p class="jmdivide" >Text goes here</p>
<p class="jmerror" >Text goes here</p>
<p class="jmfire" >Text goes here</p>
<p class="jmflag" >Text goes here</p>
<p class="jmheart" >Text goes here</p>
<p class="jmhome" >Text goes here</p>
<p class="jminfo" >Text goes here</p>
<p class="jmlist" >Text goes here</p>
<p class="jmmail" >Text goes here</p>
<p class="jmpeople" >Text goes here</p>
<p class="jmstar" >Text goes here</p>
<p class="jmstat" >Text goes here</p>
Blockquote
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>John Doe</small>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
John Doe
<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>John Doe</small>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
John Doe
Unordered lists
<ul>
<-- list goes here -->
</ul>
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
<ul class="color">
<-- list goes here -->
</ul>
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
<ul class="color2">
<-- list goes here -->
</ul>
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
Ordered lists
<ol>
<-- list goes here -->
</ol>
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
<ol class="jm-roman">
<-- list goes here -->
</ol>
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
<ol class="jm-alpha">
<-- list goes here -->
</ol>
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
Read More Button
<p class="readmore" href="#">Read more</a>
<p class="btn" href="#">Button</a>
<p class="btn btn-large" href="#">Button</a>
Glyphicon Font
<span class="icon-joomla" aria-hidden="true"> </span>
Font Awesome
All available font Awesome icons
Example of usage :
<span class="fa fa fa-adjust" aria-hidden="true"></span>
<span class="fa fa fa-adjust fa-4x" aria-hidden="true"></span>
- Details
- Written by John Doe
- Category: JM-Sample-Data
There are additional module designs available that you can control by entering a correct suffix name as a module parameter.
If you need to mix suffixes then separate classes with some space.
Available module designs
Suffixes:
color-ms
center-title-ms
front-title-ms
Use the suffix for DJ-Mediatools module if you want to get the following view.
Suffixes:
header-ms
Use the suffix for DJ-Mediatools module (gallery grid layout only) if you want to get the following view.
Suffixes:
gallery-ms
Use the suffix for J2Store Categories module if you want to get the following view.
Suffixes:
categories-ms cols4
You can use a different number of columns from 1 to 10. For example cols3 will display 3 columns.
Use the suffix for JM Simple Tabs module if you want to get the following view.
Suffixes:
tabs-ms
Use the suffix for JM Simple Tabs module if you want to get the following view.
Suffixes:
tabs-ms style2
Use the suffix for JM Intro Articles module if you want to get the following view.
Suffixes:
date-ms
Use the suffix for JM Additional Features module if you want to get the following view.
Suffixes:
promo1-ms
Use the suffix for JM Additional Features module if you want to get the following view.
Suffixes:
promo2-ms
Use the suffix for module to reduce space below module.
Suffix: margin-ms
Additional and very useful suffix to make your modules height the same.
You just have to put a suffix at a module configuration to get the specified module height.
See here the screenshot:
_mod300 means that your module will be of 300 pixels high.
- Details
- Written by John Doe
- Category: JM-Sample-Data
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis interdum lacus, in rutrum odio tempor eu. Morbi sit amet enim id elit dignissim maximus quis nec turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce posuere neque et dui rutrum pellentesque. Integer pharetra nunc ut molestie pellentesque.
Pellentesque lacus enim, bibendum in ante id, pulvinar consectetur augue. Integer eleifend eros sit amet est porta tempus. Ut non mattis risus, eu cursus erat. Maecenas sollicitudin ornare magna, ac condimentum tortor. Maecenas sollicitudin ultricies leo, et luctus ante porttitor vel. Fusce et malesuada orci, non faucibus urna. Proin posuere sapien eget ligula dapibus euismod. Sed elementum risus quis velit pharetra euismod sit amet eu lacus. Ut hendrerit condimentum arcu, eget pretium enim fringilla in. Proin accumsan, lacus in dapibus gravida, est velit euismod urna, aliquam varius justo libero eu risus.
Praesent placerat lectus eget odio aliquet feugiat. Maecenas at euismod tellus, eget interdum libero. Quisque lobortis ultricies nisi at dictum. Nunc cursus scelerisque augue vel pulvinar. Nulla lacinia, lorem ut cursus ullamcorper, lectus velit fermentum nulla, lacinia scelerisque nunc erat vitae urna. Maecenas at sapien imperdiet ante mollis iaculis non nec libero. Maecenas laoreet rutrum finibus. Nullam maximus pretium dictum. Duis rhoncus, nulla ut posuere ultrices, mi libero faucibus urna, in dictum quam mauris sit amet diam. In pellentesque est in blandit euismod. Quisque nec quam ut ipsum sollicitudin efficitur.
Sed pharetra velit quam, laoreet lacinia mauris commodo scelerisque. Duis varius pretium mi et convallis. Fusce non rutrum elit. Praesent a porttitor risus. Cras et elit commodo, mollis libero at, maximus massa. Aliquam arcu risus, fringilla nec gravida quis, finibus quis libero. Cras malesuada odio et pulvinar semper. Sed massa mauris, suscipit ut tellus malesuada, vehicula sollicitudin ligula. Vivamus pharetra neque velit, non blandit velit pellentesque vel. Fusce ornare ac ipsum non tincidunt.