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

Sgt Pepper · #32 01-31-2009, 05:34 AM

Very classy. I love it.

TheLastSuperman · #33 01-31-2009, 05:53 AM

Wonderful! I saw that and fell in love the other day!

thanks!

figu120 · #34 01-31-2009, 09:37 PM

Quote:

Originally Posted by g0dfather1984

I have uninstalled this product and yet it still remains on my forumhome.

Please help.

must remove all the codes and the two header files uploaded to the forum....

figu120 · #35 02-03-2009, 02:23 PM

ok ...
proxima version pronto....

Dr.Viggy · #36 02-06-2009, 10:39 PM

I can't get this to work. I uploaded the dock folder into my images directory. I uploaded the clientscript files into the clientscript

i went into the admincp > styles & templates > style manager
selected the style and chose "Edit templates" from the drop down. went to navigatin / breadcrumb templates and then the navigation template. I copied and pasted the code at the very bottom and saved.

now i don't see my forums at all or the dock.

nothing is there besides the active users box.

any help?

EDIT: I deleted the code and pasted it back in while my wife watched over my shoulder and it worked. So the hack is in place perfectly, looks great and she's gloating for knowing nothing about this yet she made it work somehow.

figu120 · #37 02-08-2009, 10:59 PM

<div align="left">ok perfect I am glad that it works because the explanation is to paste in the header for a perfect operation ....</div>

TheLastSuperman · #38 02-08-2009, 11:10 PM

If you tinker w/ the settings in the files i.e. the CSS or for some the javascript files you can achieve different results i.e. for me I found that using larger icons then specifying the sizes in halves of the original value so for example...

In the CSS file my code is:

Code:

<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock').Fisheye(
				{
					maxWidth: 128,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container',
					itemWidth: 128,
					proximity: 256,
					halign : 'center'
				}
			)
		}
	);

</script>

Now, that makes the icons larger as well but you can tinker to make them all display proportionally correct.... another note is you don't HAVE to use bigger icons but resizing them correctly depending on the values you use in the CSS greatly helps them look more clear and crisp w/o the edges being so gaudy!

S-MAN

figu120 · #39 02-08-2009, 11:37 PM

Quote:

Originally Posted by TheLastSuperman

If you tinker w/ the settings in the files i.e. the CSS or for some the javascript files you can achieve different results i.e. for me I found that using larger icons then specifying the sizes in halves of the original value so for example...

In the CSS file my code is:

Now, that makes the icons larger as well but you can tinker to make them all display proportionally correct.... another note is you don't HAVE to use bigger icons but resizing them correctly depending on the values you use in the CSS greatly helps them look more clear and crisp w/o the edges being so gaudy!

S-MAN

thank you very much for your input ..
Because it is very good to know these inputs which can take into account for an update ...

Vicros · #40 02-24-2009, 01:01 PM

I love this mod, but i am also getting a vbadvanced cmps problem as well..is there a known fix for it?

figu120 · #41 02-24-2009, 08:26 PM

Quote:

Originally Posted by Vicros

I love this mod, but i am also getting a vbadvanced cmps problem as well..is there a known fix for it?

Could copy the problem with this mod in your Vbadvanced

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.09110 seconds Memory Usage 2,339KB 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 (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 (4)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!