Help is on the way!

USER25 - JoomlaXTC K2 Content Wall

In the USER25 position we use our JoomlaXTC K2 Content Module to create a grid of K2 Content Items. 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 planate_latest news 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:

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

Module HTML

<div class="thelatest">{mainarea}</div>

Main Content HTML

<div class="article-wrap" align="center">
<h4 class="title"><a href="/{link}" class="title">{title}</a></h4>
<p class="article-intro-text">{introtext}</p>
<a class="article-intro-btn" href="/{link}">Read More</a>
<br />
<span class="news-com" style="font-size:10px;  color:#cccccc;"> ({comments}) </span>
<span class="news-com1" style="font-size:10px;  color:#666666;"> Comments </span>
<span class="news-hits" style="font-size:10px;  color:#cccccc;"> ({hits}) </span>
<span class="news-hits1" style="font-size:10px;  color:#666666;"> Views </span>
</div>

CSS

.thelatest{}
.thelatest td {}
.thelatest td  {}
.thelatest .lastrow td{}
.article-wrap {text-align:center;padding:30px;}
.thelatest .oddcol .article-wrap {background-color:#f3f3f3;}
.thelatest .evencol .article-wrap {background-color:#ececec;}
.thelatest .col-1 .article-wrap {border-top:5px solid #ee5f5f}
.thelatest .col-1 .article-wrap:hover {border-top:5px solid #ee5f5f; background-color:#ee5f5f}
.thelatest .col-2 .article-wrap {border-top:5px solid #6c77c7}
.thelatest .col-2 .article-wrap:hover {border-top:5px solid #6c77c7; background-color:#6c77c7}
.thelatest .col-3 .article-wrap {border-top:5px solid #e9c25d}
.thelatest .col-3 .article-wrap:hover {border-top:5px solid #e9c25d; background-color:#e9c25d}
.thelatest .col-4 .article-wrap {border-top:5px solid #ee5f5f}
.thelatest .col-4 .article-wrap:hover {border-top:5px solid #ee5f5f; background-color:#ee5f5f}
.thelatest .col-5 .article-wrap {border-top:5px solid #81c49d}
.thelatest .col-5 .article-wrap:hover {border-top:5px solid #81c49d; background-color:#81c49d}
.thelatest .col-6 .article-wrap {border-top:5px solid #e9c25d}
.thelatest .col-6 .article-wrap:hover {border-top:5px solid #e9c25d; background-color:#e9c25d}
.thelatest .article-wrap:hover a.title, .thelatest .article-wrap:hover, .thelatest .article-wrap:hover span {color:#fff!important}
.thelatest .article-wrap:hover .article-intro-btn {border:1px solid #fff;} 
.articleimg img {max-width:100%;}
.article-intro {padding:30px 27px 27px 30px; background:#141414;}
.article-intro h4 {font-size:30px; text-transform:uppercase; line-height:100%; color:#555; margin-bottom:24px; padding:0!important;}
a.title {font-size:30px; text-transform:uppercase; line-height:100%; color:#888; }
.article-intro .article-intro-text {}
.article-intro-btn {border-radius:28px;margin:20px 0;border:1px solid #f1f1f1;text-transform:uppercase;letter-spacing:4px; display:inline-block; width:50%; color:#FFF; font-size:18px; padding:14px 38px; }

.thelatest .col-1 .article-intro-btn {background-color:#ee5f5f}
.thelatest .col-1 .article-intro-btn:hover {background-color: rgba(255,255,255,1); color:#ee5f5f;}
.thelatest .col-2 .article-intro-btn {background-color:#6c77c7}
.thelatest .col-2 .article-intro-btn:hover {background-color: rgba(255,255,255,1); color:#6c77c7;}
.thelatest .col-3 .article-intro-btn {background-color:#e9c25d}
.thelatest .col-3 .article-intro-btn:hover {background-color: rgba(255,255,255,1); color:#e9c25d;}
.thelatest .col-4 .article-intro-btn {background-color:#ee5f5f}
.thelatest .col-4 .article-intro-btn:hover {background-color: rgba(255,255,255,1); color:#ee5f5f;}
.thelatest .col-5 .article-intro-btn {background-color:#81c49d}
.thelatest .col-5 .article-intro-btn:hover {background-color: rgba(255,255,255,1); color:#81c49d;}
.thelatest .col-6 .article-intro-btn {background-color:#e9c25d}
.thelatest .col-6 .article-intro-btn:hover {background-color: rgba(255,255,255,1); color:#e9c25d;}

.article-infowp {margin-top: 12px 0 0 12px;}
.article-info {text-align:center;}
.news-hits {display:inline-block; margin-left:16px;}
.npreadmore {float:left;}
.clear {clear:both;}

@media(max-width:1560px){
	.article-wrap {text-align:center;padding:30px 60px;}
	.article-intro-btn {letter-spacing:2px; width:auto!important; font-size:18px; padding:12px 26px; }
}
@media(max-width:1410px){
	.article-wrap {text-align:center;padding:30px 30px;}
}
@media(max-width:1180px){
a.title {font-size:22px!important;}	
.article-intro-btn {letter-spacing:0px; font-size:14px; padding:8px 20px; }
}
@media(max-width:1180px){
	.thelatest .wallfloat {width:50%!important;}
}
@media(max-width:730px){
	.article-wrap {padding:30px 20px;}
}
@media(max-width:590px){
	.article-wrap {padding:30px 50px;}
}
@media(max-width:550px){
	.article-wrap {padding:30px 20px;}
}
@media(max-width:490px){
	.thelatest .wallfloat {width:100%!important;float:none!important;}
}

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