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 !

[NTT]

Originally Posted by Mr_Running

In the footer template I have found it only works if it placed at the top of the template.

The CMS page works but...

I have collapse boxes in my forum area which may be pushing the slider down and also can not view on the blog page.

This bug when using right sidebar in blog.php.
To fix, you can put this code to bottom of navbar template. But, this isn't good choose ! Waiting from author !

[whitedd]

How to show all 4 examples at once and behave like the demo?

...same question...

...and showing only in CMS...in forum not...

[BCP Hung]

Originally Posted by Mr_Running

In the footer template I have found it only works if it placed at the top of the template.

The CMS page works but...

I have collapse boxes in my forum area which may be pushing the slider down and also can not view on the blog page.

Confirm that bug ! I will fix, but not with this template modification !

Originally Posted by Mr_Running

How to show all 4 examples at once and behave like the demo?

Originally Posted by whitedd

...same question...

...and showing only in CMS...in forum not...

I will make a product to improve this template modification, have a few option, easy to choose and create a notifi with out edit template !

[DjEddie]

Originally Posted by Getamped 1404

Confirm that bug ! I will fix, but not with this template modification !


I will make a product to improve this template modification, have a few option, easy to choose and create a notifi with out edit template !

nice one... ive removed the coding for now and will await the product ..

[sadiq6210]

Great
Thanks

[Kaspersku]

This mod is quite good, but I found it inadequate when I move the mouse out of the notification, it does not auto-hide, but it just hide when I click the mouse outside the notification area, please update soon!
Thanks

[BCP Hung]

Originally Posted by Kaspersku

This mod is quite good, but I found it inadequate when I move the mouse out of the notification, it does not auto-hide, but it just hide when I click the mouse outside the notification area, please update soon!
Thanks

Please re-read first post (modification info post). This is delay time !
----------------------------------------------------------------------
----------------------------------------------------------------------
Khi anh kh?ng post script l?n ITVNN th? em cũng đừng c? t?y tiện m? leech n? về nh? ! ?t nhất cũng n?n t?n trọng !
----------------------------------------------------------------------

Thanks,
Getamped 1404.

[DjEddie]

any idea on when a mod version of this will be available?

Thanks

[BCP Hung]

New version has been updated, fix all current issues !
------
About add-on : I'm having many work to do, so, I don't have enough time for develop, please wait for a week !

Thanks,
Getamped 1404.

[Twikitero]

Great modification,but not woriking for me.
He shows me the next, all out of position.
CLICK HERE TO VIEW THE IMAGE

I'm Follow all the steps correctly.
Would you know it happens?
Again, a modification
thank you very much