hi i found this on a website and i was wondering how can i add it to my phpbb2 forum? http://demo.tutorialzine.com/2015/04/freebie-5-elegant-and-responsive-sidebar-templates/sidebar-collapse.html#

help please

bump can someone please tell me how to use it

bump

Hello,

Here's the code to do that:
HMTL:

Code:

<aside class="sidebar-left-collapse">

      <a href="#" class="company-logo">Logo</a>

      <div class="sidebar-links">

         <div class="link-blue selected">

            <a href="#">
               <i class="fa fa-picture-o"></i>Photography
            </a>

            <ul class="sub-links">
               <li><a href="#">Portraits</a></li>
               <li><a href="#">Landscape</a></li>
               <li><a href="#">Studio shots</a></li>
               <li><a href="#">Macros</a></li>
            </ul>

         </div>

         <div class="link-red">

            <a href="#">
               <i class="fa fa-heart-o"></i>Favorites
            </a>

            <ul class="sub-links">
               <li><a href="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
               <li><a href="#">Link 3</a></li>
               <li><a href="#">Link 4</a></li>
            </ul>

         </div>

         <div class="link-yellow">

            <a href="#">
               <i class="fa fa-keyboard-o"></i>Projects
            </a>

            <ul class="sub-links">
               <li><a href="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
               <li><a href="#">Link 3</a></li>
               <li><a href="#">Link 4</a></li>
            </ul>

         </div>

         <div class="link-green">

            <a href="#">
               <i class="fa fa-map-marker"></i>Places
            </a>

            <ul class="sub-links">
               <li><a href="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
               <li><a href="#">Link 3</a></li>
               <li><a href="#">Link 4</a></li>
            </ul>

         </div>

      </div>

   </aside>

and the CSS:

Code:

/* The left-collapsing sidebar */

.sidebar-left-collapse {
   font-family: Arial, Helvetica, sans-serif;
   position: fixed;
   top: 0;
   left: 0;
   background-color: #292c2f;
   width: 180px;
   height: 100%;
   padding: 20px 0;
}

.sidebar-left-collapse > a {
   display: block;
   text-decoration: none;
   font-family: Cookie, cursive;
   width: 122px;
   height: 122px;
   margin: 0 auto;
   text-align: center;
   color:  #ffffff;
   font-size: 44px;
   font-weight: normal;
   line-height: 2.6;
   border-radius: 50%;
   background-color:  #181a1b;
}

.sidebar-left-collapse .sidebar-links {
   margin: 30px auto;
}

.sidebar-links div > a {
   display: block;
   text-decoration: none;
   margin: 0 auto 5px auto;
   padding: 10px 0 10px 5px;
   background-color: #35393e;
   text-align: left;
   color:  #b3bcc5;
   font-size: 12px;
   font-weight: bold;
   line-height: 2;
   border-left-width: 2px;
   border-left-style: solid;
}

.sidebar-links div.selected > a{
   background-color: #ffffff;
   color: #565d63;
   line-height: 2.3;
   margin: 0;
}

.sidebar-links div > a i.fa {
   position: relative;
   font-size: 20px;
   top: 3px;
   width: 40px;
   text-align: center;
}

.sidebar-links div ul.sub-links {
   max-height: 0;
   overflow: hidden;
   list-style: none;
   padding: 0 0 0 30px;
   color:  #b3bcc5;
   font-size: 12px;
   font-weight: bold;
   line-height: 24px;
   margin: 0;
   transition: 0.4s;
}

.sidebar-links div.selected ul.sub-links {
   max-height: 150px;
   padding: 12px 0 12px 30px;
}

.sidebar-links div .sub-links a {
   text-decoration: none;
   color: #b3bcc5;
   display: block;
   text-align: left;
}

/* Link Colors */

.sidebar-links div.link-blue > a {
   border-color: #487db2;
}

.sidebar-links div.link-blue > a i.fa {
   color: #487db2;
}

.sidebar-links div.link-red > a {
   border-color: #da4545;
}

.sidebar-links div.link-red > a i.fa {
   color: #da4545;
}

.sidebar-links div.link-yellow > a {
   border-color: #d0d237;
}

.sidebar-links div.link-yellow > a i.fa {
   color: #d0d237;
}

.sidebar-links div.link-green > a {
   border-color: #86be2e;
}

.sidebar-links div.link-green > a i.fa {
   color: #86be2e;
}

/* Making the sidebar responsive */

@media (max-width: 900px) {

   .main-content{
      max-width: none;
      padding: 70px 20px;
      margin: 0 0 40px;
   }

   .sidebar-left-collapse {
      width: auto;
      height: auto;
      position: static;
      padding: 20px 0 0;
   }

   .sidebar-left-collapse .sidebar-links {
      text-align: center;
      margin: 20px auto 0;
   }

   .sidebar-links div {
      display: inline-block;
      width: 100px;
   }

   .sidebar-links div > a {
      text-align: center;
      margin: 0;
      padding: 10px 0;
      border-left: none;
      border-top-width: 2px;
      border-top-style: solid;
   }

   .sidebar-links div > a i.fa {
      display: block;
      margin: 0 auto 5px;
   }

   .sidebar-links div ul.sub-links {
      display: none;
   }

   .sidebar-links div.selected .sub-links {
      display: block;
      position: absolute;
      text-align: center;
      width: auto;
      left: 0;
      right: 0;
   }

   .sidebar-links div.selected .sub-links li {
      display: inline-block;
   }

   .sidebar-links div.selected .sub-links a {
      display: inline-block;
      margin-right: 20px;
      font-size: 13px;
      color: #748290;
   }

}

/* Smartphone version */

@media (max-width: 450px) {

   .main-content{
      padding: 90px 20px;
   }

   .sidebar-left-collapse {
      padding: 20px 0;
   }

   .sidebar-left-collapse .sidebar-links {
      text-align: center;
      margin: 20px auto 0;
      position: relative;
   }

   .sidebar-links div {
      display: block;
      width: 240px;
      margin: 0 auto 5px;
   }

   .sidebar-links div > a {
      text-align: left;
      padding: 10px 25px;
      vertical-align: middle;
      border-top: none;
      border-left-width: 2px;
      border-left-style: solid;
   }

   .sidebar-links div > a i.fa {
      display: inline-block;
      font-size: 20px;
      width: 20px;
      margin: 0 20px 0 0;
   }

   .sidebar-links div.selected .sub-links {
      bottom: -90px;
   }

}

/*   Removing margins and paddings from the body, so that
    the sidebar takes the full height of the page */

body {
   margin: 0;
   padding: 0;
}

Place the HMTL code in the template you want and you'll have it.