Help is on the way!

INSET - JoomlaXTC K2 Content Wall

In the INSET position we use our JoomlaXTC K2 Content Module to create a Featured Slideshow. 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 retroid_slide_inset 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, make sure to set the module suffix to 'modblank':

Module HTML

<div align="center" >
{mainarea}
</div>

Main Content HTML

<div class="retroid_mainslide" align="center" style="position:relative; background: rgba(0,0,0,0) url('{imageXLargeurl}');z-index:12;">
<div class="mainslidetint">
<div class="slidetext" align="right">
<div class="slidetext-a">
<h2>{title}</h2>
<div class="writtenblock">
<span>Written By</span><p>{author}</p>
</div>
<div class="dateblock">
<span>Date</span><p>{date}</p>
</div>
<div class="categoryblock">
<span>Category</span><p>{category}</p>
</div>
</div>
<div class="slidetext-b">
<p>{introtext}</p> 
<a class="morelink" href="/{link}">Read More</a>
</div>
</div>
<div style="clear:both"></div>
</div>
</div>

CSS

/* Element Style */
.retroid_mainslide {height:900px; box-shadow: inset 0 0 120px rgba(0,0,0,1); background-repeat:no-repeat;}
.page-1 .retroid_mainslide {background-position:left top;}
.page-2 .retroid_mainslide {background-position: center top!important;}
.retroid_mainslide .mainslidetint {background: url(shadow-sm.png) no-repeat; background-size:100% 100%;}
.retroid_mainslide .slidetext {color:#fff!important; position:absolute; bottom:60px;font-weight:bold; width:100%;}
.retroid_mainslide .slidetext .slidetext-a h2 {font-weight:bold!important; font-size:80px;line-height:95%!important; color:#fff!important;}
.retroid_mainslide .writtenblock,
.retroid_mainslide .dateblock,
.retroid_mainslide .categoryblock {float:right;margin:22px 0 0 60px; padding-left:60px; border-left: 1px solid rgba(255,255,255,0.65); }
.categoryblock {border:none!important;}
.retroid_mainslide .categoryblock span,
.retroid_mainslide .writtenblock span,
.retroid_mainslide .dateblock span {color:#fff!important; font-size:12px; text-transform:uppercase;font-weight:bold; }
.retroid_mainslide .slidetext .slidetext-a .categoryblock p, .retroid_mainslide .slidetext .slidetext-a .writtenblock p, .retroid_mainslide .slidetext .dateblock p {color:#fff!important; font-size:16px; margin-top:4px; font-weight:normal!important;}
.retroid_mainslide .slidetext .slidetext-a {width:46%;  padding-right:3.5%; border-right: 1px solid rgba(255,255,255,0.65); float:left; padding-top:30px; padding-bottom:30px;}
.retroid_mainslide .slidetext .slidetext-b {width:40%;  padding-left:3.5%; float:left; padding-top:30px; padding-bottom:30px;text-align:left;}
.retroid_mainslide .slidetext .slidetext-b p {font-size:24px; color:#fff!important; font-weight:100!important;letter-spacing:1px;text-align:left;margin-top:3px;display:block;line-height:140%!important;}
.retroid_mainslide .slidetext .slidetext-b .morelink  {background:none!important; border:1px solid rgba(255,255,255,0.65); color:#fff!important; font-size:12px; padding:6px 32px 7px; text-transform:uppercase; font-weight:bold; margin-top:35px!important; display:inline-block;}
.retroid_mainslide .slidetext .slidetext-b .morelink:hover {background:#fff!important; color:#333!important;}
@media screen and (max-width: 1740px) {
.retroid_mainslide .slidetext .slidetext-a h2 {font-size:60px; margin-top:3px!important;}
.retroid_mainslide .slidetext .slidetext-b p {font-size:18px;}	
}
@media screen and (max-width: 1440px) {
.retroid_mainslide {height:810px;}
}
@media screen and (max-width: 1280px){
.retroid_mainslide {height:720px; background-size:1280px 720px!important;}
.retroid_mainslide .slidetext .slidetext-a .writtenblock, .retroid_mainslide .slidetext .dateblock, .retroid_mainslide .slidetext .slidetext-a .categoryblock {
	margin:22px 0 0 30px; padding-left:30px;}
	.retroid_mainslide .slidetext .slidetext-b p {font-size:24px; margin-top:10px!important; letter-spacing:-1px;}	
}
@media screen and (max-width: 930px){
.retroid_mainslide {height:600px;}
.retroid_mainslide {text-align:center!important;}
.retroid_mainslide .slidetext .slidetext-a, .retroid_mainslide .slidetext .slidetext-b {float:none!important; width:100%!important; padding:0px!important; text-align:center!important; border:none!important;}
.retroid_mainslide .slidetext .slidetext-a .writtenblock, .retroid_mainslide .slidetext .dateblock, .retroid_mainslide .slidetext .slidetext-a .categoryblock {
	float:none!important; display:inline-block!important; margin:22px 0 0 0 !important; padding:0 40px !important; border:none;  }
.retroid_mainslide .slidetext .slidetext-a .dateblock {border-left: 1px solid rgba(255,255,255,0.65); border-right: 1px solid rgba(255,255,255,0.65);}	
.retroid_mainslide .slidetext .slidetext-b p {text-align:center!important; margin-top:30px!important; margin:0 30px;}
}
@media screen and (max-width: 500px){
.retroid_mainslide {height:445px!important; background-size:840px 470px!important; box-shadow:none!important;}
.retroid_mainslide .slidetext .slidetext-a .writtenblock, .retroid_mainslide .slidetext .dateblock, .retroid_mainslide .slidetext .slidetext-a .categoryblock {
	display:none!important;}
.retroid_mainslide .slidetext .slidetext-a h2 {font-size:46px!important; line-height:90%!important;}
.retroid_mainslide .slidetext .slidetext-b p {font-size:18px; margin-top:8px!important;}
.retroid_mainslide .slidetext .slidetext-b .morelink {margin-top:12px!important;}
.page-1 .retroid_mainslide {background-position:-100px 0 !important;}	
	
}

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