.navtabs ul { 4.2.1 Problem

[xtragic]

There used to be a time when I was such a fan boy of vBulletin back in the 3.x.x days. Now I feel like I spend more time hunting for things in their confusing system (hereinafter referred to "labyrinth").

This is the problem I'm facing: broken nav bar from updating my custom theme from 4.1.1. to 4.2.1. I opened up Firebug and found I need to make the corrections to two elements: .navtabs ul and .navtabs li a. The later I already completed, but can't find the bloody former in additional.css. The built in search is any help.

Would someone help me find the holy grail in this labyrinth?

Link
forums.jackbootgames.com

[ozzy47]

There is more to it than that, in vB v4.2.0 they added the Navigation Manager, which controls all the tabs and sublinks now. The navbar code was re written. I would suggest asking your skin developer to upgrade the style to accommodate vb v4.2.0 and above.

[xtragic]

Originally Posted by ozzy47

There is more to it than that, in vB v4.2.0 they added the Navigation Manager, which controls all the tabs and sublinks now. The navbar code was re written. I would suggest asking your skin developer to upgrade the style to accommodate vb v4.2.0 and above.

I can easily fix the sub menu, because it's working when I edit it using Firebug. I just can't find the one particular element, unless you are telling me they took it out of the additional.css for some unknown reason.

[ozzy47]

The stuff they added is a completely different system than it was before. If you want to try it yourself, I would suggest comparing all the code under the group Navigation / Breadcrumb Templates in a unmodified default style to the code in your custom style. Copy the code from the unmodified default style to the custom style. This may not always work though, depending on how heavily the custom style is coded.

If not then you have to go through it line by line, changing what needs to be changed.

[xtragic]

Originally Posted by ozzy47

The stuff they added is a completely different system than it was before. If you want to try it yourself, I would suggest comparing all the code under the group Navigation / Breadcrumb Templates in a unmodified default style to the code in your custom style. Copy the code from the unmodified default style to the custom style. This may not always work though, depending on how heavily the custom style is coded.

If not then you have to go through it line by line, changing what needs to be changed.

I guess I'm a bit confused. I'm not sure if you are telling me I can't find this element or I can. I just want to replace the "left" and "top" definition to get the sub menu looking like it was.

.navtabs ul {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top: 0 solid #5A7F97;
    direction: ltr;
    left: -18px;
    margin-right: -80px;
    position: absolute;
    top: 33px;
    width: 100%;

[ozzy47]

Here is a example of how it is changed. In the template navbar, in vB proir to v4.2 this is the template:

<div id="navbar" class="navbar">
    <ul id="navtabs" class="navtabs floatcontainer<vb:if condition="$show['member'] AND $notifications_total"> notify</vb:if>">
        {vb:raw template_hook.navtab_start}
        <vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT != 'search'">
            <li class="selected"><a class="navtab" href="{vb:link forumhome}">{vb:rawphrase forum}</a>
                <ul class="floatcontainer">
                    {vb:raw template_hook.navbar_start}
                    <vb:if condition="$show['searchbuttons']">
                        <vb:if condition="$show['member']">
                        <li><a href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_Post">{vb:rawphrase new_posts_nav}</a></li>
                        <vb:else />
                        <li><a href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum_Post">{vb:rawphrase todays_posts}</a></li>
                        </vb:if>
                    </vb:if>
                    {vb:raw template_hook.navbar_after_getnew}
                    <vb:if condition="$show['pmmainlink']">
                        <li><a href="private.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase private_messages}</a></li>
                    </vb:if>
                    {vb:raw template_hook.navbar_after_pm}
                    <li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}" accesskey="5">{vb:rawphrase faq}</a></li>
                    {vb:raw template_hook.navbar_after_faq}
                    <vb:if condition="$show['canviewcalendar']">
                        <li><a href="calendar.php{vb:raw session.sessionurl_q}">{vb:rawphrase calendar}</a></li>
                    </vb:if>
                    {vb:raw template_hook.navbar_after_calendar}
                    <vb:if condition="$show['communitylink']">
                    <li class="popupmenu">
                        <a href="javascript://" class="popupctrl" accesskey="6">{vb:rawphrase community}</a>
                        <ul class="popupbody popuphover">
                            {vb:raw template_hook.navbar_community_menu_start}
                            <vb:if condition="$show['quick_links_groups']">
                                <li><a href="{vb:link grouphome}">{vb:rawphrase social_groups}</a></li>
                            </vb:if>
                            <vb:if condition="$show['quick_links_albums']">
                                <li><a href="album.php{vb:raw session.sessionurl_q}">{vb:rawphrase pictures_and_albums}</a></li>
                            </vb:if>
                            <vb:if condition="$bbuserinfo['userid']">
                                <li><a href="profile.php?{vb:raw session.sessionurl}do=buddylist"><vb:if condition="$show['friends_and_contacts']">{vb:rawphrase contacts_and_friends}<vb:else />{vb:rawphrase contacts}</vb:if></a></li>
                            </vb:if>
                            <vb:if condition="$show['memberslist']">
                                <li><a href="memberlist.php{vb:raw session.sessionurl_q}">{vb:rawphrase members_list}</a></li>
                            </vb:if>
                            {vb:raw template_hook.navbar_community_menu_end}
                        </ul>
                    </li>
                    </vb:if>
                    {vb:raw template_hook.navbar_after_community}
                    <vb:if condition="$show['canviewforums']">
                    <li class="popupmenu">
                        <a href="javascript://" class="popupctrl">{vb:rawphrase forum_actions}</a>
                        <ul class="popupbody popuphover">
                            {vb:raw template_hook.navbar_forum_menu_start}
                            <li>
                                <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}forumdisplay.php?{vb:raw session.sessionurl}do=markread&amp;markreadhash={vb:raw bbuserinfo.securitytoken}">{vb:rawphrase mark_forums_read}</a>
                            </li>
                            <vb:if condition="$show['member']">
                                <li>
                                    <a href="profile.php?{vb:raw session.sessionurl}do=editoptions">{vb:rawphrase edit_options}</a>
                                </li>
                                <li>
                                    <a href="profile.php?{vb:raw session.sessionurl}do=editprofile">{vb:rawphrase edit_your_details}</a>
                                </li>
                            </vb:if>
                            {vb:raw template_hook.navbar_forum_menu_end}
                        </ul>
                    </li>
                    </vb:if>
                    <li class="popupmenu">
                        <a href="javascript://" class="popupctrl" accesskey="3">{vb:rawphrase quick_links}</a>
                        <ul class="popupbody popuphover">
                            {vb:raw template_hook.navbar_quick_links_menu_pos1}
                            <vb:if condition="$show['member']">
                                <li><a href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum_Post">{vb:rawphrase todays_posts}</a></li>
                                <li><a href="{vb:link subscription}" rel="nofollow">{vb:rawphrase subscribed_threads}</a></li>
                                <li><a href="javascript://" onclick="window.open(getBaseUrl() + 'misc.php?{vb:raw session.sessionurl}do=buddylist&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">{vb:rawphrase open_contacts}</a></li>
                            </vb:if>
                            {vb:raw template_hook.navbar_quick_links_menu_pos2}
                            <vb:if condition="$vboptions['forumleaders']">
                            <li><a href="showgroups.php{vb:raw session.sessionurl_q}" rel="nofollow">
                                <vb:if condition="$vb_suite_installed">
                                    {vb:rawphrase view_site_leaders}
                                <vb:else />
                                    {vb:rawphrase view_forum_leaders}
                                </vb:if>
                            </a></li>
                            </vb:if>
                            {vb:raw template_hook.navbar_quick_links_menu_pos3}
                            <vb:if condition="$show['wollink']">
                                <li><a href="online.php{vb:raw session.sessionurl_q}">{vb:rawphrase whos_online}</a></li>
                            </vb:if>
                            {vb:raw template_hook.navbar_quick_links_menu_pos4}
                        </ul>
                    </li>
                    {vb:raw template_hook.navbar_end}
                </ul>
            </li>
        <vb:else />
            <li><a class="navtab" href="{vb:link forumhome}">{vb:rawphrase forum}</a></li>
        </vb:if>
        {vb:raw template_hook.navtab_middle}
        <vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT == 'search'">
            <vb:if condition="$show['member']">
            <li  class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a>
                <ul class="floatcontainer">
                    {vb:raw template_hook.navbar_getnew_menu_start}
                    <li><a href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_Post">{vb:rawphrase new_posts_nav}</a></li>
                    <vb:if condition="$show['quick_links_groups']">
                        <li><a href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_SocialGroupMessage">{vb:rawphrase new_group_messages_nav}</a></li>
                    </vb:if>
                    <vb:if condition="$show['canviewcalendar']">
                        <li><a href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_Event">{vb:rawphrase new_events_nav}</a></li>
                    </vb:if>
                    {vb:raw template_hook.navbar_getnew_menu_pos1}
                    <li><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}forumdisplay.php?{vb:raw session.sessionurl}do=markread&amp;markreadhash={vb:raw bbuserinfo.securitytoken}">{vb:rawphrase mark_forums_read}</a></li>
                    {vb:raw template_hook.navbar_getnew_menu_end}
                </ul>
            </li>
            <vb:else />
            <li  class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a>
                <ul class="floatcontainer">
                    {vb:raw template_hook.navbar_getdaily_menu_start}
                    <li><a href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum_Post">{vb:rawphrase todays_posts}</a></li>
                    <li><a href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum_SocialGroupMessage">{vb:rawphrase daily_group_message}</a></li>
                    <li><a href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum_Event">{vb:rawphrase daily_events}</a></li>
                    <li><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}forumdisplay.php?{vb:raw session.sessionurl}do=markread&amp;markreadhash={vb:raw bbuserinfo.securitytoken}">{vb:rawphrase mark_forums_read}</a></li>
                    {vb:raw template_hook.navbar_getdaily_menu_end}
                </ul>
            </li>
            </vb:if>
        <vb:elseif condition="$show['member']" />
            <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li>
        <vb:else />
            <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li>
        </vb:if>
        {vb:raw template_hook.navtab_end}
    </ul>
    <vb:if condition="$vboptions['enablesearches']">
        <div id="globalsearch" class="globalsearch">
            <form action="search.php?{vb:raw session.sessionurl}do=process" method="post" id="navbar_search" class="navbar_search">
                <vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>
                <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                <input type="hidden" name="do" value="process" />
                <span class="textboxcontainer"><span><input type="text" value="" name="query" class="textbox" tabindex="99"/></span></span>
                <span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search<vb:if condition="$stylevar['textdirection'] == 'rtl'">_rtl</vb:if>.<vb:if condition="is_browser('ie') AND !is_browser('ie', 7)">gif<vb:else />png</vb:if>" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/></span></span>
            </form>
            <ul class="navbar_advanced_search">
                <li><a href="search.php{vb:raw session.sessionurl_q}" accesskey="4">{vb:rawphrase advanced_search}</a></li>
                {vb:raw template_hook.navbar_advanced_search}
            </ul>
        </div>
    </vb:if>
