More and more people use mobiles, tablets or netbooks to browse websites.
That's why it becomes very important to ajdust websites to new standards and make them ready to work at all handheld devices.
Responsive joomla templates are the solution to serve all devices by adjusting the template to the screen area of all the web devices or mobile browsers (e.g. ipad, iphone, android)
JM-Wedding06 template meets all responsive requirements and adapts to fit the screen area of devices of wide monitors or e.g. iPad, iPhone or an Android.
Now let's see other template's feautres that you will find on the demo site.
1. The horizontal menu - DJ-Menu
The template uses the latest ver. 1.6.4 of this joomla menu that was recently extented to the new responsive feature: "Display SELECT for small screens"
It replaces list of menus with the dropdown selectbox for resolution < 960px (you can use this free menu for other joomla templates)
This option is built in but not enabled for this template since the template uses more detailed css styles displying the menu selectbox if the screen resolution < 650px
2. The logo - colorising the first letter
We have used jquery.lettering.js script from http://letteringjs.com to color the first word of the logo text
It works in the following way: each word of the logo text is placed in the <span with class="wordX" and then each letter is placed in the <span with class="charX" where X is the number od the word or char.
Take a look at the screenshot below to check the sctructure:
Then we added the css style for each template colour version, for pink templates/jm-wedding06/css/style1.css :
h1#jm-logo .word1 .char1, h1#jm-logo .word3 .char1 {
color: #E24B5F;
}
Now you will be able to make changes for any letter you will enter at the joomla template administrator.
3. Animated CSS3 effect for images and its description placed at main-top2 module position
Put the mouse over the image to see the animated CSS3 effect.
The similar hover effect is used for the "Floral Decorations" module at the front page.
At the typography article you will learn how to use the code to display your own image and its description.
4. Youtube video displayed in the modal window
We've added the code:
JHTML::_('behavior.modal');
in lib/php/dj_setp.php to display youtube in the lightbox.
The above code calls javascript to display popup, lightbox.
Then the youtube url has to be entered in the
<a>
link with class="modal"
It looks as follows:
<a class="modal readon" href="https://www.youtube.com/embed/Umqu9poqIgo" rel="{handler: 'iframe', size: {x: 996, y: 747}}">Watch the Video</a>
5. Simple front page layout and the extended layout.
The template is addressed for the newly weds but web developers often customize templates for completely different purposes so just would like to inform you that this template includes many additional module positions so the site may looks much extended.
Take a look at the frontpage and subpage of the pink template version.
