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

Lift for Life · #12 01-30-2009, 12:17 AM

I'm playing with it. Have tired in a few different skins. Its a nice effect but a bit redundant because it resides under the standard menu. Nice work regardless.

Lift

tafreeh · #13 01-30-2009, 04:08 AM

is it gonna increase the page size ?
nice mod tho...thnx

WarLion · #14 01-30-2009, 05:52 AM

y pensar que dedique horas haciendo lo mismo en flash jajaja gracias

translation
and to think that dedicate hours doing the same thing in flash jajaja thanks

DJTREX · #15 01-30-2009, 08:15 AM

very very nice
thanks

adhmwagde · #16 01-30-2009, 11:51 AM

good work man ... installed

figu120 · #17 01-30-2009, 01:17 PM

Spanish:
Gracias a todos ustedes...
Pues viendo la buena acogida mirare si hago una nueva versi?n que trabaje con db para no tener que agregar los botones manualmente

English:
Thank you all ...
Well, seeing the good reception when I watch a new version that works with db to avoid having to manually add the buttons

wicked80 · #18 01-30-2009, 01:37 PM

Hi,
Is there anyway to make this mod work on a non-vb page. I am using wordpress as frontend of my site and I was just wondering, if I can display this on my wordpress homepage.

Any pointers would be appreciated.
Thanks

figu120 · #19 01-30-2009, 01:50 PM

if you can put this code below the header editing codes wp

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

wicked80 · #20 01-30-2009, 02:08 PM

Thanks for your quick reply but I see some vbulletin tags in that code i.e. $vboptions[bburl], so how would these tags work under wordpress????

figu120 · #21 01-30-2009, 02:11 PM

that label is only used to go to the homepage if there is need to change the url of your home page ...
But do not worry if you have cookies will work perfectly well placed ...

but let me know or look we can do.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05214 seconds Memory Usage 2,337KB 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 (5)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 (3)pagenav_pagelink (11)post_thanks_box (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (11)post_thanks_postbit_info (10)postbit (2)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_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!