The Arcive of Official vBulletin Modifications Site.

MrHorror · #1 06-07-2012, 12:39 PM

Hi, we're having troubles adding a set of Black tabs to the top of our forum in the header section without the board stretching out all the way. Here is our vb4 header code...

Code:

<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
 <vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div></vb:if>
 <div id="toplinks" class="toplinks">
  <vb:if condition="$show['member']">
   <ul class="isuser">
    <li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
    <vb:if condition="$show['registerbutton']">
    <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
    </vb:if>
    <li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase user_control_panel}</a></li>
    <li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
    <vb:if condition="$notifications_total">
    <li class="popupmenu notifications" id="notifications">
     <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
     <ul class="popupbody popuphover">
      {vb:raw notifications_menubits}
     </ul>
    </li>
    <vb:else />
    <li class="popupmenu nonotifications" id="nonotifications">
     <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
     <ul class="popupbody popuphover">
      <li>{vb:rawphrase no_new_messages}</li>
      <vb:if condition="$show['pmmainlink']"><li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li></vb:if>
     </ul>
    </li>
    </vb:if>
    <li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
    <vb:if condition="$vboptions['enablefacebookconnect']">
     {vb:raw facebook_header}
    </vb:if>
   </ul>
            {vb:raw template_hook.header_userinfo}
   <vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
  <vb:else />
   <ul class="nouser">
   <vb:if condition="$show['registerbutton']">
    <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
   </vb:if>
    <li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>
    <li>
   <script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
   <form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
    <fieldset id="logindetails" class="logindetails">
     <div>
      <div>
     <input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />
     <input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
     <input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
     <input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
      </div>
     </div>
    </fieldset>
    <div id="remember" class="remember">
     <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>
    </div>
    <input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
    <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
    <input type="hidden" name="do" value="login" />
    <input type="hidden" name="vb_login_md5password" />
    <input type="hidden" name="vb_login_md5password_utf" />
   </form>
   <script type="text/javascript">
   YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
   YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
   vB_XHTML_Ready.subscribe(function()
   {
   //
    YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
    YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
    YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
    YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
   });
   
   function navbar_username_focus(e)
   {
   //
    var textbox = YAHOO.util.Event.getTarget(e);
    if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
    {
    //
     textbox.value='';
     textbox.style.color='{vb:stylevar input_color}';
    }
   }
   function navbar_username_blur(e)
   {
   //
    var textbox = YAHOO.util.Event.getTarget(e);
    if (textbox.value == '')
    {
    //
     textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
     textbox.style.color='{vb:stylevar shade_color}';
    }
   }
   
   function navbar_password_hint(e)
   {
   //
    var textbox = YAHOO.util.Event.getTarget(e);
    
    YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
    YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
    YAHOO.util.Dom.get('navbar_password').focus();
   }
   function navbar_password(e)
   {
   //
    var textbox = YAHOO.util.Event.getTarget(e);
    
    if (textbox.value == '')
    {
     YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
     YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
    }
   }
   </script>
    </li>
    <vb:if condition="$vboptions['enablefacebookconnect']">
     {vb:raw facebook_header}
    </vb:if>
   </ul>
  </vb:if>
 </div>
 <div class="ad_global_header">
  {vb:raw ad_location.global_header1}
  {vb:raw ad_location.global_header2}
 </div>
 <hr />
</div>

Now here is the full html for the set of Black tabs...

Code:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                        <title>Black Menu Tabs</title>
                        <style type="text/css">
<!--
    body {
        margin:0;
        padding:0;
        font: bold 11px/1.5em Verdana;
}
h2 {
        font: bold 17px;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}
 
    #tabsH {
      font-family: arial;
      font-size: 14px;
      float:left;
      width:100%;
      background:#000;
      font-size:93%;
      line-height:normal;
      }
    #tabsH ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
      }
    #tabsH li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsH a {
      font-family: arial;
      font-size: 14px;
      float:left;
      background:url("/images2/misc/tableftH.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsH a span {
      font-family: arial;
      font-size: 14px;
      float:left;
      display:block;
      background:url("/images2/misc/tabrightH.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#fff;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsH a span {float:none;}
    /* End IE5-Mac hack */
    #tabsH a:hover span {
      color:#FFF;
      }
    #tabsH a:hover span { color:#cc0000;
      background-position:0% -42px;
      }
    #tabsH a:hover span {
      background-position:100% -42px;
      }
        #tabsH #current a {
                background-position:0% -42px;
        }
        #tabsH #current a span {
                background-position:100% -42px;
        }
