How to move searchbox to be aligned with menu?

[loupams]

How to do this?

<<Edited to remove caps-locked title>>

[Hj Ahmad Rasyid Hj Ismail]

I can try to give some ideas since I've done that in my face2 theme.

There is two part in index.template.php that you need to merge i.e. the search form and the menu:
First try to find:

Code Select Expand

echo '
</div>
<div class="news normaltext">
<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>';

Change it to:

Code Select Expand

echo '
</div>
<div class="news normaltext">';

Second, find menu function below:

Code Select Expand

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

// Generate a strip of buttons.


Change it to:

Code Select Expand

echo '
</ul>
<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>
</div>';
}

// Generate a strip of buttons.


That is the rough idea. Then, try to adjust your css to make it inline and display nicely. IMO, you can also hide submit button via css to make it nicer.

Note: My face2 theme is a little different than this. So note that this is never tested.

[loupams]

Thank you ahrasis.  This is the result.  It aligns immediately after the logout.   
What file will I edit adjust the alignment of SearchBox?

[Hj Ahmad Rasyid Hj Ismail]

That is expected. You will need to align / float it right. You will need to edit index.css. Create or edit #search_form. I am not in front of my PC. I will see to it later if you still haven't find it.

[loupams]

This additional code in index.css works for me.  Thank you very much for your help ahrasis.

Code Select Expand


#search_form
{
text-align: right !important;
margin: 0;
}



That is expected. You will need to align / float it right. You will need to edit index.css. Create or edit #search_form. I am not in front of my PC. I will see to it later if you still haven't find it.

[Hj Ahmad Rasyid Hj Ismail]

That's great news.

If you wanna try this further tips/tricks for its css, you can simply change your code above to this:

Code Select Expand


/* This is for search form in main menu styling */
#main_menu  #search_form
{
text-align: right !important;
margin: -1px 0 0;
}
#main_menu  #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;
}
#main_menu  #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 */
#main_menu  #search_form .button_submit
{
position: absolute;
left: -9999px
}

Edited: Image attached.

[loupams]

Wow! Thank you again.  Result is pretty.

That's great news.

If you wanna try this further tips/tricks for its css, you can simply change your code above to this:

Code Select Expand


/* This is for search form in main menu styling */
#main_menu  #search_form
{
text-align: right !important;
margin: -1px 0 0;
}
#main_menu  #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;
}
#main_menu  #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 */
#main_menu  #search_form .button_submit
{
position: absolute;
left: -9999px
}

Edited: Image attached.