</div>
</div><!-- closing div for above_body -->

<div class="body_wrapper">
<div id="breadcrumb" class="breadcrumb">
    <ul class="floatcontainer">
        <li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
        {vb:raw navbits.breadcrumb}
        {vb:raw navbits.lastelement}
    </ul>
    <hr />
</div>

{vb:raw ad_location.ad_navbar_below}
{vb:raw ad_location.global_below_navbar}

<vb:if condition="$show['notices'] AND THIS_SCRIPT != 'register'">
    <form action="profile.php?do=dismissnotice" method="post" id="notices" class="notices">
        <input type="hidden" name="do" value="dismissnotice" />
        <input type="hidden" name="s" value="{vb:raw session.sessionurl}" />
        <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
        <input type="hidden" id="dismiss_notice_hidden" name="dismiss_noticeid" value="" />
        <input type="hidden" name="url" value="{vb:raw return_link}" />
        <ol>
            {vb:raw notices}
        </ol>
    </form>
</vb:if>

After v4.2 this is now the template:

<div id="navbar" class="navbar">
    <ul id="navtabs" class="navtabs floatcontainer<vb:if condition="$show['member'] AND $notifications_total"> notify</vb:if>">
        {vb:raw template_hook.navtab_start}
        {vb:raw navigation}
        {vb:raw template_hook.navtab_end}
    </ul>
    <vb:if condition="$vboptions['enablesearches']">
        <div id="globalsearch" class="globalsearch">
            <form action="search.php?{vb:raw session.sessionurl}do=process" method="post" id="navbar_search" class="navbar_search">
                <vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>
                <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                <input type="hidden" name="do" value="process" />
                <span class="textboxcontainer"><span><input type="text" value="" name="query" class="textbox" tabindex="99"/></span></span>
                <span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search<vb:if condition="$stylevar['textdirection'] == 'rtl'">_rtl</vb:if>.<vb:if condition="is_browser('ie') AND !is_browser('ie', 7)">gif<vb:else />png</vb:if>" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/></span></span>
            </form>
            <ul class="navbar_advanced_search">
                <li><a href="search.php{vb:raw session.sessionurl_q}" accesskey="4">{vb:rawphrase advanced_search}</a></li>
                {vb:raw template_hook.navbar_advanced_search}
            </ul>
        </div>
    </vb:if>
