Hello,
The Ice Cream template doesn't have this feature. You can add the features you need by installing additional extensions from
extensions.joomla.org/
Try finding the extension that has a filterable content boxes feature and install it. This could be an easier way...
However, you can try to implement this feature from the Flat template into the Ice Cream template (but it's not for beginners). You would need to copy the Javascript code from Flat template from here
demo.hotjoomlatemplates.com/flat/media/t...te/flat/js/custom.js
to the custom.js file of your template in /media/templates/site/icecream/js/custom.js
Then, in a custom HTML module, this is the HTML code for content boxes from Flat template:
Code:
<div class="button-group filter-button-group">
<button data-filter="*" class="active">Show all</button>
<button data-filter=".category1">Environment</button>
<button data-filter=".category2">Sketches</button>
<button data-filter=".category3">Technology</button>
</div>
<div class="grid" style="position: relative; height: 1182px;">
<div class="grid-item category1" style="position: absolute; left: 0px; top: 0px;">
<img src="/flat/images/portfolio/sample1.jpg" alt="brush">
<h4>Brush</h4>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
</div>
<div class="grid-item category3" style="position: absolute; left: 376px; top: 0px;">
<img src="/flat/images/portfolio/sample2.jpg" alt="espresso">
<h4>Espresso</h4>
<p>Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="grid-item category2" style="position: absolute; left: 753px; top: 0px;">
<img src="/flat/images/portfolio/sample3.jpg" alt="wooden pen">
<h4>Wooden Pen</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr at accusam.</p>
</div>
<div class="grid-item category2" style="position: absolute; left: 0px; top: 394px;">
<img src="/flat/images/portfolio/sample4.jpg" alt="sketches">
<h4>Sketches</h4>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod</p>
</div>
<div class="grid-item category2" style="position: absolute; left: 376px; top: 394px;">
<img src="/flat/images/portfolio/sample5.jpg" alt="notebooks">
<h4>Notebooks</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr at accusam.</p>
</div>
<div class="grid-item category3" style="position: absolute; left: 753px; top: 394px;">
<img src="/flat/images/portfolio/sample6.jpg" alt="mighty mouse">
<h4>Mighty Mouse</h4>
<p>Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="grid-item category1" style="position: absolute; left: 0px; top: 788px;">
<img src="/flat/images/portfolio/sample7.jpg" alt="sony">
<h4>Sony</h4>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
</div>
<div class="grid-item category1" style="position: absolute; left: 376px; top: 788px;">
<img src="/flat/images/portfolio/sample8.jpg" alt="plants">
<h4>Plants</h4>
<p>Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="grid-item category3" style="position: absolute; left: 753px; top: 788px;">
<img src="/flat/images/portfolio/sample9.jpg" alt="keyboards">
<h4>Keyboards</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr at accusam.</p>
</div>
</div>
Of course, you must change image sources and point to your images.
Regards,
Milos
Topic Author
