vb.org Archive - Site navbar overlayed on background image

How to overlay a site navigation bar over a background image

I am relatively new to vBulletin, and have observed that most vBulletin systems seem to rely on the vBulletin navigation bar for site navigation, while some introduce an additional site navigation bar and place this well above all of the vBulletin content. In my own case, I had a requirement to place a navbar on top of a background image, as I was working with a designer who had an extremely specific design requirement. My first thought was to use an image map relying on a graphical navbar but this was unsuccessful (you cannot imagemap a background image). After experimentation, I found a way to use DIV to get around this problem. Here are the steps I took.

Please test this out on a test site first

Step 1. Backup your database. Note all of your Main CSS settiings and save a copy of your header template somewhere.

Step 2. Remove all values for "Background" in CSS
-- Go to admincp -> main css -> delete contents of "background" fields

Step 3. Enter the following into "Background" for main css -> body
-- "#000000 url(images/misc/bkg_image.jpg); background-repeat: no-repeat;
-- (this assumes a black background and a no-repeat requirement for your image)

Step 4. Determine the placement of your new site navbar
-- This will be determined by your design specifications. It is recommended to temporarily include an image-based navbar in your background image first, calculate the exact pixel requirements for "Top", "Left", "Height" and "Width". You can remove the navbar layer from the background image once you have the links all lined up correctly.

Step 5. Add DIV code to header template
-- Go to admincp -> templates -> header and add the following code:

(be sure to replace the portions in green with your own requirements)

Code:

<!-- DIV NAVBAR -->

<div

   style="

    font-size: 12px;

   top: 133px;

   left: 590px;

   width: 33px;

   height: 17px;

   position: absolute;

   z-index: 4; 

   visibility: visible;">

<a href="../linkone.html"><font color="#FFFFFF">site link one</font></a>

</div>

<div

   style="

    font-size: 12px;

   top: 133px;

   left: 638px;

   width: 40px;

   height: 17;

   position: absolute;

   z-index: 4; 

   visibility: visible;">

<a href="../linktwo.html"><font color="#FFFFFF">site link two</font></a>

</div>

<div

   style="

    font-size: 12px;

   top: 133px; 

   left: 692px; 

   width: 33pxpx;

   height: 17px;

   position: absolute;

   z-index: 3; 

   visibility: visible;">

<a href="../linkthree.html"><font color="#FFFFFF">site link three</font></a>

</div>

<div

   style="

    font-size: 12px;

   top: 133px; 

   left: 762px;

   width: 33px;

   height: 17px;

   position: absolute;

   z-index: 2; 

   visibility: visible;">

<a href="../linkfour.html"><font color="#FFA442">site link four</font></a>

</div>

<div

   style="

    font-size: 12px;

   top: 133px; 

   left: 812px;

   width: 33px;

   height: 17px;

   position: absolute;

   z-index: 1; 

   visibility: visible;">

<a href="../linkfive.html"><font color="#FFFFFF">site link five</font></a>

</div>

<!--/DIV NAVBAR -->

Step 6. Test your links placement (remember the areas in green, above). If they are not lining up with your specification, tweak the pixel values in each DIV above in the header template.

Step 7. If there is still an image-based navbar layer, edit the background image and remove the navbar layer you were using as a guide.

That should be it!

Optional Steps:

Here is something to consider if your design specs are extremely picky about bkgd-image/forum interaction.

In my own situation, my designer had never designed for vBulletin before, and neither of us were aware at first of some of the basic technical limitations. During development, it dawned on me that to put it simply, not all background images are easy/possible to integrate well with vBulletin.

Test out my link under Internet Explorer, and you will find that when you drag the right-hand edge of the browser window from right to left, the forum content will move to overlap with the image. At this time, I do not know of a way to get around this due to IE's limitations. However, it is possible to introduce a CSS element in Main CSS -> Body to lock that left-hand margin space down for Firefox/Opera browsers:

Code:

min-width: 1100px;

There may be other tricks, too of which I am not yet aware. Please post here and PM me if you find a better solution, and best of luck to you!

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01152 seconds Memory Usage 1,743KB 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 (2)bbcode_code_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
Messages: