Help is on the way!

INSET - JoomlaXTC K2 Content Wall

In the INSET position we use our JoomlaXTC K2 Content Module to create a CSS3 Featured Article ontop of the Background Video / Image. For this template we use 4 Custom Inset positions based on STYLE. If you are using Style 1 publish the module in inset, if you are using Style 2 publish the module in inset2 and so on, up to inset4. Our K2 Content Module is a JoomlaXTC extension and is available to Extensions Club, Combo Plan, and Developer Club Members and in the single Template Purchase Full Package. It is also pre configured and loaded into the Quickstart install version. In order to recreate the layout you will first need to upload the Module to your Joomla install. If you are using the K2 Content Module from the Template package you can select the bandit_slide_inset_style1 / 2 / 3 / 4 template from the Demo Templates included in the Module. If you purchased the module as stand alone you will need to configure it with the following settings:

INSET - JoomlaXTC K2 Content Wall

Use the following mark up for the Module HTML and Main Content HTML:

Module HTML

<div align="center">
<div style="width:86%">
{mainarea}
</div>
</div>

Main Content HTML

<div class="mainslide mainslide1" style="margin:200px 0 210px;">
<div class="mainslide">
<h4 class="introtext">{intro}</h4>
<h2><a href="/{link}">{title}</a></h2>
<h4 >{date}</h4>
<a class="rmore1" href="/{link}">Read More</a>
</div>
</div>

INSET2 - JoomlaXTC K2 Content Wall

Use the following mark up for the Module HTML and Main Content HTML:

Module HTML

<div align="center" style="overflow:visible; ">
<div >
{mainarea}
</div>
</div>

Main Content HTML

<div style="width:100%; position:absolute; margin:60px auto 0;" align="center" class="diam" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>

<div class="mainslide mainslide2" style="position:relative; top: 0; margin:220px 0 100px;">
<div class="mainslide">
<h4 class="introtext">{intro}</h4>
<h2><a href="/{link}">{title}</a></h2>
<h4 >{date}</h4>
<a class="rmore1" href="/{link}">Read More</a>
</div>
</div>

INSET3 - JoomlaXTC K2 Content Wall

Use the following mark up for the Module HTML and Main Content HTML:

Module HTML

<div align="center" style="overflow:visible;width:100%;">
<div >
{mainarea}
</div>
</div>

Main Content HTML

