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 !

BCP Hung · #22 07-02-2011, 12:31 PM

Are you get correct ID in CSS with HTML code ?
Show me your code please !

Twikitero · #23 07-02-2011, 09:32 PM

The html code I use is this

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>

The code for the CSS I use is this.

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

The ID of the HTML code that calls the CSS is correct

Thanks for your reply

Twikitero · #24 07-02-2011, 09:52 PM

Sorry for my double reply.

Only that which is already solved.

The problem was placed at the end of all the code in the template html NABV.
There had to insert into all if not below

Code:

{vb:raw ad_location.global_below_navbar}

Thanks great modification.
Marked as installed

BCP Hung · #25 07-03-2011, 10:28 AM

Quote:

Originally Posted by Twikitero

Sorry for my double reply.

Only that which is already solved.

The problem was placed at the end of all the code in the template html NABV.
There had to insert into all if not below

Code:

{vb:raw ad_location.global_below_navbar}

Thanks great modification.
Marked as installed

I see, you're welcome !
You can force it into any forum you want, I will update soon !

Merenguista · #26 07-03-2011, 11:05 AM

Great job .. Can i integrate the Facebook application "Like Box"
in this HTML code ?

I would be happy if you help me to integrate it ! Thanks

BCP Hung · #27 07-03-2011, 12:45 PM

Quote:

Originally Posted by Merenguista

Great job .. Can i integrate the Facebook application "Like Box"
in this HTML code ?

I would be happy if you help me to integrate it ! Thanks

Yes, you can, replace this content with your "Like Box" :

HTML Code:

<td width="90%" style="padding-left:50px;">Announcement ! Announcement !<br />Announcement ! Announcement !</br />Announcement ! Announcement !<br />Announcement ! Announcement !</td>

But, I don't try it !

DjEddie · #28 08-02-2011, 08:55 PM

Quote:

Originally Posted by Getamped 1404

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.

Any update on when a MOD Add on version is being made? . understand ur busy with work ..just askin

BCP Hung · #29 08-03-2011, 01:33 AM

Quote:

Originally Posted by DjEddie

Any update on when a MOD Add on version is being made? . understand ur busy with work ..just askin

I will use this template for new version of ITVNN : News Mod, and called with new name : G.1404 : News & Announcements.

d19rnyxx · #30 08-06-2011, 09:12 PM

I cant fix this issue I have:

The box is always in the bottom left, all the codes are the same as above, i have made no changes but :

HTML Code:

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

To:

HTML Code:

<td style="text-align:center;" width="10%">S<br>e<br>c<br>t<br>i<br>o<br>n<br>s</td>
        </tr>

you can view it here: http://www.fivestargamerz.com/forum.php

BCP Hung · #31 08-09-2011, 09:09 AM

Quote:

Originally Posted by d19rnyxx

I cant fix this issue I have...The box is always in the bottom left, all the codes are the same as above, i have made no changes...

I make default location in bottom-left, if you want to make it difference, you can use step 4 in Install process.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05796 seconds Memory Usage 2,373KB Queries Executed 28 (?)
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 (12)bbcode_code (6)bbcode_html (5)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 (3)pagenav_pagelink (11)post_thanks_box (5)post_thanks_box_bit (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (2)post_thanks_postbit (11)post_thanks_postbit_info (10)postbit (1)postbit_attachment (11)postbit_onlinestatus (11)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

Благодарность от:
BCP Hung

The Arcive of Official vBulletin Modifications Site.

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