Page 9 of 11
USER 25 - JoomlaXTC K2 Content Wall
In the USER25 positions we use 6 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 retroid_categories_right and retroid_categories_left templates 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:
Module HTML : retroid_categories_right
<div class="categorywrap-right"> <div class="main">{mainarea}</div> <div class="more">{morearea}</div> <div style="clear:both"></div> </div>
Main Content HTML : retroid_categories_right
<div class="articlemain" style="background: rgba(0,0,0,0) url('{imageXLargeurl}') left top no-repeat;"> <div class="articlemaintext"> <h2>{category}</h2> <a class="morelink" href="/{categoryurl}">View All In Category</a> </div> </div>
More Content HTML : retroid_categories_right
<div class="articlemore"> <a href="/{link}"> <h2>{title}</h2> <p>{introtext}</p> </a> </div>
CSS
/* Element Style */ .categorywrap-right {background:#333;} .categorywrap-right .main {width:66.3%!important;float:left; } .categorywrap-right .more {width:33.6%; float:right; text-align:left; padding:35px 0 15px; } .categorywrap-right .main .articlemain {height:500px!important; text-align:right; position:static!important; } .categorywrap-right .main .articlemaintext {position:absolute; bottom:52px; right:60px; font-weight:bold; width:60%;} .categorywrap-right .main .articlemain h2 {font-weight:bold!important; font-size:80px;line-height:100%!important; color:#fff;} .categorywrap-right .main .articlemain .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:20px!important; display:inline-block;} .categorywrap-right .main .articlemain .morelink:hover {background:#fff!important; color:#333!important;} .categorywrap-right .more .articlemore {padding:15px 0 15px 60px;} .categorywrap-right .more .articlemore:hover {background:#393939;padding:15px 0 15px 80px;} .categorywrap-right .more .articlemore h2 {color:#fff;font-size:26px; padding-bottom: 8px;display:inline-block;} .categorywrap-right .more .articlemore p {color:#aaa;} .categorywrap-right .more .lastrow .articlemore {} @media(max-width:1280px){ .categorywrap-right .main {width:50%!important;} .categorywrap-right .more {width:50%!important;} .categorywrap-right .main .articlemaintext {width:auto!important;} } @media(max-width:1280px){ .categorywrap-right .main .articlemain {height:483px!important; } .categorywrap-right .more .articlemore h2 {font-size:22px;} } @media(max-width:800px){ .categorywrap-right .main, .categorywrap-right .more {width:100%!important; float:none!important;} .categorywrap-right .main .articlemain, .categorywrap-right .more .articlemore {text-align:center!important; height:auto!important;} .categorywrap-right .main .articlemain {padding:50px 0;} .categorywrap-right .main .articlemaintext {position:static!important; width:100%!important;} .categorywrap-right .more {height:auto!important;} .categorywrap-right .more {padding:50px 0 30px!important;} .categorywrap-right .more .articlemore {padding-left:20px!important;padding-right:20px!important;background-position:50% bottom!important;background-size:100px 1px!important;} } @media(max-width:500px){ .categorywrap-right .main .articlemain {padding:30px!important;;} .categorywrap-right .more {padding:20px 0!important;} .categorywrap-right .more .articlemore {padding:10px 20px!important;} .categorywrap-right .main .articlemain h2 {font-size:48px!important;} .categorywrap-right .main .articlemain .morelink {margin-top:12px!important;} } /* CSS3 Responsive Breakpoints */ @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { .articlemain {background-attachment:scroll!important;} } @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { .articlemain {background-attachment:scroll!important;} }
Module HTML : retroid_categories_left
<div class="categorywrap-left"> <div class="main">{mainarea}</div> <div class="more">{morearea}</div> <div style="clear:both"></div> </div>
Main Content HTML : retroid_categories_left
<div class="articlemain" style="background: rgba(0,0,0,0) url('{imageXLargeurl}') 50% 50% no-repeat;"> <div class="articlemaintext"> <h2>{category}</h2> <a class="morelink" href="/{categoryurl}">View All In Category</a> </div> </div>
More Content HTML : retroid_categories_left
<div class="articlemore"> <a href="/{link}"> <h2>{title}</h2> <p>{introtext}</p> </a> </div>
CSS
/* Element Style */ .categorywrap-left {background:#333;} .categorywrap-left .main {width:66.3%!important;float:right; } .categorywrap-left .more {width:33.6%; float:left; text-align:left; padding:35px 0 15px;} .categorywrap-left .main .articlemain {height:500px!important; text-align:left;} .categorywrap-left .main .articlemaintext {position:absolute; bottom:52px; left:60px; font-weight:bold; width:60%;} .categorywrap-left .main .articlemain h2 {font-weight:bold!important; font-size:80px;line-height:100%!important; color:#fff;} .categorywrap-left .main .articlemain .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:20px!important; display:inline-block;} .categorywrap-left .main .articlemain .morelink:hover {background:#fff!important; color:#333!important;} .categorywrap-left .more .articlemore {text-align:right; padding:15px 60px 15px 0; } .categorywrap-left .more .articlemore:hover {background:#393939;padding:15px 80px 15px 0;} .categorywrap-left .more .articlemore h2 {color:#fff;font-size:26px; padding-bottom: 8px;display:inline-block;} .categorywrap-left .more .articlemore p {color:#aaa;} .categorywrap-left .more .lastrow .articlemore {} @media(max-width:1280px){ .categorywrap-left .main {width:50%!important;} .categorywrap-left .more {width:50%!important;} .categorywrap-left .main .articlemaintext {width:auto!important;} } @media(max-width:1280px){ .categorywrap-left .main .articlemain {height:483px!important; } .categorywrap-left .more .articlemore h2 {font-size:22px;} } @media(max-width:800px){ .categorywrap-left .main, .categorywrap-left .more {width:100%!important; float:none!important;} .categorywrap-left .main .articlemain, .categorywrap-left .more .articlemore {text-align:center!important; height:auto!important;} .categorywrap-left .main .articlemain {padding:50px 0;} .categorywrap-left .main .articlemaintext {position:static!important; width:100%!important;} .categorywrap-left .more {height:auto!important;} .categorywrap-left .more {padding:50px 0 30px!important;} .categorywrap-left .more .articlemore {padding-left:20px!important;padding-right:20px!important;} } @media(max-width:500px){ .categorywrap-left .main .articlemain {padding:30px!important;;} .categorywrap-left .more {padding:20px 0!important;} .categorywrap-left .more .articlemore {padding:10px 20px!important;} .categorywrap-left .main .articlemain h2 {font-size:48px!important;} .categorywrap-left .main .articlemain .morelink {margin-top:12px!important;} } /* CSS3 Responsive Breakpoints */ @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { .articlemain {background-attachment:scroll!important;} } @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { .articlemain {background-attachment:scroll!important;} }
For more information on styling and configuring the K2 Content Module visit the full documentation HERE
