News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

SBTM: Search Bar To Menu For SMF 2.0.x & 1.1.x

Started by Hj Ahmad Rasyid Hj Ismail, August 17, 2014, 04:24:36 PM

Previous topic - Next topic

Hj Ahmad Rasyid Hj Ismail

Link to Mod

SBTM: Search Bar To Menu
Version 1.0.1 For SMF 2.0.x & 1.1.x

1. Please do your own backup though every installation is backed up automatically.
2. This mod will help you move your search bar from its current position to be inline with main menu.
3. The search bar will be aligned right while main menu will be in its usual position (to the left).
4. There is nothing fancy about this mod but just a simple css mod tricks.
5. You can test it in lower SMF 2.0.x and 1.1.x too as IMO it should work just fine. ;)
6. For SMF 1.1x - this mod now requires Enhanced Mod Settings Page mod to be pre-installed (EMSPv100.zip).
7. You can use this mod with DMOT: Default Menu On Top and Alternative Menu mods.


Thank you for using/testing it.


Yours friendly,
Abu Fahim Ismail.

BSD License. Feel free to modify accordingly but keep author's link if it is in there somewhere. ;)

 

Diego Andrés

Just a few suggestions:

If you don't want the submit button, simply remove it, so you can remove these lines:
Code (index.css) Select
/* This is to hide / remove submit button */
#main_menu  #search_form .button_submit
{
position: absolute;
left: -9999px
}

Code (index.template.php) Select
 
<input type="submit" name="submit" value="', $txt['search'], '" class="button_submit" />


Here wouldn't be better to just use float: right?
Code (index.css) Select
/* This is for search form in main menu styling */
#main_menu  #search_form
{
text-align: right !important;
margin: -1px 0 0;
}

SMF Tricks - Free & Premium Responsive Themes for SMF.

Hj Ahmad Rasyid Hj Ismail

Thanks for the tips Diego. Kinda wrote one myself here: http://www.simplemachines.org/community/index.php?topic=526339.msg3730947#msg3730947 and will be using that to upgrade this mod soonest.

Hj Ahmad Rasyid Hj Ismail

Updated to version 1.0.1
- You can use this mod with DMOT: Default Menu On Top and Alternative Menu mods.
- Note for SMF 1.1x, this mod now requires Enhanced Mod Settings Page mod to be pre-installed (EMSPv100.zip).

loupams

I applied the mod to face1 theme but it's not working.  How can i make it work?

Hj Ahmad Rasyid Hj Ismail

This mod is meant for default theme. I'll try to add support to Face1 theme soon.

Hj Ahmad Rasyid Hj Ismail

I did a test install on Face1 theme. It works with no problem. I will need more details to help you resolve your problem.

Hj Ahmad Rasyid Hj Ismail

I like DilberMC as it a popular theme with multi-color. This is a fix for DilberMC theme css. You just need to copy this code inside its index.css and no others. I will include support for this theme once I upgrade this mod.

/* This is for search form in main menu styling */
.menu_frame  #search_form
{
text-align: right !important;
margin: -1px 0 0;
}
.menu_frame  #search_form .input_text
{
background: url(../images/filter.gif) no-repeat 2px 2px #fff;
padding-left: 1.6em;
border: 1px solid #7f9db9;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-box-radius: 3px;
}
.menu_frame  #search_form .input_text:hover
{
border: 1px solid #454545;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-box-radius: 3px;
}
/* This is to hide / remove submit button */
.menu_frame  #search_form .button_submit
{
position: absolute;
left: -9999px
}

Diego Andrés


SMF Tricks - Free & Premium Responsive Themes for SMF.

Hj Ahmad Rasyid Hj Ismail

I normally hide info_bar class with display none as well but others may still want to have it. Those who hide the info_bar, may also want the news to be placed elsewhere like in the header (upper_section) profile.

dougiefresh

I tried to install Search Focus Dropdown v1.6.1 along side this mod, but Search Focus Dropdown doesn't appear to work....  Is there any way to do something like this within your mod?

Hj Ahmad Rasyid Hj Ismail

That mod adds a code in search form as well as its css. By SBTM a copy of a search form is added with its css.

To add the code, try changing this:
echo '
</ul>';
global $modSettings;
if (!empty($modSettings['move_search_to_menu'])) {
echo '
<form id="search_form" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="text" name="search" value="" class="input_text" />&nbsp;
<input type="submit" name="submit" value="', $txt['search'], '" class="button_submit" />
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';
// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '
</form>';
}
echo '
</div>';
}


To this:
echo '
</ul>';
global $modSettings;
if (!empty($modSettings['move_search_to_menu'])) {
echo '
<form id="search_form" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="text" name="search" value="" class="input_text" />&nbsp;
<input type="submit" name="submit" value="', $txt['search']';

// Search Focus Dropdown
include_once($settings['default_theme_dir'] . '/SearchFocus.template.php');

echo '
, '" class="button_submit" />
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';
// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '
</form>';
}
echo '
</div>';
}


Note: SBTM also hides search button via css. You need to comment this out in the css file to unhide it:
/* This is to hide / remove submit button */
#main_menu  #search_form .button_submit
{
position: absolute;
left: -9999px
}

Advertisement: