The Arcive of Official vBulletin Modifications Site.

Vbdock · **Released**: 01-28-2009

Version: 1.0
vB Version: 3.6.x 3.7.x 3.8.x
Released: 03-August-2008

Live demo:
www.parcherock.com

General Description:

Create a menu-style dock for Mac OS X based on CSS and Javascript. (View image)

Installation:

1. Upload via FTP the contents of the folder to upload the directory where you installed vBulletin

2. Go to AdminCP -> Styles & Templates -> Style Manager -> Expand the menu and choose Edit Templates. Edit the navbar template that is inside the Templates Header.
Paste at the end of the template

Code:

<!-- CSS Mac Dock -->
<script type="text/javascript" src="clientscript/jquery.js"></script>
<script type="text/javascript" src="clientscript/interface.js"></script>
<!--[if lt IE 7]>
 <style type="text/css">
 div, img { behavior: url(images/dock/iepngfix.htc) }
 </style>
<![endif]-->
<link href="images/dock/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="$vboptions[bburl]$session[sessionurl_q]"><img src="images/dock/home.png" alt="home" /><span>P?gina Principal</span></a> 
  <a class="dock-item" href="memberlist.php$session[sessionurl_q]"><img src="images/dock/users.png" alt="usuarios" /><span>Miembros</span></a> 
  <a class="dock-item" href="search.php?$session[sessionurl]do=getnew"><img src="images/dock/newpost.png" alt="nuevos mensajes" /><span>Nuevos Mensajes</span></a> 
  <a class="dock-item" href="private.php$session[sessionurl_q]"><img src="images/dock/mp.png" alt="mensajes privados" /><span>Mensajes Privados</span></a> 
  <a class="dock-item" href="usercp.php$session[sessionurl_q]"><img src="images/dock/usercp.png" alt="panel de control" /><span>Panel de Control</span></a> 
  <a class="dock-item" href="calendar.php$session[sessionurl_q]"><img src="images/dock/calendar.png" alt="calendar" /><span>Calendar</span></a> 
  <a class="dock-item" href="faq.php$session[sessionurl_q]"><img src="images/dock/faq.png" alt="FAQ" /><span>FAQ</span></a> 
</div>
</div>
<script type="text/javascript">
 
 $(document).ready(
  function()
  {
   $('#dock').Fisheye(
    {
     maxWidth: 50,
     items: 'a',
     itemsText: 'span',
     container: '.dock-container',
     itemWidth: 40,
     proximity: 90,
     halign : 'center'
    }
   )
  }
 );
</script>
<br /><br /><br /><br />
<!-- / CSS Mac Dock -->

Customize:

1. How to add or remove buttons?
- To add buttons, paste at the end of the template

Before they add:

Code:

<a href= "ENLACE_DEL_BOTON" class= "fisheyeItem"> <img src= "ENLACE_DE_LA_IMAGEN" width= "30" /> <span> TITULO_DEL_BOTON </ span> </ a>

- To remove buttons, simply delete the line referring to the button you want to delete.

2. How to customize the background of the buttons?
- Edit the file. Css is included in the dock folder and look for the following:

Code:

 body 
   ( 
     background: url (images / main-bg.gif); 
     height: 100%; 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 12px; 
   )

Amendment to the line by placing the url of background image to the desired setting or the chosen color in hexadecimal format. For ex. # ff0000; if you want a red background color.
Do the same with the following section:

Code:

  .-dock container 
          ( 
     position: absolute; 
     height: 50px; 
     background: url (images / dock-bg.gif); 
     padding-left: 20px; 
   )

Taurus1 · #52 12-26-2009, 01:32 PM

I love this! Thank you! But in 2 of my styles it causes the whole background of the forum go white. Not inside the forum but the outside areas on the side. How to resolve??

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05258 seconds Memory Usage 2,233KB Queries Executed 19 (?)
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 (4)bbcode_code (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 (2)post_thanks_box (2)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (2)post_thanks_postbit_info (1)postbit (2)postbit_attachment (2)postbit_onlinestatus (2)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 post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername 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:

The Arcive of Official vBulletin Modifications Site.

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