[TUT] - Create a custom (tabbed with dropdown) widget for your board...
* this particular example it uses the idea of say a web developer information section and portfolio I was short of ideas and wanted to expand upon the existiong tabbed dropdown content mod I was originally going to start the tutorial on... this is not a plugin, it is a manual edit, nor is a custom page though yes this could be turned into a custom page/template, etc, etc, if the reader chose to, for this tutorial though it will be explained as far as adding it via a sidebar setup...
ie:
![[Image: Forums.png]]()
![[Image: Forums-1.png]]()
etc, etc...
* also note that this tutorial is slightly catering to more advanced users but anyone is welcome to it...
In global.css
Find:
comment out the min-widths like so:
add to global.css:
Edit Template: headerinclude
find:
add this before it:
find:
before it add:
* note below on template index insertion, while we could put this anywhere like say on the portal page not as a sidebar or say top or bottom of index not as a sidebar, that is the nice thing about this is it is versatile on how you want to implement it, for this example we already started adding it as a sidbar so for example sake we will stick with that for this tutorial though one could if comfortable and understanding on how to do so could say ommit the index-forum and index-sidebar styling and inclusion and insert it anyway they wish also![Wink]( "Wink")
* Edit Template: index
find:
Replace with:
Now, download the needed files portfolio.zip file and extract it. http://s000.tinyupload.com/download.php?...2647526671 note that it a larger file because of the included files for lightbox and the portfolio or what not hence the file being shared externally due to the community attachment size restrictions....
Ok, you should now have a folder called /portfolio upload that entire folder and its contnets to your forums images directory.
& then you can continue editing further for your usages. ** (note this is only an example and not actually tweaked to precise specifics and is meant as a starting point to the reader to then expand upon, edit and improve...) You can edit, change and tweak/customize this any such way you wish!
* also note things like inline styling was intentional as I wanted it as a dropin to edit within the page thuse make it easy for say the turoial reader to see how easily they could include this wherever they wanted and edit as such with the area they included it...
Best of luck!![Big Grin]( "Big Grin")
~ V
* this particular example it uses the idea of say a web developer information section and portfolio I was short of ideas and wanted to expand upon the existiong tabbed dropdown content mod I was originally going to start the tutorial on... this is not a plugin, it is a manual edit, nor is a custom page though yes this could be turned into a custom page/template, etc, etc, if the reader chose to, for this tutorial though it will be explained as far as adding it via a sidebar setup...
ie:
etc, etc...
* also note that this tutorial is slightly catering to more advanced users but anyone is welcome to it...
In global.css
Find:
#container {
color: #333;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
min-width: 990px;
}
.wrapper {
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto auto;
}
comment out the min-widths like so:
#container {
color: #333;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
/*min-width: 990px;*/
}
.wrapper {
width: 85%;
/*min-width: 970px;*/
max-width: 1500px;
margin: auto auto;
}
add to global.css:
@media only screen and (max-width: 868px) {
.sidebar-index {
float: unset !important;
width: 100% !important;
}
.forum-index {
float: unset;
width: 100% !important;
}
}
.sidebar-index {
float: right;
width: 29%
}
.forum-index {
float: left;
width: 70%
}
Edit Template: headerinclude
find:
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
add this before it:
<!-- viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- /viewport -->
find:
{$stylesheets}
before it add:
<!-- jqueryui -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- /jqueryui -->
<!-- fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<!-- /fontawesome -->
* note below on template index insertion, while we could put this anywhere like say on the portal page not as a sidebar or say top or bottom of index not as a sidebar, that is the nice thing about this is it is versatile on how you want to implement it, for this example we already started adding it as a sidbar so for example sake we will stick with that for this tutorial though one could if comfortable and understanding on how to do so could say ommit the index-forum and index-sidebar styling and inclusion and insert it anyway they wish also
* Edit Template: index
find:
{$forums}
Replace with:
<!-- lightbox -->
<link href="{$theme['imgdir']}/portfolio/lightbox/css/lightbox.css" rel="stylesheet">
<script src="{$theme['imgdir']}/portfolio/lightbox/js/lightbox.js"></script>
<!-- /lightbox -->
<!-- script -->
<script>
$(document).ready(function() {
$('.tabs').tabs();
//add active class to the first li
$('.tabs-nav li:first').addClass('active');
//hide all content classes.
$('.content').hide();
//show only first div content
$('.content:first').show();
//add the click function
$('.tabs-nav li').click(function(){
//remove active class from previous li
$('.tabs-nav li').removeClass('active');
//add active class to the active li.
$(this).addClass('active');
//hide all content classes
$(".content").hide();
//find the href attribute of the active tab
var activeTab = $(this).find("a").attr("href");
//fade in the content of active tab
$(activeTab).fadeIn(1000);
return false;
});
var parentH = $('.tabs-nav li ul').parent().height();
$('.tabs-nav li ul').css('top', parentH);
$('.tabs-nav li').hover(function(){
$('ul', this).show();
}, function(){
$('ul', this).hide();
});
});
</script>
<!-- /script -->
<!-- script -->
<script>
$(document).ready(function(){
(!$('html').hasClass('no-touch')){
$(document).bind('touchstart', function(e) {
$(".filters ul.children").fadeOut(300); /* Close filters drop-downs if user taps ANYWHERE in the page */
});
$('.filters ul.children').bind('touchstart', function(event){
event.stopPropagation(); /* Make all touch events stop at the .filters ul.children container element */
});
$(".filters ul.children a").click(function () {
$(".filters ul.children").fadeOut(300); /* Close filters drop-downs if user taps on any link in drop-down */
});
}
}
</script>
<!-- /script -->
<!-- internal style -->
<style>
.folio .tborder_folio {
border: 0px;
}
.tborder_folio.folio {
background: #fff;
width: 100%;
margin: auto auto;
border: 0px solid #ccc;
padding: 1px;
}
.tborder_folio {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.tborder_folio .thead_collapsed {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.folio td {
background: transparent;
padding: 3px;
text-align: left !important;
float: none !important;
border-top: 0px !important;
border-left: 0px !important;
border-bottom: 1px solid: #DDDDDD;
display: block !important;
width: auto !important;
font-size: 13px !important;
overflow:hidden;
color: #333;
}
/* social */
.social {
margin: auto auto;
}
.socialicons {
list-style: none;
text-align: left;
padding: 8px;
}
}
.socialicons li a {
}
/* container1 */
.container1 {
color: #454545;
}
.container1::after {
content: "";
clear: both;
display: table;
}
.container1 img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
.container1 span {
/*font-size: 20px;*/
margin-right: 15px;
}
/* container2 */
.container2 {
color: #454545;
text-align: left;
margin-top: 5px;
}
.container2::after {
content: "";
clear: both;
display: table;
}
.container2 img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
.container2 span {
/*font-size: 20px;*/
/*margin-right: 15px;*/
}
/* container1 */
.container3 {
/*border: 1px solid #c5c5c5;
background-color: #f6f6f6;
border-radius: 5px;*/
padding: 16px;
margin: 16px 0;
color: #454545;
}
.container3::after {
content: "";
clear: both;
display: table;
}
.container3 img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
.container3 span {
/*font-size: 20px;*/
margin-right: 15px;
}
@media (max-width: 500px) {
/* container1 */
.container1 {
text-align: center;
}
.container1 img {
margin: auto;
float: none;
display: block;
}
/* container2 */
.container2 {
text-align: left;
}
.container2 img {
margin: auto;
float: none;
display: block;
}
/* container3 */
.container3 {
text-align: center;
}
.container3 img {
margin: auto;
float: none;
display: block;
}
}
.tabs {
min-width: 300px;
margin-bottom: 10px;
}
.tabs li a:focus,
.tabs li ul a:focus{
outline: none;
}
.tabs li ul,
.filters li ul {
position: absolute;
display:none;
left: 0px;
/*width: 1.97em;*/ /* left offset of submenus need to match */
z-index: 9999;
}
.tabs li ul:hover,
.filters li ul:hover {
}
.tabs-nav .drop{
border: 1px solid #cccccc;
background: #ededed;
border-top: 0;
font-weight: normal;
color: #454545;
/*width: 100%;*/
margin-left: -1px;
}
.tabs-nav .drop .droplink{
right: 25px;
position: relative;
}
.tabs-nav .drop a.droplink {
color: #454545 !important;
}
.tabs-nav .drop .droplink:hover{
text-decoration: underline !important;
}
a.tabs-nav:active,
a.tabs-nav:hover {
border: 1px solid #003eff;
border-bottom-width: 1px;
background: #007FD0;
color: #ffffff;
}
.ui-widget-header {
border: 1px solid #dddddd;
background: #e9e9e9;
color: #333333;
font-weight: bold;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
border: 1px solid #003eff;
border-bottom-width: 1px;
background: #007fff;
font-weight: normal;
color: #ffffff;
}
</style>
<!-- /internal style -->
<!-- sidebar-index-->
<div class="sidebar-index">
<!-- tabs -->
<div class="tabs">
<!-- tabs-nav -->
<ul class="tabs-nav">
<li>
<a href="#tab1" id=""><i class="fas fa-info-circle"></i> About</a>
<!-- uncomment below to enable dropdown #tab1 -->
<!-- #tab1 drop-down -->
<ul class="drop">
<!-- #tab1 drop-down items -->
<li><a class="droplink" href="#tab1-1" id=""><i class="fas fa-palette"></i> Theme Reviews</a></li>
<li><a class="droplink" href="#tab1-2" id=""><i class="fas fa-plug"></i> Plugin Reviews</a></li>
<li><a class="droplink" href="#tab1-3" id=""><i class="fas fa-wrench"></i> Custom Reviews</a></li>
<!-- /#tab1 drop-down items -->
</ul>
<!-- /#tab1 drop-down -->
</li>
<!-- end tab 3-->
<li>
<a href="#tab2" id="folio"><i class="fas fa-image"></i> Folio</a>
<!-- comment out below to disable dropdown #tab2 -->
<!-- #tab2 drop-down -->
<ul class="drop">
<!-- #tab2 drop-down items -->
<li><a class="droplink" href="#tab2-1" id="folio-1"><i class="fas fa-palette"></i> Themes</a></li>
<li><a class="droplink" href="#tab2-2" id="folio-2"><i class="fas fa-plug"></i> Plugins</a></li>
<li><a class="droplink" href="#tab2-3" id="folio-3"><i class="fas fa-wrench"></i> Custom</a></li>
<!-- /#tab2 drop-down items -->
</ul>
<!-- /#tab2 drop-down -->
</li>
<!-- end tab 3-->
<li>
<a href="#tab3" id=""><i class="fas fa-tools"></i> Services</a>
<!-- comment out below to disable dropdown #tab3 -->
<!-- #tab3 drop-down -->
<ul class="drop">
<!-- #tab3 drop-down items -->
<li><a class="droplink" href="#tab3-1" id=""><i class="fas fa-palette"></i> Themes</a></li>
<li><a class="droplink" href="#tab3-2" id=""><i class="fas fa-plug"></i> Plugins</a></li>
<li><a class="droplink" href="#tab3-3" id=""><i class="fas fa-wrench"></i> Custom</a></li>
<!-- /#tab3 drop-down items -->
</ul>
<!-- /#tab3 drop-down -->
</li>
<!-- end tab 3-->
</ul>
<!-- /tabs-nav -->
<!-- tabs content -->
<div class="tabs-content">
<!-- tab1 content -->
<div id="tab1" class="content">
<!-- content -->
<div class="container1">
<span class="">
<!-- designer / developer avatar -->
<img src="{$theme['imgdir']}/portfolio/img_avatar2.png" alt="avatar" style="width:90px">
<p><span><strong>Mary Jane Doe</strong></span></p>
<p> <span>Designer & Developer</span></p>
</span>
</div>
<div class="container2">
<span class="">
<i class="fas fa-info-circle"></i> <strong>About:</strong>
</span>
<span class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nulla in odio eleifend luctus quis non augue. Nunc porta vestibulum nulla, nec gravida orci congue tristique. Vestibulum at arcu a velit consectetur eleifend sit amet at libero. Curabitur commodo augue nunc, eget vestibulum nunc blandit at. Mauris non dolor.</p>
</span>
<div class="social">
<!-- Start - Social Icons -->
<ul class="socialicons">
<li><i class="fab fa-twitter"></i> <a href="" target="_blank">twitter</a></li>
<li><i class="fab fa-linkedin"></i> <a href="" target="_blank">linkedin</a></li>
<li><i class="fab fa-dribbble"></i> <a href="" target="_blank">dribble</a></li>
<li><i class="fab fa-github"></i> <a href="" target="_blank">github</a></li>
<li><i class="fab fa-stack-overflow"></i> <a href="" target="_blank">stackoverflow</a></li>
</ul>
<!-- End - Social Icons -->
</div>
</div>
<!-- /content -->
</div>
<!-- /tab1 content -->
<!-- drop content -->
<!-- tab1-1 content -->
<div id="tab1-1" class="content ui-tabs-panel ui-corner-bottom ui-widget-content">
<!-- content -->
<span class="">
<i class="fas fa-palette"></i> <strong>Theme Reviews:</strong>
</span>
<div class="container3">
<span class="">
<img src="{$theme['imgdir']}/portfolio/bandmember.jpg" alt="avatar" style="width:90px">
<p><span>Philip Bowles.</span></p>
<p> <span>Admin at Herball Schools.</span></p>
<p>"Mary Jane Doe saved us from a web disaster by presenting us with an amazing theme."</p>
</span>
</div>
<div class="container3">
<span class="">
<img src="{$theme['imgdir']}/portfolio/avatar_g2.jpg" alt="avatar" style="width:90px">
<p><span>Jane Puffins.</span></p>
<p> <span>CEO at Lit Jams Inc.</span></p>
<p>"Mary Jane Doe is amazing at themes."</p>
</span>
</div>
<!-- /content -->
</div>
<!-- /tab1-1 content -->
<!-- tab1-2 content -->
<div id="tab1-2" class="content ui-tabs-panel ui-corner-bottom ui-widget-content">
<!-- content -->
<span class="">
<i class="fas fa-plug"></i> <strong>Plugin Reviews:</strong>
</span>
<div class="container3">
<span class="">
<img src="{$theme['imgdir']}/portfolio/bandmember.jpg" alt="avatar" style="width:90px">
<p><span><strong>Philip Bowles.</strong></span></p>
<p> <span>Admin at Herball Schools.</span></p>
<p>"Mary Jane Doe saved us from a web disaster by presenting us with an amazing plugin."</p>
</span>
</div>
<div class="container3">
<span class="">
<img src="{$theme['imgdir']}/portfolio/avatar_g2.jpg" alt="avatar" style="width:90px">
<p><span><strong>Jane Puffins.</strong></span></p>
<p> <span>CEO at Lit Jams Inc.</span></p>
<p>"Mary Jane Doe creates some pretty great plugins."</p>
</span>
</div>
<!-- /content -->
</div>
<!-- /tab1-2 content -->
<!-- tab1-3 content -->
<div id="tab1-3" class="content ui-tabs-panel ui-corner-bottom ui-widget-content">
<!-- content -->
<span class="">
<i class="fas fa-wrench"></i> <strong>Custom Work Reviews:</strong>
</span>
<div class="container3">
<span class="">
<img src="{$theme['imgdir']}/portfolio/bandmember.jpg" alt="avatar" style="width:90px">
<p><span><strong>Philip Bowles.</strong></span></p>
<p> <span>Admin at Herball Schools.</span></p>
<p>"Mary Jane Doe saved us from a web disaster by presenting us with some excellent custom work."</p>
</span>
</div>
<div class="container3">
<span class="">
<img src="{$theme['imgdir']}/portfolio/avatar_g2.jpg" alt="avatar" style="width:90px">
<p><span><strong>Jane Puffins.</strong></span></p>
<p> <span>CEO at Lit Jams Inc.</span></p>
<p>"Mary Jane Doe is a true wiz at custom work requests."</p>
</span>
</div>
<!-- /content -->
</div>
<!-- /tab1-3 content -->
<!-- tab2 content -->
<div id="tab2" class="content">
<!-- content -->
<div class="container1">
<span class="">
<!-- designer / developer avatar -->
<img src="{$theme['imgdir']}/portfolio/img_avatar2.png" alt="avatar" style="width:90px">
<p><span><strong>Mary Jane Doe</strong></span></p>
<p> <span>Designer & Developer</span></p>
</span>
</div>
<div class="container2">
<span class="">
<i class="fas fa-palette"></i> <strong>About Themes Folio:</strong>
</span>
<span class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nulla in odio eleifend luctus quis non augue. Nunc porta vestibulum nulla, nec gravida orci congue tristique. Vestibulum at arcu a velit consectetur eleifend sit amet at libero. Curabitur commodo augue nunc, eget vestibulum nunc blandit at. Mauris non dolor.</p>
</span>
</div>
<div class="container2">
<span class="">
<i class="fas fa-plug"></i> <strong>About Plugins Folio:</strong>
</span>
<span class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nulla in odio eleifend luctus quis non augue. Nunc porta vestibulum nulla, nec gravida orci congue tristique. Vestibulum at arcu a velit consectetur eleifend sit amet at libero. Curabitur commodo augue nunc, eget vestibulum nunc blandit at. Mauris non dolor.</p>
</span>
</div>
<div class="container2">
<span class="">
<i class="fas fa-wrench"></i> <strong>About Custom Folio:</strong>
</span>
<span class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nulla in odio eleifend luctus quis non augue. Nunc porta vestibulum nulla, nec gravida orci congue tristique. Vestibulum at arcu a velit consectetur eleifend sit amet at libero. Curabitur commodo augue nunc, eget vestibulum nunc blandit at. Mauris non dolor.</p>
</span>
</div>
<!-- /content -->
</div>
<!-- /tab2 content -->
<!-- drop content -->
<!-- tab2-1 content -->
<div id="tab2-1" class="content ui-tabs-panel ui-corner-bottom ui-widget-content">
<!-- content -->
<span class="">
<i class="fas fa-image"></i> <strong>Folio: Themes</strong>
</span>
<table border="0" cellspacing="0" cellpadding="4" class="tborder_folio folio" id="folio">
<thead>
<tr>
<td class="thead" colspan="2">
<strong>Project - One</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio1']}.png" id="folio1_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['folio1_e']}" id="folio1_e">
<tr>
<td class="trow1"><a href="{$theme['imgdir']}/portfolio/img/folio1/folio1a.png" data-lightbox="folio1" data-title="Project One A"><img src="{$theme['imgdir']}/portfolio/img/folio1/folio1a.png" alt="" style="max-width: 100%"/></a> <a href="{$theme['imgdir']}/portfolio/img/folio1/folio1b.png" data-lightbox="folio1" data-title="Project One B" ></a> <a href="{$theme['imgdir']}/portfolio/img/folio1/folio1c.png" data-lightbox="folio1" data-title="Project One C" ></a></td>
<td class="trow1" width="30%">
<div class="post_controls">
<h2>Project One Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project One Link</a></div>
<strong>Status: </strong>
<h3 style="color:#2CAA3A;"> <img src="{$theme['imgdir']}/valid.png">
Complete
</h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder_folio folio" id="folio">
<thead>
<tr>
<td class="thead" colspan="2">
<strong>Project - Two</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio2']}.png" id="folio2_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['folio2_e']}" id="folio2_e">
<tr>
<td class="trow1"><a href="{$theme['imgdir']}/portfolio/img/folio2/folio2a.png" data-lightbox="folio2" data-title="Project Two A"><img src="{$theme['imgdir']}/portfolio/img/folio2/folio2a.png" alt="" style="max-width: 100%"/></a> <a href="{$theme['imgdir']}/portfolio/img/folio2/folio2b.png" data-lightbox="folio2" data-title="Project Two B" ></a> <a href="{$theme['imgdir']}/portfolio/img/folio2/folio2c.png" data-lightbox="folio2" data-title="Project Two C" ></a></td>
<td class="trow1" width="30%">
<div class="post_controls">
<h2>Project Two Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Two Link</a></div>
<strong>Status: </strong>
<h3 style="color:#A21111;">
<img src="{$theme['imgdir']}/invalid.png">
Not Yet Complete
</h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder_folio folio" id="folio">
<thead>
<tr>
<td class="thead" colspan="2">
<strong>Project - Three</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio3']}.png" id="folio3_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['folio3_e']}" id="folio3_e">
<tr>
<td class="trow1"><a href="{$theme['imgdir']}/portfolio/img/folio3/folio3a.png" data-lightbox="folio3" data-title="Project Three A"><img src="{$theme['imgdir']}/portfolio/img/folio3/folio3a.png" alt="" style="max-width: 100%"/></a> <a href="{$theme['imgdir']}/portfolio/img/folio3/folio3b.png" data-lightbox="folio3" data-title="Project Three B" ></a> <a href="{$theme['imgdir']}/portfolio/img/folio3/folio3c.png" data-lightbox="folio3" data-title="Project Three C" ></a></td>
<td class="trow1" width="30%">
<div class="post_controls">
<h2>Project Three Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Three Link</a></div>
<strong>Status: </strong>
<h3 style="color:#2CAA3A;"> <img src="{$theme['imgdir']}/valid.png">
Complete
</h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder_folio folio" id="folio">
<thead>
<tr>
<td class="thead" colspan="2">
<strong>Project - Four</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio4']}.png" id="folio4_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['folio4_e']}" id="folio4_e">
<tr>
<td class="trow1"><a href="{$theme['imgdir']}/portfolio/img/folio4/folio4a.png" data-lightbox="folio4" data-title="Project Four A"><img src="{$theme['imgdir']}/portfolio/img/folio4/folio4a.png" alt="" style="max-width: 100%"/></a> <a href="{$theme['imgdir']}/portfolio/img/folio4/folio4b.png" data-lightbox="folio4" data-title="Project Four B" ></a> <a href="{$theme['imgdir']}/portfolio/img/folio4/folio4c.png" data-lightbox="folio4" data-title="Project Four C" ></a></td>
<td class="trow1" width="30%">
<div class="post_controls">
<h2>Project Four Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Four Link</a></div>
<strong>Status: </strong>
<h3 style="color:#2CAA3A;"> <img src="{$theme['imgdir']}/valid.png">
Complete
</h3>
</td>
</tr>
</table>
<br />
<!-- /content -->
</div>
<!-- /tab2-1 content -->
<!-- tab2-2 content -->
<div id="tab2-2" class="content ui-tabs-panel ui-corner-bottom ui-widget-content">
<!-- content -->
<span class="">
<i class="fas fa-image"></i> <strong>Folio: Plugins</strong>
</span>
<table border="0" cellspacing="0" cellpadding="4" class="tborder_folio folio" id="folio">
<thead>
<tr>
<td class="thead" colspan="2">
<strong>Project - Five</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio5']}.png" id="folio5_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['folio5_e']}" id="folio5_e">
<tr>
<td class="trow1"><a href="{$theme['imgdir']}/portfolio/img/folio5/folio5a.png" data-lightbox="folio5" data-title="Project Five A"><img src="{$theme['imgdir']}/portfolio/img/folio5/folio5a.png" alt="" style="max-width: 100%"/></a> <a href="{$theme['imgdir']}/portfolio/img/folio5/folio5b.png" data-lightbox="folio1" data-title="Project Five B" ></a> <a href="{$theme['imgdir']}/portfolio/img/folio5/folio5c.png" data-lightbox="folio1" data-title="Project Five C" ></a></td>
<td class="trow1" width="30%">
<div class="post_controls">
<h2>Project Five Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Five Link</a></div>
<strong>Status: </strong>
<h3 style="color:#2CAA3A;"> <img src="{$theme['imgdir']}/valid.png">
Complete
</h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder_folio folio" id="folio">
<thead>
<tr>
<td class="thead" colspan="2">
<strong>Project - Six</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio6']}.png" id="folio6_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['folio6_e']}" id="folio6_e">
<tr>
<td class="trow1"><a href="{$theme['imgdir']}/portfolio/img/folio6/folio6a.png" data-lightbox="folio6" data-title="Project Six A"><img src="{$theme['imgdir']}/portfolio/img/folio6/folio6a.png" alt="" style="max-width: 100%"/></a> <a href="{$theme['imgdir']}/portfolio/img/folio6/folio6b.png" data-lightbox="folio6" data-title="Project Six B" ></a> <a href="{$theme['imgdir']}/portfolio/img/folio6/folio6c.png" data-lightbox="folio6" data-title="Project Six C" ></a></td>
<td class="trow1" width="30%">
<div class="post_controls">
<h2>Project Six Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Six Link</a></div>
<strong>Status: </strong>
<h3 style="color:#A21111;">
<img src="{$theme['imgdir']}/invalid.png">
Not Yet Complete
</h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder_folio folio" id="folio">
<thead>
<tr>
<td class="thead" colspan="2">
<strong>Project - Seven</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio7']}.png" id="folio7_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['folio7_e']}" id="folio7_e">
<tr>
<td class="trow1"><a href="{$theme['imgdir']}/portfolio/img/folio7/folio7a.png" data-lightbox="folio7" data-title="Project Seven A"><img src="{$theme['imgdir']}/portfolio/img/folio7/folio7a.png" alt="" style="max-width: 100%"/></a> <a href="{$theme['imgdir']}/portfolio/img/folio7/folio7b.png" data-lightbox="folio7" data-title="Project Seven B" ></a> <a href="{$theme['imgdir']}/portfolio/img/folio7/folio7c.png" data-lightbox="folio7" data-title="Project Seven C" ></a></td>
<td class="trow1" width="30%">
<div class="post_controls">
<h2>Project Seven Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Seven Link</a></div>
<strong>Status: </strong>
<h3 style="color:#2CAA3A;"> <img src="{$theme['imgdir']}/valid.png">
Complete
</h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder_folio folio" id="folio">
<thead>
<tr>
<td class="thead" colspan="2">
<strong>Project - Eight</strong>
<div class="expcolimage"><img src="images/collapse{$collapsedimg['folio8']}.png" id="folio8_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['folio8_e']}" id="folio8_e">
<tr>
<td class="trow1"><a href="{$theme['imgdir']}/portfolio/img/folio8/folio8a.png" data-lightbox="folio8" data-title="Project Eight A"><img src="{$theme['imgdir']}/portfolio/img/folio8/folio8a.png" alt="" style="max-width: 100%"/></a> <a href="{$theme['imgdir']}/portfolio/img/folio8/folio8b.png" data-lightbox="folio8" data-title="Project Eight B" ></a> <a href="{$theme['imgdir']}/portfolio/img/folio8/folio8c.png" data-lightbox="folio8" data-title="Project Eight C" ></a></td>
<td class="trow1" width="30%">
<div class="post_controls">
<h2>Project Eight Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Eight Link</a></div>
<strong>Status: </strong>
<h3 style="color:#2CAA3A;"> <img src="{$theme['imgdir']}/valid.png">
Complete
</h3>
</td>
</tr>
</table>
<br />
<!-- /content -->
</div>
<!-- /tab2-2 content -->
<!-- tab2-3 content -->
<div id="tab2-3" class="content ui-tabs-panel ui-corner-bottom ui-widget-content">
<!-- content -->
<span class="">
<i class="fas fa-image"></i> <strong>Folio: Custom</strong>
</span>
<table border="0" cellspacing="0" cellpadding="4" class="tborder_folio folio" id="folio">
<thead>
<tr>
<td class="thead" colspan="2">
<strong>Project - Nine</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio9']}.png" id="folio9_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['folio9_e']}" id="folio9_e">
<tr>
<td class="trow1"><a href="{$theme['imgdir']}/portfolio/img/folio9/folio9a.png" data-lightbox="folio9" data-title="Project Nine A"><img src="{$theme['imgdir']}/portfolio/img/folio9/folio9a.png" alt="" style="max-width: 100%"/></a> <a href="{$theme['imgdir']}/portfolio/img/folio9/folio9b.png" data-lightbox="folio9" data-title="Project Nine B" ></a> <a href="{$theme['imgdir']}/portfolio/img/folio9/folio9c.png" data-lightbox="folio9" data-title="Project Nine C" ></a></td>
<td class="trow1" width="30%">
<div class="post_controls">
<h2>Project Nine Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Nine Link</a></div>
<strong>Status: </strong>
<h3 style="color:#2CAA3A;"> <img src="{$theme['imgdir']}/valid.png">
Complete
</h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder_folio folio" id="folio">
<thead>
<tr>
<td class="thead" colspan="2">
<strong>Project - Ten</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio10']}.png" id="folio10_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['folio10_e']}" id="folio10_e">
<tr>
<td class="trow1"><a href="{$theme['imgdir']}/portfolio/img/folio10/folio10a.png" data-lightbox="folio10" data-title="Project Ten A"><img src="{$theme['imgdir']}/portfolio/img/folio10/folio10a.png" alt="" style="max-width: 100%"/></a> <a href="{$theme['imgdir']}/portfolio/img/folio10/folio10b.png" data-lightbox="folio10" data-title="Project Ten B" ></a> <a href="{$theme['imgdir']}/portfolio/img/folio10/folio10c.png" data-lightbox="folio10" data-title="Project Ten C" ></a></td>
<td class="trow1" width="30%">
<div class="post_controls">
<h2>Project Ten Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Ten Link</a></div>
<strong>Status: </strong>
<h3 style="color:#A21111;">
<img src="{$theme['imgdir']}/invalid.png">
Not Yet Complete
</h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder_folio folio" id="folio">
<thead>
<tr>
<td class="thead" colspan="2">
<strong>Project - Eleven</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio11']}.png" id="folio11_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['folio11_e']}" id="folio11_e">
<tr>
<td class="trow1"><a href="{$theme['imgdir']}/portfolio/img/folio11/folio11a.png" data-lightbox="folio11" data-title="Project Eleven A"><img src="{$theme['imgdir']}/portfolio/img/folio11/folio11a.png" alt="" style="max-width: 100%"/></a> <a href="{$theme['imgdir']}/portfolio/img/folio11/folio11b.png" data-lightbox="folio11" data-title="Project Eleven B" ></a> <a href="{$theme['imgdir']}/portfolio/img/folio11/folio11c.png" data-lightbox="folio11" data-title="Project Eleven C" ></a></td>
<td class="trow1" width="30%">
<div class="post_controls">
<h2>Project Eleven Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Eleven Link</a></div>
<strong>Status: </strong>
<h3 style="color:#2CAA3A;"> <img src="{$theme['imgdir']}/valid.png">
Complete
</h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder_folio folio" id="folio">
<thead>
<tr>
<td class="thead" colspan="2">
<strong>Project - Twelve</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio12']}.png" id="folio12_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['folio12_e']}" id="folio12_e">
<tr>
<td class="trow1"><a href="{$theme['imgdir']}/portfolio/img/folio12/folio12a.png" data-lightbox="folio12" data-title="Project Twelve A"><img src="{$theme['imgdir']}/portfolio/img/folio12/folio12a.png" alt="" style="max-width: 100%"/></a> <a href="{$theme['imgdir']}/portfolio/img/folio12/folio12b.png" data-lightbox="folio12" data-title="Project Twelve B" ></a> <a href="{$theme['imgdir']}/portfolio/img/folio12/folio12c.png" data-lightbox="folio12" data-title="Project Twelve C" ></a></td>
<td class="trow1" width="30%">
<div class="post_controls">
<h2>Project Twelve Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Twelve Link</a></div>
<strong>Status: </strong>
<h3 style="color:#2CAA3A;"> <img src="{$theme['imgdir']}/valid.png">
Complete
</h3>
</td>
</tr>
</table>
<br />
<!-- /content -->
</div>
<!-- /tab2-3 content -->
<!-- tab3 content -->
<div id="tab3" class="content">
<!-- content -->
<div class="container1">
<span class="">
<!-- designer / developer avatar -->
<img src="{$theme['imgdir']}/portfolio/img_avatar2.png" alt="avatar" style="width:90px">
<p><span><strong>Mary Jane Doe</strong></span></p>
<p> <span>Designer & Developer</span></p>
</span>
</div>
<div class="container2">
<span class="">
<i class="fas fa-tools"></i> <strong>Free Services:</strong>
</span>
<span class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nulla in odio eleifend luctus quis non augue. Nunc porta vestibulum nulla, nec gravida orci congue tristique. Vestibulum at arcu a velit consectetur eleifend sit amet at libero. Curabitur commodo augue nunc, eget vestibulum nunc blandit at. Mauris non dolor.</p>
</span>
</div>
<div class="container2">
<span class="">
<i class="fas fa-tools"></i> <strong>Paid Services:</strong>
</span>
<span class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nulla in odio eleifend luctus quis non augue. Nunc porta vestibulum nulla, nec gravida orci congue tristique. Vestibulum at arcu a velit consectetur eleifend sit amet at libero. Curabitur commodo augue nunc, eget vestibulum nunc blandit at. Mauris non dolor.</p>
</span>
</div>
<!-- /content -->
</div>
<!-- /tab3 content -->
<!-- drop content -->
<!-- tab3-1 content -->
<div id="tab3-1" class="content ui-tabs-panel ui-corner-bottom ui-widget-content">
<!-- content -->
<div class="container1">
<span class="">
<!-- designer / developer avatar -->
<img src="{$theme['imgdir']}/portfolio/img_avatar2.png" alt="avatar" style="width:90px">
<p><span><strong>Mary Jane Doe</strong></span></p>
<p> <span>Designer & Developer</span></p>
</span>
</div>
<div class="container2">
<span class="">
<i class="fas fa-palette"></i> <strong>Free Theme Services:</strong>
</span>
<span class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nulla in odio eleifend luctus quis non augue. Nunc porta vestibulum nulla, nec gravida orci congue tristique. Vestibulum at arcu a velit consectetur eleifend sit amet at libero. Curabitur commodo augue nunc, eget vestibulum nunc blandit at. Mauris non dolor.</p>
</span>
</div>
<div class="container2">
<span class="">
<i class="fas fa-palette"></i> <strong>Paid Theme Services:</strong>
</span>
<span class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nulla in odio eleifend luctus quis non augue. Nunc porta vestibulum nulla, nec gravida orci congue tristique. Vestibulum at arcu a velit consectetur eleifend sit amet at libero. Curabitur commodo augue nunc, eget vestibulum nunc blandit at. Mauris non dolor.</p>
</span>
</div>
<!-- /content -->
</div>
<!-- /tab3-1 content -->
<!-- tab3-2 content -->
<div id="tab3-2" class="content ui-tabs-panel ui-corner-bottom ui-widget-content">
<!-- content -->
<div class="container1">
<span class="">
<!-- designer / developer avatar -->
<img src="{$theme['imgdir']}/portfolio/img_avatar2.png" alt="avatar" style="width:90px">
<p><span><strong>Mary Jane Doe</strong></span></p>
<p> <span>Designer & Developer</span></p>
</span>
</div>
<div class="container2">
<span class="">
<i class="fas fa-plug"></i> <strong>Free Plugin Services:</strong>
</span>
<span class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nulla in odio eleifend luctus quis non augue. Nunc porta vestibulum nulla, nec gravida orci congue tristique. Vestibulum at arcu a velit consectetur eleifend sit amet at libero. Curabitur commodo augue nunc, eget vestibulum nunc blandit at. Mauris non dolor.</p>
</span>
</div>
<div class="container2">
<span class="">
<i class="fas fa-plug"></i> <strong>Paid Plugin Services:</strong>
</span>
<span class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nulla in odio eleifend luctus quis non augue. Nunc porta vestibulum nulla, nec gravida orci congue tristique. Vestibulum at arcu a velit consectetur eleifend sit amet at libero. Curabitur commodo augue nunc, eget vestibulum nunc blandit at. Mauris non dolor.</p>
</span>
</div>
<!-- /content -->
</div>
<!-- /tab3-2 content -->
<!-- tab3-3 content -->
<div id="tab3-3" class="content ui-tabs-panel ui-corner-bottom ui-widget-content">
<!-- content -->
<div class="container1">
<span class="">
<!-- designer / developer avatar -->
<img src="{$theme['imgdir']}/portfolio/img_avatar2.png" alt="avatar" style="width:90px">
<p><span><strong>Mary Jane Doe</strong></span></p>
<p> <span>Designer & Developer</span></p>
</span>
</div>
<div class="container2">
<span class="">
<i class="fas fa-wrench"></i> <strong>Custom Services:</strong>
</span>
<span class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nulla in odio eleifend luctus quis non augue. Nunc porta vestibulum nulla, nec gravida orci congue tristique. Vestibulum at arcu a velit consectetur eleifend sit amet at libero. Curabitur commodo augue nunc, eget vestibulum nunc blandit at. Mauris non dolor.</p>
</span>
</div>
<!-- /content -->
</div>
<!-- /tab3-3 content -->
</div>
<!-- /tabs-content -->
</div>
<!-- /tabs -->
</div>
<!-- /sidebar-index-->
<!-- forum-index-->
<div class="forum-index">
{$forums}
</div>
<!-- /forum-index-->
Now, download the needed files portfolio.zip file and extract it. http://s000.tinyupload.com/download.php?...2647526671 note that it a larger file because of the included files for lightbox and the portfolio or what not hence the file being shared externally due to the community attachment size restrictions....
Ok, you should now have a folder called /portfolio upload that entire folder and its contnets to your forums images directory.
& then you can continue editing further for your usages. ** (note this is only an example and not actually tweaked to precise specifics and is meant as a starting point to the reader to then expand upon, edit and improve...) You can edit, change and tweak/customize this any such way you wish!
* also note things like inline styling was intentional as I wanted it as a dropin to edit within the page thuse make it easy for say the turoial reader to see how easily they could include this wherever they wanted and edit as such with the area they included it...
Best of luck!
~ V