PDA

View Full Version : Forum Home Enhancements - Vbdock


figu120
01-28-2009, 10:00 PM
Version: 1.0
vB Version: 3.6.x 3.7.x 3.8.x
Released: 03-August-2008


Live demo:
www.parcherock.com (http://www.parcherock.com)

General Description:

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

https://vborg.vbsupport.ru/attachment.php?attachmentid=93678&stc=1&d=1233268631

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

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

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

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:

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

figu120
01-29-2009, 08:44 PM
****Reserve****

zefyx
01-29-2009, 08:57 PM
Won't fit with my forum colors, very nice though!

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

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

Before they add:

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

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:

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

Slyou
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
01-29-2009, 09:14 PM
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
01-29-2009, 09:22 PM
That is so lovely, defenitly tagged for a mac themed mod. lovely..

5 stars.

figu120
01-29-2009, 09:26 PM
thank you very much for the support ...

NAZIA
01-29-2009, 09:53 PM
Great Addition..

g0dfather1984
01-29-2009, 10:29 PM
Great feature.

Loving it.

Lift for Life
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
01-30-2009, 04:08 AM
is it gonna increase the page size ?
nice mod tho...thnx

WarLion
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
01-30-2009, 08:15 AM
very very nice
thanks;)

adhmwagde
01-30-2009, 11:51 AM
good work man ... installed :)

figu120
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
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
01-30-2009, 01:50 PM
if you can put this code below the header editing codes wp

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

akee
01-30-2009, 03:54 PM
that's nice mod, but doesn't work correctly with vbadvenced
here is the screenshot

can you fix it?

Baf_Jams
01-30-2009, 05:41 PM
Great Mod Installed :)
one prob
I'm struggling on changing the background colours to suit

It works great in white Default skin and desert green but when i use fusion(gray) I get a band of white

Ive tried editing the files but after an hour have given up
If somone can explain a little more clearly then thanks :)
I' sure the colour that i need is # 333333
Jams

www.bafsquad.com

figu120
01-30-2009, 05:46 PM
that's nice mod, but doesn't work correctly with vbadvenced
here is the screenshot

can you fix it?

Not bug is for

pacht forum url....:D:D:D

akee
01-30-2009, 06:02 PM
pacht forum url....:D:D:D

thanks the answers.
where patching i forum url?

joopster
01-30-2009, 06:33 PM
are you the creator of the original fisheye menu? It looks like in the script you are calling fisheye which if you didn't create I hope you got permission of the owner to repackage this for vb 8.

figu120
01-30-2009, 09:25 PM
are you the creator of the original fisheye menu? It looks like in the script you are calling fisheye which if you didn't create I hope you got permission of the owner to repackage this for vb 8.

I am not the creator worse if I leave because what I use and build on this to create a new one ....

desconexion
01-30-2009, 09:55 PM
Very nice mod.

Thanks

Muy buen mod, gracias colega

figu120
01-30-2009, 09:58 PM
con mucho gusto... fue un placer

g0dfather1984
01-30-2009, 11:44 PM
I have uninstalled this product and yet it still remains on my forumhome.

Please help.

AzaDiyaR
01-31-2009, 12:07 AM
thank you so much very nice mod.. i liked ;)

Sgt Pepper
01-31-2009, 05:34 AM
Very classy. I love it.

TheLastSuperman
01-31-2009, 05:53 AM
Wonderful! I saw that and fell in love the other day!

thanks!

figu120
01-31-2009, 09:37 PM
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
02-03-2009, 02:23 PM
ok ...
proxima version pronto....

Dr.Viggy
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
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
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:

<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
02-08-2009, 11:37 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:


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
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
02-24-2009, 08:26 PM
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

Vicros
02-25-2009, 05:37 PM
hmm ok thanks..will try that.

dxflw
02-28-2009, 11:33 PM
Nice code and installed.:)

But i have a little problem here with the style CSS Selector: body.
I dont see the body background

And one think more:
I have added the code in the navbar template and works okay.
I want now to put the code in vbadvance in the module but the code looks like not working in the modules.
Is there any way to make it working in the modules?

figu120
03-01-2009, 05:25 PM
Nice code and installed.:)

But i have a little problem here with the style CSS Selector: body.
I dont see the body background

And one think more:
I have added the code in the navbar template and works okay.
I want now to put the code in vbadvance in the module but the code looks like not working in the modules.
Is there any way to make it working in the modules?

try pasting the CSS code in the template header and remove it from the navbar template

dxflw
03-02-2009, 08:29 AM
try pasting the CSS code in the template header and remove it from the navbar template

The same css problem.
And how about the vbadvance?

figu120
03-03-2009, 09:11 PM
Error that leaves you with exactly the css, so poderte work better ...

dxflw
03-07-2009, 05:36 PM
How do i add a flash object?

whitetigergrowl
03-18-2009, 02:43 AM
Nice mod. But I noticed on Firefox that when I load the page, the images appear full size THEN shrink. It does this on every forum page you visit too. Its an annoying delay. Is there a way to fix that?

figu120
04-02-2009, 11:40 PM
How do i add a flash object?

Is not yet that no official of the effect. Js but it works if I try and show them



Nice mod. But I noticed on Firefox that when I load the page, the images appear full size THEN shrink. It does this on every forum page you visit too. Its an annoying delay. Is there a way to fix that?

not at the moment I have not found the way to fix this error ...

fahl
04-08-2009, 06:07 PM
Works well with firefox,but fisheye not working in Explorer.

figu120
12-13-2009, 06:21 PM
Thanks for install plugin

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