-->
</style>
                </head>
                <body>
                        
                        <div id="tabsH">
                                <ul>
                                        <!-- CSS Tabs -->
<li id="current"><a href="http://www.hmandsforums.oliwy.net/forums/portal.php"><span><b>Forums</b></span></a></li>
<li><a href="http://ottofries.proboards34.com/index.cgi?board=News"><span><b>News</b></span></a></li>
<li><a href="http://www3.webng.com/horrormoviesandstuff/Contests.html"><span><b>Contests</b></span></a></li>
<li><a href="http://www3.webng.com/horrormoviesandstuff/interviews.html"><span><b>Interviews</b></span></a></li>
<li><a href="http://ottofries.proboards34.com/index.cgi?board=Movies"><span><b>Upcoming Horror Movies</b></span></a></li>
<li><a href="http://www3.webng.com/horrormoviesandstuff/evilviewmedia.html"><span><b>Evil View</b></span></a></li>
<li><a href="http://www3.webng.com/horrormoviesandstuff/horrorrelatedarticles.html"><span><b>Articles</b></span></a></li>
<li><a href="http://www3.webng.com/horrormoviesandstuff/HorrorShop.html"><span><b>Shop Horror</b></span></a></li>
<li><a href="http://www3.webng.com/horrormoviesandstuff/reviews.html"><span><b>Reviews</b></span></a></li>
<li><a href="http://www3.webng.com/horrormoviesandstuff/hmandsgames.html"><span><b>Games</b></span></a></li>
<li><a href="mailto:MrHorror2008@gmail.com"><span><b>Contact</b></span></a></li>
<li><a href="http://www3.webng.com/horrormoviesandstuff/adpage.html"><span><b>Advertise</b></span></a></li>
<li><a href="http://twitter.com/MrHorror"><img border="0" src="http://i51.tinypic.com/30d81li.jpg"<span>Follow us!</span></a></li>
<li><a href="http://www.facebook.com/pages/Horror-Movies-stuffcom/20347493635"><img border="0" src="http://i56.tinypic.com/dln5z6.jpg"<span>Facebook Us!</span></a></li>
<li><a href="http://www3.webng.com/horrormoviesandstuff/dvdreleases.html"><span><b>DVD Releases</b></span></a></li>
<li><a href="http://www3.webng.com/horrormoviesandstuff/MrHoRrOrs2cents.html"><span><b>2 Cents</b></span></a></li>
                                </ul>
                        </div>
<br><br>

Here's a google cache link to our forum in vb3 format...Google Cache Link
. And here's a link to our new vb4 upgrade...VB4 version. Our forum is currenty turned off but you can still see the necessary header part.

^We managed to simply place the tabs html into our header in vb3 last summer and had no problems with board width whatsoever. And as you can see in this link Here The top of the board was expanded as expected, but the body and vbulletin content remained unchanged and in proper width. But on our vb4 board it seems to stretch the board out heavily when placed into the header section of ALL STYLE OPTIONS. To the point where you can't even see the gray background. Can anyone help with this issue? We've tried editing the board width but that simply makes the tab rows narrower but not the board and content itself.

Lynne · #2 06-07-2012, 03:22 PM

Your vB4 board looks like a normal default vb4 board. I don't see any added header tabs at all.

MrHorror · #3 06-07-2012, 07:07 PM

Quote:

Originally Posted by Lynne

Your vB4 board looks like a normal default vb4 board. I don't see any added header tabs at all.

That's because I removed them until I get the proper help with this issue silly!

Lynne · #4 06-07-2012, 10:07 PM

Well, it's impossible for us to help when we can't see the issue. You may create a second style and have us check it out there.

MrHorror · #5 06-08-2012, 06:15 PM

Hello. I managed to solve this issue by adding some extra percentage coding to my header. Thanks!

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.03966 seconds Memory Usage 2,222KB Queries Executed 13 (?)
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 (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (2)bbcode_code (1)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (5)post_thanks_box (5)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (5)post_thanks_postbit_info (5)postbit (5)postbit_onlinestatus (5)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_display_complete post_thanks_function_can_thank_this_post_start 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!