Simple Machines Community Forum

Customizing SMF => Modifications and Packages => Topic started by: Hj Ahmad Rasyid Hj Ismail on August 17, 2014, 04:24:36 PM

Title: SBTM: Search Bar To Menu For SMF 2.0.x & 1.1.x
Post by: Hj Ahmad Rasyid Hj Ismail on August 17, 2014, 04:24:36 PM
Link to Mod (http://custom.simplemachines.org/mods/index.php?mod=3913)

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. ;)

(http://validator.w3.org/images/valid_icons/valid-xhtml10)  (http://jigsaw.w3.org/css-validator/images/vcss)
Title: Re: SBTM: Search Bar To Menu
Post by: Diego Andrés on August 17, 2014, 04:32:37 PM
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;
}
Title: Re: SBTM: Search Bar To Menu
Post by: Hj Ahmad Rasyid Hj Ismail on August 17, 2014, 06:20:36 PM
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.
Title: Re: SBTM: Search Bar To Menu
Post by: Hj Ahmad Rasyid Hj Ismail on August 17, 2014, 06:29:25 PM
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).
Title: Re: SBTM: Search Bar To Menu
Post by: loupams on August 20, 2014, 10:48:39 PM
I applied the mod to face1 theme but it's not working.  How can i make it work?
Title: Re: SBTM: Search Bar To Menu
Post by: Hj Ahmad Rasyid Hj Ismail on August 21, 2014, 01:32:29 AM
This mod is meant for default theme. I'll try to add support to Face1 theme soon.
Title: Re: SBTM: Search Bar To Menu
Post by: Hj Ahmad Rasyid Hj Ismail on August 21, 2014, 12:17:50 PM
I did a test install on Face1 theme. It works with no problem. I will need more details to help you resolve your problem.
Title: Re: SBTM: Search Bar To Menu
Post by: Hj Ahmad Rasyid Hj Ismail on October 03, 2014, 01:38:36 PM
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
}
Title: Re: SBTM: Search Bar To Menu
Post by: Diego Andrés on October 04, 2014, 05:32:18 PM
Nice update, thanks.
Title: Re: SBTM: Search Bar To Menu
Post by: Hj Ahmad Rasyid Hj Ismail on October 04, 2014, 09:54:51 PM
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.
Title: Re: SBTM: Search Bar To Menu
Post by: dougiefresh on November 01, 2014, 04:44:20 PM
I tried to install Search Focus Dropdown v1.6.1 (http://custom.simplemachines.org/mods/index.php?mod=1634) 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?
Title: Re: SBTM: Search Bar To Menu
Post by: Hj Ahmad Rasyid Hj Ismail on November 02, 2014, 09:05:51 PM
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
}