How to do this?
<<Edited to remove caps-locked title>>
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:
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" />
<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:
echo '
</div>
<div class="news normaltext">';
Second, find menu function below:
echo '
</ul>
</div>';
}
// Generate a strip of buttons.
Change it to:
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" />
<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.
Thank you ahrasis. This is the result. It aligns immediately after the logout.
What file will I edit adjust the alignment of SearchBox?
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.
This additional code in index.css works for me. Thank you very much for your help ahrasis.
#search_form
{
text-align: right !important;
margin: 0;
}
Lainaus käyttäjältä: ahrasis - elokuu 12, 2014, 10:50:28 AP
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.
That's great news.
If you wanna try this further tips/tricks for its css, you can simply change your code above to this:
/* 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.
Wow! Thank you again. Result is pretty. :)
Lainaus käyttäjältä: ahrasis - elokuu 12, 2014, 12:39:14 IP
That's great news.
If you wanna try this further tips/tricks for its css, you can simply change your code above to this:
/* 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.