vBulletin LTS

This modification allow you make a simple slide-in custom board via CSS. You can create an announcement, warning, advertiment or forum directory (menu).

: margin (with icon), transition, transition-delay.

1. Download attachment file, unzip, and upload images folder via FTP.
2. Insert CSS code to additional.css template :
   AdminCP -> Styles & Templates -> Style Manager -> Edit Templates -> CSS Templates -> additional.css : insert at top or bottom of this template !
   
   Code:

   /* Slide-in Custom Board - Getamped 1404 */
   #infoPanel  {
       position: fixed;
       background-color: #fff;
       width: 330px;
       height: auto;
       padding: 4px 4px 4px 4px;
       font-size: 12px;
       font-weight: 700;
       color: #000;
       -moz-box-shadow: 0 0 20px #111;
       -webkit-box-shadow: 0 0 20px #111;
       box-shadow: 0 0 20px #111;
       -moz-border-radius: 10px;
       -webkit-border-radius: 10px;
       border-radius: 10px;
       opacity: 0.7;
       -moz-opacity:0.7;
       -khtml-opacity: 0.7;
       filter: alpha(opacity=70);
       -moz-transition: all 4s ease;
       -webkit-transition: all 4s ease;
       -o-transition: all 4s ease;
       transition: all 4s ease;
       -moz-transition-delay: 2s;
       -webkit-transition-delay: 2s;
       -o-transition-delay: 2s;
       transition-delay: 2s;
       left: -300px;
       z-index: 9999;
   }
   #infoPanel:hover {
       -moz-transition: all 0.5s ease;
       -webkit-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
       transition: all 0.5s ease;
       opacity: 0.9;
       -moz-opacity:0.9;
       -khtml-opacity: 0.9;
       filter: alpha(opacity=90);
       left: 10px;
   }
   img.infoIcon {
       float: right;
       margin: -20px -20px 0px 0px;
   }

3. Insert HTML code to navbar template :
   ... -> Edit Templates -> Navigation / Breadcrumb Templates -> navbar : insert to bottom of this template !
   
   HTML Code:

   <div id="infoPanel"> <!-- Slide-in Custom Board - Getamped 1404 -->
       <img src="images/misc/information.png" class="infoIcon" />
       <table width="100%">
           <tr>
               <td width="90%" style="padding-left:50px;">Announcement ! Announcement !<br />Announcement ! Announcement !</br />Announcement ! Announcement !<br />Announcement ! Announcement !</td>
               <td style="text-align:center;" width="10%">A<br>N<br>N<br>O<br>U<br>N<br>C<br>E<br>M<br>E<br>N<br>T</td>
           </tr>
       </table>
   </div>

4. Custom for yourself !
   Using your CSS knowledge to do ! Quick guide :
   • Change your location
     1. Show at right :
        In CSS code, search for :
        
        Code:

            left: -300px;
        ... and ...
            left: 10px;

        change "left" to "right", and custom your pixel !
     2. Show at left corner :
        In CSS code, search for :
        
        Code:

            left: -300px;
        ... and ...
            left: 10px;

        add below with each :
        
        Code:

            bottom: -160px;
        ... and ...
            bottom: 10px;

     3. Show at right corner : same left corner, change "left" to "right" !
   • Change your icon : I provide 4 icons in .zip packed to upload, see and choose.
     In HTML code, search for :
     
     HTML Code:

     <img src="images/misc/information.png" class="infoIcon" />

     Change your icon name !
   • Change your delay time : time when mouse un-hover and slide-in board will be collapse.
     In CSS code, search for :
     
     Code:

         -moz-transition-delay: 2s;
         -webkit-transition-delay: 2s;
         -o-transition-delay: 2s;
         transition-delay: 2s;

     Change your number with "2", unit is second.
   • Change your width & height : size of slide-in custom board, recommends using the default size if you do not add much to the content.
     In CSS code, search for :
     
     Code:

         width: 330px;
         height: auto;

     Change it for you !
   • Change your background color : change the background color to match your forum style.
     In CSS code, search for :
     
     Code:

         background-color: #fff;

     Get more color code at here : http://w3schools.com/html/html_colornames.asp
   • Change your transition time : change your time when mouse hover and un-hover.
     In CSS code, search for :
     
     Code:

         -moz-transition: all 0.5s ease;
         -webkit-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
         transition: all 0.5s ease;

     and, when mouse un-hover :
     
     Code:

         -moz-transition: all 4s ease;
         -webkit-transition: all 4s ease;
         -o-transition: all 4s ease;
         transition: all 4s ease;

     change with your number !