The Arcive of 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; 
   )

figu120 · #2 01-29-2009, 08:44 PM

****Reserve****

zefyx · #3 01-29-2009, 08:57 PM

Won't fit with my forum colors, very nice though!

figu120 · #4 01-29-2009, 09:09 PM

Only changes the background color for your style

PERSONALIZE:

- How to add or remove buttons?

- To add buttons, find the following lines in the navbar template:

Quote:

</ Div>
</ Div>
</ Div>

Before they add:

Quote:

<a href="LINK" class="fisheyeItem"> <img src="URL_IMAGEN" width="30" /> <span> TITLE_BOTOM </ span> </ a>

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

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

Quote:

.-Dock container
(
Position: absolute;
Height: 50px;
Background: url (images / dock-bg.gif);
Padding-left: 20px;
)

Slyou · #5 01-29-2009, 09:10 PM

i have to do something with the clients scripts ? i uploaded files , modified template and it doesnt work

figu120 · #6 01-29-2009, 09:14 PM

Quote:

Originally Posted by Slyou

i have to do something with the clients scripts ? i uploaded files , modified template and it doesnt work

should not do any work ... complex

just change the title of the buttons and URL if you add new images ...

Vaupell · #7 01-29-2009, 09:22 PM

That is so lovely, defenitly tagged for a mac themed mod. lovely..

5 stars.

figu120 · #8 01-29-2009, 09:26 PM

thank you very much for the support ...

NAZIA · #9 01-29-2009, 09:53 PM

Great Addition..

g0dfather1984 · #10 01-29-2009, 10:29 PM

Great feature.

Loving it.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.08517 seconds Memory Usage 4,796KB Queries Executed 24 (?)
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 (4)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 (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (9)postbit (2)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_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 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 postbit_factory postbit_display_start 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: