If you want to setup WS-Portfolio like in the Demo 8 you can use the below Code to replicate it.
But note: this will only work exact if your Template is also using Bootstrap 3 and you have the Joomla System Plugin WS-Nivo enabled to create the Gallery, otherwise you will need to make some changes.
This is the Custom CSS:
#options a.selected,
#options a.selected:hover,
#options a.selected:active,
#options a.selected:focus {
border-color: #E74C3C;
color: #E74C3C;
}
#options a {
color: #999;
font-weight: 700;
}
ul.list-portfolio {
padding-top: 10px;
border-top: 1px solid #d5d5d5;
border-bottom: 1px solid #d5d5d5;
padding-bottom: 10px;
margin-bottom: 30px;
}
.ws-nivo {
margin-bottom: 0;
}
.default .ws-nivo .thumbnail-bg {
padding: 0;
}
.element .wsp-inner {
background: #f5f5f5;
padding: 20px;
border: 1px solid #d5d5d5;
}
.element .wsp-inner h2 {
margin-top: 7px;
}
.default .ws-nivo .thumbnail {
padding: 0;
margin-right: 20px;
}
#options a.selected,
#options a.selected:hover,
#options a.selected:active,
#options a.selected:focus {
border: 0 none;
color: #E74C3C;
}
#options a.selected:before {
content: "\f192";
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 150%;
vertical-align: middle;
margin-right: 6px;
color: #E74C3C;
}
#options a:before {
content: "\f10c";
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 150%;
vertical-align: middle;
margin-right: 6px;
color: #aaa;
}
#options a {
color: #aaa;
}
#options a:hover {
color: #E74C3C;
}
#options a:hover:before {
color: #E74C3C;
}
And this is one Element for the unlimited Items Tab:
<div class="element web">
<div class="wsp-inner">
<div class="row">
<div class="col-xs-5">
<a href="image.jpg" data-lightbox="nivo" data-lightbox-gallery="ws-nivo-1" title="Description here">
<img src="image.jpg" />
</a>
<!-- Attention: Shortcode for Gallery here -->
{wsnivo src=[/images/portfolio/] count=[4] width=[50] thumb_cache_dir=[thumbs1] thumb=[default]}
</div>
<div class="col-xs-7">
<h2>Headline here</h2>
<p>Description Text here.</p>
<ul class="list-inline list-portfolio">
<li><i class="fa fa-check-square"></i> Screendesign </li>
<li><i class="fa fa-check-square"></i> Web Development </li>
<li><i class="fa fa-check-square"></i> Social Media </li>
</ul>
<p><a class="btn btn-lg btn-primary" href="#">Watch Project</a></p>
</div>
</div>
</div>
</div>