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 !

[sulasno]

tagged and thanks

looks interesting

[DjEddie]

thanks for this ...i had a similar one but this looks a lot better ... off to install

[Mr_Running]

I like it.

I have it on the right hand side and it moves up and down depending on the page.
Looks good on the CMS but when I go to the forum it goes to low and can not see.
Goes away on the blog page.
Any suggestions/fix?

Edit: Okay it looks like it has something to do with collapse boxes

Second item:
How to change

A
N
N
0
U
N
C
E
M
E
N
T

To be on the outside of the slide when the slider bar is on the Right side of the screen.
Move "Announcement" as above - letters to the left in the slide.

[DjEddie]

okie havin a lil difficulty gettin this to show.. lil bit of help please

ive put the code into additonal.css
and ive put the code into footer at the top as per instructions ..

sorry if sounding thick.. but what do I do next to make it show?

[Mr_Running]

Try this:
If you have the vb Suite try clicking on the CMS page
May have to clear your CMS cache
and browsers cookies.

Oh and Move "Announcement" part Post #4 - I figured it out = Change the order of the Code = Copy and Paste

Still working on the collapse boxes issue

[DjEddie]

ahh it shows on my CMS page ..but not on my forum.....

ive put the code in header templete and it showed on the forum home page .... what I now need to know is how to make it show INFRONT of any flash objects i have on my forum page..as it shows up behind flash objects atm

thank u

[NTT]

Originally Posted by DjEddie

okie havin a lil difficulty gettin this to show.. lil bit of help please

ive put the code into additonal.css
and ive put the code into footer at the top as per instructions ..

sorry if sounding thick.. but what do I do next to make it show?

Look here :

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

This default code, if you want move slide to right, change it with :

		<tr>
			<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>
			<td width="90%" style="padding-left:50px;">Announcement ! Announcement !<br />Announcement ! Announcement !</br />Announcement ! Announcement !<br />Announcement ! Announcement !</td>
		</tr>

Originally Posted by Mr_Running

Try this:
If you have the vb Suite try clicking on the CMS page
May have to clear your CMS cache
and browsers cookies.

Oh and Move "Announcement" part Post #4 - I figured it out = Change the order of the Code = Copy and Paste

Still working on the collapse boxes issue

Thanks for support, author (Getamped 1404) is having a holiday with his family, so, he not support at this time !

Originally Posted by DjEddie

ahh it shows on my CMS page ..but not on my forum.....

ive put the code in header templete and it showed on the forum home page .... what I now need to know is how to make it show INFRONT of any flash objects i have on my forum page..as it shows up behind flash objects atm

thank u

How do you put that code ? You must do that guide ! I'm not sure for this, put it in header template will be got bug, footer template is a good choose to do !

Good luck !

[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.

[Mr_Running]

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