TOP 1 & 2 - Virtuemart Category Wall / Custom HTML
Depending on if you are using Virtuemart or J2Store you will need to use one of the module listed below
TOP 1 - JoomlaXTC Virtuemart Category Wall (Virtuemart)
In the TOP1 position we use our Virtuemart Category Wall to display the Category Images with CSS3 Hover effects for the Title / Description / and Category Link. Simply install the Virtuemart Category Wall and publish it in the TOP1 Position and select the categories to pull from and then select the 'hipster_vm_categories' from the template selector dropdown. Use the module class suffix 'nopad mobilehide' in the advanced parameters.
For more information on configuring the Virtuemart Category Module visit the full documentation HERE
Top 1 - JoomlaXTC HTML Module (J2Store)
In the TOP1 position we use our JoomlaXTC HTML Module to create a static image for the J2 Store Category with CSS3 Effects for the Title and the Description. Use the module class suffix 'nopad mobilehide' in the advanced parameters.
Use the following mark up for the Module HTML:
HTML
<div class="vmwallwrap"> <a href="/component/content/category/?layout=hipster:j2store&Itemid=771"><img src="/images/shopmens.jpg" class="intimage" /></a> <div class="zoom"> <div class="newstext"> <div class="newstext2"> <h3><a class="catlink" href="/component/content/category/?layout=hipster:j2store&Itemid=771">Shop Mens</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius.</p> <a href="/component/content/category/?layout=hipster:j2store&Itemid=771" class="shopbutton">SHOP NOW</a> </div></div></div> </div>
For more information on configuring the HTML Module visit the full documentation HERE
Top 2 - JoomlaXTC HTML Module (J2Store)
In the TOP2 position we use our JoomlaXTC HTML Module to create a static image for the J2 Store Category with CSS3 Effects for the Title and the Description. Use the module class suffix 'nopad mobilehide' in the advanced parameters.
Use the following mark up for the Module HTML:
HTML
<div class="vmwallwrap"> <a href="/component/content/category/?layout=hipster:j2store&Itemid=795"><img src="/images/shopwomens.jpg" class="intimage" /></a> <div class="zoom"> <div class="newstext"> <div class="newstext2"> <h3><a class="catlink" href="/component/content/category/?layout=hipster:j2store&Itemid=795">Shop Women's</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius.</p> <a href="/component/content/category/?layout=hipster:j2store&Itemid=795" class="shopbutton">SHOP NOW</a> </div></div></div> </div>
For more information on configuring the HTML Module visit the full documentation HERE