<div style="position:absolute; margin-top:60px;" align="center" class="starwrap1" >
<div class="arm1" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm3" style="margin:-2px 0 0 -24px !important; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm5" style="margin:-12px 0 0 -47px !important; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm7" style="
			margin:-25px 0 0 -64px !important; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm9" style="
			margin:-43px 0 0 -78px !important; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm11" style="
			margin:-63px 0 0 -86px !important; -webkit-transform: rotate(75deg); -moz-transform: rotate(75deg); transform: rotate(75deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm13" style="
			margin:-85px 0 0 -89px !important; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm15" style="
			margin:-107px 0 0 -85px !important; -webkit-transform: rotate(105deg); -moz-transform: rotate(105deg); transform: rotate(105deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm17" style="
			margin:-128px 0 0 -77px !important; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); transform: rotate(120deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm19" style="
			margin:-146px 0 0 -63px !important; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm21" style="
			margin:-159px 0 0 -46px !important; -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); transform: rotate(150deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm23" style="margin:-167px 0 0 -25px !important; -webkit-transform: rotate(165deg); -moz-transform: rotate(165deg); transform: rotate(165deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
</div>
<div style="position:absolute; margin-top:60px; " align="center" class="starwrap2" >
<div class="arm2" style="margin:-1px 0 0 -12px !important; -webkit-transform: rotate(7.5deg); -moz-transform: rotate(7.5deg); transform: rotate(7.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm4" style="margin:-6px 0 0 -35px !important; -webkit-transform: rotate(22.5deg); -moz-transform: rotate(22.5deg); transform: rotate(22.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm6" style="
			margin:-18px 0 0 -56px !important; -webkit-transform: rotate(37.5deg); -moz-transform: rotate(37.5deg); transform: rotate(37.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm8" style="
			margin:-34px 0 0 -72px !important; -webkit-transform: rotate(52.5deg); -moz-transform: rotate(52.5deg); transform: rotate(52.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm10" style="
			margin:-53px 0 0 -83px !important; -webkit-transform: rotate(67.5deg); -moz-transform: rotate(67.5deg); transform: rotate(67.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm12" style="
			margin:-74px 0 0 -88px !important; -webkit-transform: rotate(82.5deg); -moz-transform: rotate(82.5deg); transform: rotate(82.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm14" style="
			margin:-97px 0 0 -87px !important; -webkit-transform: rotate(97.5deg); -moz-transform: rotate(97.5deg); transform: rotate(97.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm16" style="
			margin:-118px 0 0 -82px !important; -webkit-transform: rotate(112.5deg); -moz-transform: rotate(112.5deg); transform: rotate(112.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm18" style="
			margin:-137px 0 0 -71px !important; -webkit-transform: rotate(127.5deg); -moz-transform: rotate(127.5deg); transform: rotate(127.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm20" style="
			margin:-153px 0 0 -55px !important; -webkit-transform: rotate(142.5deg); -moz-transform: rotate(142.5deg); transform: rotate(142.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm22" style="
			margin:-164px 0 0 -36px !important; -webkit-transform: rotate(157.5deg); -moz-transform: rotate(157.5deg); transform: rotate(157.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm24" style="margin:-169px 0 0 -14px !important; -webkit-transform: rotate(172.5deg); -moz-transform: rotate(172.5deg); transform: rotate(172.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
</div>
<div class="mainslide mainslide3" style="position:relative; top: 0; margin:210px 0 210px;">
<div class="mainslide">
<h4 class="introtext">{intro}</h4>
<h2><a href="/{link}">{title}</a></h2>
<h4 >{date}</h4>
<a class="rmore1" href="/{link}">Read More</a>
</div>
</div>

INSET4 - JoomlaXTC K2 Content Wall

Use the following mark up for the Module HTML and Main Content HTML:

Module HTML

<div align="center" style="overflow:visible;width:100%;">
<div >
{mainarea}
</div>
</div>

Main Content HTML

<div style="position:absolute; margin-top:60px;" align="center" class="starwrap3" >
<div class="arm1" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm3" style="margin:-2px 0 0 -24px !important; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm5" style="margin:-12px 0 0 -47px !important; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm7" style="
			margin:-25px 0 0 -64px !important; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm9" style="
			margin:-43px 0 0 -78px !important; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm11" style="
			margin:-63px 0 0 -86px !important; -webkit-transform: rotate(75deg); -moz-transform: rotate(75deg); transform: rotate(75deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm13" style="
			margin:-85px 0 0 -89px !important; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm15" style="
			margin:-107px 0 0 -85px !important; -webkit-transform: rotate(105deg); -moz-transform: rotate(105deg); transform: rotate(105deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm17" style="
			margin:-128px 0 0 -77px !important; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); transform: rotate(120deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm19" style="
			margin:-146px 0 0 -63px !important; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm21" style="
			margin:-159px 0 0 -46px !important; -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); transform: rotate(150deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm23" style="margin:-167px 0 0 -25px !important; -webkit-transform: rotate(165deg); -moz-transform: rotate(165deg); transform: rotate(165deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
</div>
<div style="position:absolute; margin-top:60px;" align="center" class="starwrap4" >
<div class="arm2" style="margin:-1px 0 0 -12px !important; -webkit-transform: rotate(7.5deg); -moz-transform: rotate(7.5deg); transform: rotate(7.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm4" style="margin:-6px 0 0 -35px !important; -webkit-transform: rotate(22.5deg); -moz-transform: rotate(22.5deg); transform: rotate(22.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm6" style="
			margin:-18px 0 0 -56px !important; -webkit-transform: rotate(37.5deg); -moz-transform: rotate(37.5deg); transform: rotate(37.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm8" style="
			margin:-34px 0 0 -72px !important; -webkit-transform: rotate(52.5deg); -moz-transform: rotate(52.5deg); transform: rotate(52.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm10" style="
			margin:-53px 0 0 -83px !important; -webkit-transform: rotate(67.5deg); -moz-transform: rotate(67.5deg); transform: rotate(67.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm12" style="
			margin:-74px 0 0 -88px !important; -webkit-transform: rotate(82.5deg); -moz-transform: rotate(82.5deg); transform: rotate(82.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm14" style="
			margin:-97px 0 0 -87px !important; -webkit-transform: rotate(97.5deg); -moz-transform: rotate(97.5deg); transform: rotate(97.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm16" style="
			margin:-118px 0 0 -82px !important; -webkit-transform: rotate(112.5deg); -moz-transform: rotate(112.5deg); transform: rotate(112.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm18" style="
			margin:-137px 0 0 -71px !important; -webkit-transform: rotate(127.5deg); -moz-transform: rotate(127.5deg); transform: rotate(127.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm20" style="
			margin:-153px 0 0 -55px !important; -webkit-transform: rotate(142.5deg); -moz-transform: rotate(142.5deg); transform: rotate(142.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm22" style="
			margin:-164px 0 0 -36px !important; -webkit-transform: rotate(157.5deg); -moz-transform: rotate(157.5deg); transform: rotate(157.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
<div class="arm24" style="margin:-169px 0 0 -14px !important; -webkit-transform: rotate(172.5deg); -moz-transform: rotate(172.5deg); transform: rotate(172.5deg);" align="center" >
<div class="hexagon hexagon2"><div class="hexagon-in2">
<div class="imgcontainer"></div></div>
</div></div>
</div>
<div class="mainslide mainslide4" style="position:relative; top: 0; margin:230px 0 290px;">
<div class="mainslide">
<h4 class="introtext">{intro}</h4>
<h2><a href="/{link}">{title}</a></h2>
<h4 >{date}</h4>
<a class="rmore1" href="/{link}">Read More</a>
</div>
</div>

For more information on styling and configuring the K2 Content Module visit the full documentation HERE