</div>
</div><!-- closing div for above_body -->

<div class="body_wrapper">
<div id="breadcrumb" class="breadcrumb">
    <ul class="floatcontainer">
        <li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
        {vb:raw navbits.breadcrumb}
        {vb:raw navbits.lastelement}
    </ul>
    <hr />
</div>

{vb:raw ad_location.ad_navbar_below}
{vb:raw ad_location.global_below_navbar}

<vb:if condition="$show['notices'] AND THIS_SCRIPT != 'register'">
    <form action="profile.php?do=dismissnotice" method="post" id="notices" class="notices">
        <input type="hidden" name="do" value="dismissnotice" />
        <input type="hidden" name="s" value="{vb:raw session.sessionurl}" />
        <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
        <input type="hidden" id="dismiss_notice_hidden" name="dismiss_noticeid" value="" />
        <input type="hidden" name="url" value="{vb:raw return_link}" />
        <ol>
            {vb:raw notices}
        </ol>
    </form>
</vb:if>

As you can see the code is vastly different, so just trying to fix a ul issue is not going to solve anything.

[xtragic]

So there is no css rule definition for the ul? I found and edited ".navtabs li a". Surely they must have the .navtabs buried somewhere.

The vB team wonders why everyone is using IPBoard these days. =/

[ozzy47]

There may be a definition, but as I stated, the system has changed vastly. That is due to the addition of the Navigation Manager, which allows you to add tabs easily in the site. This was one of the most requested items in jira, so if users move to a different platform, after something they asked for, makes no sense.

Like I said, I would get your skin dev to update the style to support v4.2.1, or look on here to get a style that is for that version, https://vborg.vbsupport.ru/forumdisplay.php?f=247

[RickyH]

The css is now edited in Stylevars. Probably best to give us a link to your site and an explanation of what styling you want to add/remove. VB4 is widely editable, you just need to know what you're looking for.

[ozzy47]

It still would do no good to try and correct a issue, if the style is not for that vB version, or at least made compatible.