Log in

View Full Version : Move or Relocate Search from Navbar


Gholsie
04-24-2011, 03:16 PM
Hi all,

I've done some searching but haven't found anything solid on this subject. But, I'd like to move the search box out of the navbar. I'm using the default vb4 template. I'd like to move it just below the navbar right next to the words "Advanced Search" if possible. Can someone help me do this? I really appreciate the help. It seems simple enough, I just don't know which part to move w/out screwing up something else.

Mike

Gholsie
04-24-2011, 03:17 PM
Oh, and I don't need to move the little magnifying glass, just the text box.

Gholsie
05-28-2011, 03:02 PM
Nobody ?

tidefans
06-18-2011, 10:16 AM
I, too, am interested in knowing a good way to do this so any help is appreciated!

8thos
06-25-2011, 11:59 PM
I would really like to know how to do this too. That search bar is in the most inconvenient place ever.

napy8gen
06-26-2011, 06:30 AM
I will help you guys. But this is simplest way of moving default search code. and this is for default style. if you have custom or pre-made style you may have to tweak a little bit.

I attached 2 screenshots for you guys to understand.

go to style manager> style name (based on default style) > edit templates> navbar & breadcrumb templates> navbar

find:

<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) AND !is_browser('ie', 8))">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>
</ul>
</div>
</vb:if>

**CUT** the search code out and **PASTE** below the body_wrapper div
<div class="body_wrapper">

then in that body wapper class add style="position:relative"


so here I paste the whole navbar template code for you to see. or just copy this one.
<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_P ost">{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}
<li><a href="calendar.php{vb:raw session.sessionurl_q}">{vb:rawphrase calendar}</a></li>
{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}
<li class="popupmenu">
<a href="javascript://" class="popupctrl">{vb:rawphrase forum_actions}</a>
<ul class="popupbody popuphover">
<li>
<a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}forumdisplay.php?{vb:raw session.sessionurl}do=markread&amp;markreadhash={vb:ra w bbuserinfo.securitytoken}" onclick="return confirm('{vb:rawphrase mark_forums_read_confirm}')">{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>
</ul>
</li>
<li class="popupmenu">
<a href="javascript://" class="popupctrl" accesskey="3">{vb:rawphrase quick_links}</a>
<ul class="popupbody popuphover">
<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','buddylis t','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: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_pos1}
{vb:raw template_hook.navbar_quick_links_menu_pos2}
{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_P ost" accesskey="2">{vb:rawphrase getnew_tab}</a>
<ul class="floatcontainer">
<li><a href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_P ost">{vb:rawphrase new_posts_nav}</a></li>
<li><a href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_S ocialGroupMessage">{vb:rawphrase new_group_messages_nav}</a></li>
<li><a href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_E vent">{vb:rawphrase new_events_nav}</a></li>
{vb:raw template_hook.navbar_getnew_menu}
<li><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}forumdisplay.php?{vb:raw session.sessionurl}do=markread&amp;markreadhash={vb:ra w bbuserinfo.securitytoken}">{vb:rawphrase mark_forums_read}</a></li>
</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">
<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>
{vb:raw template_hook.navbar_getdaily_menu}
<li><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}forumdisplay.php?{vb:raw session.sessionurl}do=markread&amp;markreadhash={vb:ra w bbuserinfo.securitytoken}">{vb:rawphrase mark_forums_read}</a></li>
</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_P ost" 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>


</div>
</div><!-- closing div for above_body -->

<div class="body_wrapper" style="position:relative;">

<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) AND !is_browser('ie', 8))">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>
</ul>
</div>
</vb:if>


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

Now what you have to do next is to make the search button white to your color, and the advance search text white text to your color.

the search button is located inside.
images/buttons/search.png

paste this css into your additional.css
style manager> style name> edit templates> css templates> additional.css
.navbar_advanced_search li a {color:#000!important;}


Please note that this is simplest way.
I do not re-position the advance search link beside the input box. It still behaved like the default search.
If you don't like the advance search you can take out the code.
<ul class="navbar_advanced_search">
<li><a href="search.php{vb:raw session.sessionurl_q}" accesskey="4">{vb:rawphrase advanced_search}</a></li>
</ul>

This hack is only to move the search in the body wrapper.
if you have a custom / premade this may not work. As skins from me, the position relative need to be added in the .cwrap class.


If you want a further css styling for the search box, please read here (http://www.sultantheme.com/vb4forum/showthread.php?290-Styling-vb4-searchbox)

8thos
06-26-2011, 06:55 AM
Thanks. I already figured it out though. I just posted a tutorial after researching this tonight.

Waiting for it to be approved. https://vborg.vbsupport.ru/showthread.php?t=265810

--------------- Added 1309119008 at 1309119008 ---------------

Here is a product I made for search bar below navtab. https://vborg.vbsupport.ru/showthread.php?t=265829

My very first product!

doctorsexy
04-19-2012, 06:27 PM
thanks