Just a basic tutorial to show you how to quickly add FlexSlider to your forum on either portal or index or both...
Simple example on Index:
![[Image: bi6mno.png]]()
Edit: headerinclude
Find:
Add after:
Edit: Index
Find:
Add after:
Still also in index:
Find:
After add:
Simple example on portal:
![[Image: 2guf5mf.png]]()
Edit: Portal
Find:
Add after:
Still also in portal:
Find:
After add:
Download / Extract and upload the flex-slider folder to your forums root directory
![.zip]( "Zip File")
flex-slider.zip (Size: 1.04 MB / Downloads: 7)
Simple example on Index:
Edit: headerinclude
Find:
Code:
{$stylesheets}Add after:
Code:
<!-- Flex-Slider Includes-->
<link rel="stylesheet" href="{$mybb->asset_url}/flex-slider/css/flexslider.css" type="text/css">
<script src="{$mybb->asset_url}/flex-slider/js/jquery.flexslider.js"></script>
<!-- Flex-Slider Init -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>Edit: Index
Find:
Code:
{$headerinclude}Add after:
Code:
<!-- Flexslider Index Inline Styling-->
<style type="text/css">
.flexslider .slides img {
-moz-border-radius: 6px 6px 0 0 !important;
-webkit-border-radius: 6px 6px 0 0 !important;
border-radius: 6px 6px 0 0 !important;
max-height: 350px !important;
}
.flexslider {
margin-top: 10px !important;
border: 1px solid #ccc !important;
padding: 1px;
background: #EFEFEF !important;
-moz-border-radius: 6 !important;
-webkit-border-radius: 6 !important;
border-radius: 6 !important;
overflow: hidden !important;
z-index:1 !important;
}
.flex-control-nav {
position: absolute !important;
right: 0 !important;
left: 45% !important;
bottom: 2.3% !important;
opacity: 0.5 !important;
filter:alpha(opacity=0.5) !important;
}
.flex-direction-nav a {
height: 45px !important;
}
.flexslider .slides li {
position: relative !important;
}
.flex-caption {
color: #000 !important;
z-index: 2 !important;
padding: 10px !important;
font-family: Tahoma, Verdana, Arial, Sans-Serif !important;
font-size: 18px !important;
}
</style>Still also in index:
Find:
Code:
{$header}After add:
Code:
<!-- FlexSlider on Index -->
<div id="main" role="main">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="{$mybb->asset_url}/flex-slider/images/slides/kitchen_adventurer_cheesecake_brownie.jpg" />
<p class="flex-caption">Adventurer Cheesecake Brownie</p>
</li>
<li>
<img src="{$mybb->asset_url}/flex-slider/images/slides/kitchen_adventurer_lemon.jpg" />
<p class="flex-caption">Adventurer Lemon</p>
</li>
<li>
<img src="{$mybb->asset_url}/flex-slider/images/slides/kitchen_adventurer_donut.jpg" />
<p class="flex-caption">Adventurer Donut</p>
</li>
<li>
<img src="{$mybb->asset_url}/flex-slider/images/slides/kitchen_adventurer_caramel.jpg" />
<p class="flex-caption">Adventurer Caramel</p>
</li>
</ul>
</div>
</section>Simple example on portal:
Edit: Portal
Find:
Code:
{$headerinclude}Add after:
Code:
<!-- Flexslider Portal Inline Styling-->
<style type="text/css">
.flexslider .slides img {
-moz-border-radius: 6px 6px 0 0 !important;
-webkit-border-radius: 6px 6px 0 0 !important;
border-radius: 6px 6px 0 0 !important;
max-height: 350px !important;
}
.flexslider {
margin-top: 10px !important;
border: 1px solid #ccc !important;
padding: 1px;
background: #EFEFEF !important;
-moz-border-radius: 6 !important;
-webkit-border-radius: 6 !important;
border-radius: 6 !important;
overflow: hidden !important;
z-index:1 !important;
}
.flex-control-nav {
position: absolute !important;
right: 0 !important;
left: 45% !important;
bottom: 2.3% !important;
opacity: 0.5 !important;
filter:alpha(opacity=0.5) !important;
}
.flex-direction-nav a {
height: 45px !important;
}
.flexslider .slides li {
position: relative !important;
}
.flex-caption {
color: #000 !important;
z-index: 2 !important;
padding: 10px !important;
font-family: Tahoma, Verdana, Arial, Sans-Serif !important;
font-size: 18px !important;
}
</style>Still also in portal:
Find:
Code:
{$header}After add:
Code:
<!-- FlexSlider on Portal -->
<div id="main" role="main">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="{$mybb->asset_url}/flex-slider/images/slides/kitchen_adventurer_cheesecake_brownie.jpg" />
<p class="flex-caption">Adventurer Cheesecake Brownie</p>
</li>
<li>
<img src="{$mybb->asset_url}/flex-slider/images/slides/kitchen_adventurer_lemon.jpg" />
<p class="flex-caption">Adventurer Lemon</p>
</li>
<li>
<img src="{$mybb->asset_url}/flex-slider/images/slides/kitchen_adventurer_donut.jpg" />
<p class="flex-caption">Adventurer Donut</p>
</li>
<li>
<img src="{$mybb->asset_url}/flex-slider/images/slides/kitchen_adventurer_caramel.jpg" />
<p class="flex-caption">Adventurer Caramel</p>
</li>
</ul>
</div>
</section>Download / Extract and upload the flex-slider folder to your forums root directory
flex-slider.zip (Size: 1.04 MB / Downloads: 7)