Page 9 of 13
USER19 - JoomlaXTC K2 Content Wall
In the USER19 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_mid_circles 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 align="center"> <div align="center" class="slidewrap3"> {mainarea} </div> </div>
Main Content HTML
<div class="newmainwrap3" align="center"> <div class="newmainslide3"> <div class="circleanim3" align="center"> <h2><a href="/{link}">{title}</a></h2> <a class="rmore1" href="/{link}">Read More</a> </div> </div> </div>
CSS
/* Element Style */ .slidewrap3 {width:70%; overflow:visible!important;} .slidewrap3 .wallviewbootstrap {overflow:visible!important;} .slidewrap3 .firstcol, .slidewrap3 .centercol, .slidewrap3 .lastcol {width: 31.623931623931625%!important;} .slidewrap3 .col-4 {margin-left:0!important;} .newmainslide3 {width:280px; height:280px; text-align:center;opacity:0.7; border-radius:50%; border:4px solid rgba(255,255,255,0.2); box-shadow: 0 0 0 12px rgba(0,0,0,0.4); -webkit-transition: all 0.75s; -moz-transition: all 0.75s; -ms-transition: all 0.75s; transition: all 0.75s; transform: scale(0.5); /* W3C Official Syntax */ -o-transform: scale(0.5); /* Opera 10.5+ */ -ms-transform: scale(0.5); /* Internet Explorer 9.0+ */ -moz-transform: scale(0.5); /* Firefox 3.6+ */ -webkit-transform: scale(0.5); /* Chrome / Safari 3.2+ */ overflow:visible; margin:20px 0; } .newmainslide3:hover {overflow:visible;} .newmainslide3 a, .newmainslide3 h4 {color:#fff!important;} .newmainslide3 h4 {margin:20px 0 20px;letter-spacing:4px; font-size:15px; font-weight:bold!important; text-shadow: 0 0 20px rgba(0,0,0,1), 0 0 40px rgba(0,0,0,1)!important; } .newmainslide3 .rmore1 {border-radius:28px;text-transform:uppercase;letter-spacing:4px; display:inline-block; background: rgba(0,0,0,0.15); border:1px solid #FFF;color:#FFF; font-size:14px; padding:8px 20px; } .newmainslide3 h2 {margin:85px 0 20px!important; width:70%; font-size:24px;text-shadow: 0 0 40px rgba(0,0,0,1)!important; line-height:100%!important;} .newmainslide3 .circleanim3 h4, .newmainslide3 .circleanim3 h2, .newmainslide3 .circleanim3 h2 a, .newmainslide3 .circleanim3 .rmore1 {position:relative!important; z-index:9999999999!important;} .newmainslide3 h2 a {font-weight:normal!important; text-shadow: 0 0 40px rgba(0,0,0,1), 0 0 60px rgba(0,0,0,1)!important; } .newmainslide3 .circleanim3 { background-color: rgba(255,255,255,0.0) ; border-radius: 50%; cursor: pointer; position: relative; margin: 0 auto; width: 280px; height: 280px; overflow: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .newmainslide3 .circleanim3:hover { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); transform: rotate(-360deg); } .newmainslide3 .circleanim3:before, .newmainslide3 .circleanim3:after { border-radius: 100%; content:""; position: absolute; top: 0; left: 0; width: inherit; height: inherit; box-shadow: inset 6.86em 0 0 rgba(0, 0, 0, 0.3), inset 0 6.86em 0 rgba(0, 0, 0, 0.3), inset -6.86em 0 0 rgba(0, 0, 0, 0.3), inset 0 -6.86em 0 rgba(0, 0, 0, 0.3); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; -webkit-transition-timing-function: cubic-bezier(0.675, 0.075, 0.450, 0.925); -moz-transition-timing-function: cubic-bezier(0.675, 0.075, 0.450, 0.925); -ms-transition-timing-function: cubic-bezier(0.675, 0.075, 0.450, 0.925); -o-transition-timing-function: cubic-bezier(0.675, 0.075, 0.450, 0.925); transition-timing-function: cubic-bezier(0.675, 0.075, 0.450, 0.925); /* custom */ } .newmainslide3 .circleanim3:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .newmainslide3 .circleanim:hover:after { } .current .newmainslide3, .current page-2 .newmainslide3 { transform: scale(1); /* W3C Official Syntax */ -o-transform: scale(1); /* Opera 10.5+ */ -ms-transform: scale(1); /* Internet Explorer 9.0+ */ -moz-transform: scale(1); /* Firefox 3.6+ */ -webkit-transform: scale(1); /* Chrome / Safari 3.2+ */ } .newmainslide3 .circleanim3:hover:before, .newmainslide3 .circleanim3:hover:after { box-shadow: inset 0.86em 0 0 rgba(255,255,255,0.5), inset 0 0.86em 0 rgba(255,255,255,0.5), inset -0.86em 0 0 rgba(255,255,255,0.5), inset 0 -0.86em 0 rgba(255,255,255,0.5); animation-delay: 0s; } @media(max-width:1380px){ .slidewrap3 {width:80%;} } @media(max-width:1240px){ .slidewrap3 {width:90%;} } @media(max-width:1100px){ .slidewrap3 {width:99%;} } @media(max-width:1000px){ .slidewrap3 {width:650px;} .slidewrap3 .col-4, .slidewrap3 .col-2, .slidewrap3 .col-6 {margin-left:2.564102564102564%!important;} .slidewrap3 .firstcol, .slidewrap3 .centercol, .slidewrap3 .lastcol {width: 47.717948717948715%!important; float:left!important;} .slidewrap3 .col-3, .slidewrap3 .col-5 {margin-left:0!important;} } @media(max-width:680px){ .slidewrap3 {width:100%;} .slidewrap3 .firstcol, .slidewrap3 .centercol, .slidewrap3 .lastcol {width: 100%!important; float:left!important; margin-left:0!important; float:none!important} .slidewrap3 .newmainslide3 {margin-bottom:40px!important;} }
For more information on styling and configuring the K2 Content Module visit the full documentation HERE
