The Arcive of Official vBulletin Modifications Site.

Simple Slide-in Custom Board via CSS · **Released**: 06-15-2011

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 :

Download attachment file, unzip, and upload images folder via FTP.

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

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>

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 !

sulasno · #2 06-16-2011, 03:57 PM

tagged and thanks

looks interesting

DjEddie · #3 06-16-2011, 07:46 PM

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

Mr_Running · #4 06-16-2011, 07:58 PM

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 · #5 06-16-2011, 09:33 PM

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 · #6 06-16-2011, 09:48 PM

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 · #7 06-16-2011, 10:18 PM

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 · #8 06-17-2011, 05:14 AM

Quote:

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 :

Code:

<tr> <td width="90%" style="padding-left:50px;">Announcement ! Announcement ! Announcement ! Announcement !Announcement ! Announcement ! Announcement ! Announcement !</td> <td style="text-align:center;" width="10%">A N N O U N C E M E N T</td> </tr>

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

Code:

<tr> <td style="text-align:center;" width="10%">A N N O U N C E M E N T</td> <td width="90%" style="padding-left:50px;">Announcement ! Announcement ! Announcement ! Announcement !Announcement ! Announcement ! Announcement ! Announcement !</td> </tr>

Quote:

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 !

Quote:

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 · #9 06-17-2011, 09:55 AM

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 · #10 06-17-2011, 10:12 AM

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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05001 seconds Memory Usage 2,361KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (11)bbcode_code (2)bbcode_html (3)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (10)post_thanks_box (7)post_thanks_box_bit (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (2)post_thanks_postbit (10)post_thanks_postbit_info (9)postbit (1)postbit_attachment (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

4 благодарности(ей) от:
eTiKeT?, HMBeaty, lomalove, NTT

3 благодарности(ей) от:
Polis35, sisterhood, stator

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!