vb.org Archive
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 3.8 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=236)
-   -   Forum Home Enhancements - Dock in Rock !!! (https://vborg.vbsupport.ru/showthread.php?t=208613)

kawe 03-16-2009 10:00 PM
Dock in Rock !!!
 
1 Attachment(s)
Simple mod.
From http://www.ndesign-studio.com/blog/mac/css-dock-menu
1. Go to navbar template
Find :
PHP Code:
<!-- breadcrumb, login, pm info --> 
add before :
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Mac Dock</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<!--[if lt IE 7]>
 <style type="text/css">
 div, img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a> 
  <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a> 
  <a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> 
  <a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a> 
  <a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a> 
  <a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a> 
  <a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a> 
  <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</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>
</body>
</html> 
2. upload all file under " upload " folder to ur forum roots
3. For more icons here http://www.iconspedia.com/

u can add/change icon and link with :
PHP Code:
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a> 
remember please click install

OcR Envy 03-17-2009 04:23 PM
No credit to the origonal author? Shame on you.

http://www.ndesign-studio.com/blog/mac/css-dock-menu

sensimilla 03-17-2009 04:28 PM
Nice hack, and thanks for the icons site :)

DjEddie 03-17-2009 05:41 PM
installed into another navbar mod.. works perfect... nice one for this :)

Jasem 03-17-2009 06:14 PM
Great, thank you!

Installed

schlottkej 03-17-2009 06:32 PM
I had this on one of my test sites for a while (few months, about a year ago).. it won't be a solid design because when someone wants to click a regular navbar link they begin to make the hover flicker.. its pretty unprofessional...

Cool idea, but it needs to be added to a div below the forum or something.

TheLastSuperman 03-17-2009 09:14 PM
Quote:
Originally Posted by OcR Envy (Post 1770528)
No credit to the origonal author? Shame on you.

http://www.ndesign-studio.com/blog/mac/css-dock-menu
I found mine here..

https://vborg.vbsupport.ru/showthread.php?t=203535

Use it & love it plus tweaking the code makes for good results!

TilkiBey 03-18-2009 01:09 PM
good job man ;)
maybe i can add to my navbar (tilkibey navbar) ;)

K4GAP 03-18-2009 06:25 PM
When I first installed this it made my forums disappear. So I stripped the suggested code down to...
Code:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<!--[if lt IE 7]>
 <style type="text/css">
 div, img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
  <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a>
  <a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
  <a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a>
  <a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a>
  <a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a>
  <a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a>
  <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</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>
After doing this everything worked great and I got my forums back!

marshal_ramdev 03-19-2009 04:46 PM
thank you


All times are GMT. The time now is 09:52 PM.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01832 seconds
  • Memory Usage 1,775KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_code_printable
  • (3)bbcode_php_printable
  • (1)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete