Miscellaneous Hacks - Simple Slide-in Custom Board via CSS

About this modification :

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

Browser support (full css properties) :

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

Install :

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 !
   

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

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

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

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

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

        add below with each :
        

            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 :
     

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

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

         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 :
     

         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 :
     

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

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

     change with your number !

[victorvu]

Hi:

I see in your demo page with "bộ g? Việt", please share code and how to set it. C?m ơn nhiều.

Victor:up:

[FReeSTER]

How to make this left on the middle?

Can you add and option to auto-show the box and add an X to close it down?

[BCP Hung]

Originally Posted by FReeSTER

How to make this left on the middle?

Can you add and option to auto-show the box and add an X to close it down?

This modification built with CSS only. With your request, I can think about jQuery plugin for this.

[FReeSTER]

Well for now I think I have something for this one... If you make the other one, well I guess I be jumping into that van wagon. lol

Thanks mate this mod I like

[grey_goose]

Very nice -- I used several of these with different positions to give quick access to info.

[sivaganeshk]

No demo or screenshot ??
Strange that no one requested the developer :P