[TUT] - Simply Add Flex Slider to your Index and or Portal (in 5 easy steps)

[TUT] - Simply Add Flex Slider to your Index and or Portal (in 5 easy steps) *

* simply a quick share again of the tutorial by vintagedaddyo (me) from 2016 upon re-visting it just now while applying a few minor edits primarily very similar to the original tutorial but minor things were changed like for example required change to function to get it to load again now via jq 3.x and just a few other minor edits here and there) (*note all the styling variants that were once provided via replies to this particular tutorial will not be re-added as those were lost when the original thread was deleted, but, hey, here is at least the simple tutorial for anyone still interested in say simply adding flex slider to their forum and then taking it from there...)


ie:




1) download the required files: http://s000.tinyupload.com/index.php?fil...5937341828

2) extract the flex-slider.zip file

3) upload the extracted "flex-slider" directory to your forum root directory ie: forum/flex-slider

4) Edit Template: headerinclude

Find:

{$stylesheets}

Add this after:

<!-- 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).on('load', function() {
 $('.flexslider').flexslider({
          animation: "slide"
 });
});
</script>

Next, for either 5.A or 5.B or both....

Now, if desired on the index page:

5.A) Edit Template: index

Find:

{$headerinclude}

after it add:

<!-- 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>	

find:

{$header}

after it add:

<!-- FlexSlider on Index -->
    <div id="main" role="main">
     <section class="slider">
       <div class="flexslider">
         <ul class="slides">
           <li>
                 <a href="{$mybb->asset_url}/portal.php"><img src="{$mybb->asset_url}/flex-slider/images/slides/index/kitchen_adventurer_cheesecake_brownie.jpg"></a>
             <p class="flex-caption">Adventurer Cheesecake Brownie</p>
                 </li>
                 <li>
                 <a href="{$mybb->asset_url}/search.php"><img src="{$mybb->asset_url}/flex-slider/images/slides/index/kitchen_adventurer_lemon.jpg"></a>
             <p class="flex-caption">Adventurer Lemon</p>
                 </li>
                 <li>
                 <a href="{$mybb->asset_url}/memberlist.php"><img src="{$mybb->asset_url}/flex-slider/images/slides/index/kitchen_adventurer_donut.jpg"></a>
             <p class="flex-caption">Adventurer Donut</p>
                 </li>
                 <li>
                 <a href="{$mybb->asset_url}/misc.php?action=help"><img src="{$mybb->asset_url}/flex-slider/images/slides/index/kitchen_adventurer_caramel.jpg"></a>
             <p class="flex-caption">Adventurer Caramel</p>
                 </li>
         </ul>
       </div>
     </section>	
  </div>

Now, if desired on the portal page:

5.B) Edit Template: portal

Find:

{$headerinclude}

after it add:

<!-- 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>	

find:

{$header}

after it add:

<!-- FlexSlider on Portal -->
    <div id="main" role="main">
     <section class="slider">
       <div class="flexslider">
         <ul class="slides">
           <li>
                 <a href="{$mybb->asset_url}/index.php"><img src="{$mybb->asset_url}/flex-slider/images/slides/portal/kitchen_adventurer_cheesecake_brownie.jpg"></a>
             <p class="flex-caption">Adventurer Cheesecake Brownie</p>
                 </li>
                 <li>
                 <a href="{$mybb->asset_url}/search.php"><img src="{$mybb->asset_url}/flex-slider/images/slides/portal/kitchen_adventurer_lemon.jpg"></a>
             <p class="flex-caption">Adventurer Lemon</p>
                 </li>
                 <li>
                 <a href="{$mybb->asset_url}/memberlist.php"><img src="{$mybb->asset_url}/flex-slider/images/slides/portal/kitchen_adventurer_donut.jpg"></a>
             <p class="flex-caption">Adventurer Donut</p>
                 </li>
                 <li>
                 <a href="{$mybb->asset_url}/misc.php?action=help"><img src="{$mybb->asset_url}/flex-slider/images/slides/portal/kitchen_adventurer_caramel.jpg"></a>
             <p class="flex-caption">Adventurer Caramel</p>
                 </li>
         </ul>
		 </div>
     </section>	
  </div>

You would then keep modifying further for your usages...


Best of luck! Happy Editing!    ~ V