Adding a search box field and button into header navigation

This forum is now closed. Please ask all styles-related questions in the phpBB 3.0 Styles Support & Discussion Forum.
Locked
User avatar
nedostizni
Registered User
Posts: 391
Joined: Tue Mar 04, 2003 7:25 pm

Adding a search box field and button into header navigation

Post by nedostizni » Tue Jul 17, 2007 7:25 pm

I want to add a search box field and a search box button into my header navigation line. And i did that but something seems to be wrong. Here is the page: http://www.iss-world.net/phpBB2/portal.php
Can someone help we with the cod. Here is what i have do:

Code: Select all

...
            <table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr> 
<td align="left" class="topnav">&nbsp; <a href="{U_PORTAL}">{L_HOME}</a>&nbsp; &#8226; &nbsp;<a href="{U_INDEX}">Forum</a>&nbsp; &#8226; &nbsp;<a href="{U_BOOKIES}">{L_BOOKIES}</a>  •  <a href="{U_QUIZ}">{L_QUIZ}</a>&nbsp; &#8226; &nbsp;<a href="{U_ALBUM}">{L_ALBUM}</a> 
<!-- BEGIN switch_user_logged_out -->
&nbsp; &#8226; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a>
<!-- END switch_user_logged_out -->
&nbsp; &#8226; &nbsp;<a href="{U_PROFILE}">{L_PROFILE}</a><br />&nbsp; <a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>&nbsp; 
&#8226; &nbsp;<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><div align="right"><form name="search_block" method="post" action="{U_SEARCH}" onSubmit="return checkSearch()"><span class="gensmall" style="line-height=150%">
         <input class="post" type="text" name="search_keywords" size="15" />
         <input type="hidden" name="search_fields" value="all" /><input type="hidden" name="show_results" value="topics" />
         <input class="mainoption" type="submit" value="{L_SEARCH}" /></span></form></td>
</tr>
</table>
          </div></td>
</tr>
    </table>

...
All those Links (Home, Forum...) shuould be on the left side, and only the search field and button on the right side. Also i don`t know why that grey line is appearing below the green navigation one.


Any help please.
Thanks in advance

User avatar
nedostizni
Registered User
Posts: 391
Joined: Tue Mar 04, 2003 7:25 pm

Re: Adding a search box field and button into header navigation

Post by nedostizni » Wed Jul 18, 2007 10:00 am

I don`t know if someone understood what i need.
I want to insert a search field code into header navigation line:

Code: Select all

<div align="right"><form name="search_block" method="post" action="{U_SEARCH}" onSubmit="return checkSearch()"><span class="gensmall" style="line-height=50%">
         <input class="post" type="text" name="search_keywords" size="15" />
         <input type="hidden" name="search_fields" value="all" /><input type="hidden" name="show_results" value="topics" />
         <input class="mainoption" type="submit" value="{L_SEARCH}" /></span></form>
into my overall_header.tpl:

Code: Select all

            <table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr> 
<td align="left" class="topnav">&nbsp; <a href="{U_PORTAL}">{L_HOME}</a>&nbsp; &#8226; &nbsp;<a href="{U_INDEX}">Forum</a>&nbsp; &#8226; &nbsp;<a href="{U_BOOKIES}">{L_BOOKIES}</a>&nbsp; &#8226; &nbsp;<a href="{U_QUIZ}">{L_QUIZ}</a>&nbsp; &#8226; &nbsp;<a href="{U_ALBUM}">{L_ALBUM}</a> 
<!-- BEGIN switch_user_logged_out -->
&nbsp; &#8226; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a>
<!-- END switch_user_logged_out -->
&nbsp; &#8226; &nbsp;<a href="{U_PROFILE}">{L_PROFILE}</a><div align="left">&nbsp; <a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>&nbsp; 
&#8226; &nbsp;<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></td>
</tr>
</table>
          </div></td>
</tr>
    </table>
I have inserted it like this:

Code: Select all

            <table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr> 
<td align="left" class="topnav">&nbsp; <a href="{U_PORTAL}">{L_HOME}</a>&nbsp; &#8226; &nbsp;<a href="{U_INDEX}">Forum</a>&nbsp; &#8226; &nbsp;<a href="{U_BOOKIES}">{L_BOOKIES}</a>&nbsp; &#8226; &nbsp;<a href="{U_QUIZ}">{L_QUIZ}</a>&nbsp; &#8226; &nbsp;<a href="{U_ALBUM}">{L_ALBUM}</a> 
<!-- BEGIN switch_user_logged_out -->
&nbsp; &#8226; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a>
<!-- END switch_user_logged_out -->
&nbsp; &#8226; &nbsp;<a href="{U_PROFILE}">{L_PROFILE}</a><div align="right"><form name="search_block" method="post" action="{U_SEARCH}" onSubmit="return checkSearch()"><span class="gensmall" style="line-height=50%">
         <input class="post" type="text" name="search_keywords" size="15" />
         <input type="hidden" name="search_fields" value="all" /><input type="hidden" name="show_results" value="topics" />
         <input class="mainoption" type="submit" value="{L_SEARCH}" /></span></form><div align="left">&nbsp; <a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>&nbsp; 
&#8226; &nbsp;<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></td>
</tr>
</table>
          </div></td>
</tr>
    </table>
The problem is that for some reason the search field is inserted at new line (after the Profile tag)? Why? I don`t have a <br /> between Profile and Search filed code?!
Last edited by nedostizni on Wed Jul 18, 2007 2:38 pm, edited 1 time in total.

User avatar
Greenweaver
Former Team Member
Posts: 3913
Joined: Tue Jan 10, 2006 5:25 am
Location: In the rain
Contact:

Re: Adding a search box field and button into header navigation

Post by Greenweaver » Wed Jul 18, 2007 1:25 pm

Find this code and replace it with the code below:

Code: Select all

<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr> 
<td align="left" class="topnav">&nbsp; <a href="{U_PORTAL}">{L_HOME}</a>&nbsp; &#8226; &nbsp;<a href="{U_INDEX}">Forum</a>&nbsp; &#8226; &nbsp;<a href="{U_BOOKIES}">{L_BOOKIES}</a>&nbsp; &#8226; &nbsp;<a href="{U_QUIZ}">{L_QUIZ}</a>&nbsp; &#8226; &nbsp;<a href="{U_ALBUM}">{L_ALBUM}</a> 
<!-- BEGIN switch_user_logged_out -->
&nbsp; &#8226; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a>
<!-- END switch_user_logged_out -->
&nbsp; &#8226; &nbsp;<a href="{U_PROFILE}">{L_PROFILE}</a><div align="right"><form name="search_block" method="post" action="{U_SEARCH}" onSubmit="return checkSearch()"><span class="gensmall" style="line-height=50%">
         <input class="post" type="text" name="search_keywords" size="15" />
         <input type="hidden" name="search_fields" value="all" /><input type="hidden" name="show_results" value="topics" />
         <input class="mainoption" type="submit" value="{L_SEARCH}" /></span></form><div align="left">&nbsp; <a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>&nbsp; 
&#8226; &nbsp;<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></td>
</tr>
</table>
Try this code instead:

Code: Select all

<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr> 
<td align="left" class="topnav">
&nbsp; <a href="{U_PORTAL}">{L_HOME}</a>
&nbsp; &#8226; &nbsp;<a href="{U_INDEX}">Forum</a>
&nbsp; &#8226; &nbsp;<a href="{U_BOOKIES}">{L_BOOKIES}</a>
&nbsp; &#8226; &nbsp;<a href="{U_QUIZ}">{L_QUIZ}</a>
&nbsp; &#8226; &nbsp;<a href="{U_ALBUM}">{L_ALBUM}</a> 
<!-- BEGIN switch_user_logged_out -->
&nbsp; &#8226; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a>
<!-- END switch_user_logged_out -->
&nbsp; &#8226; &nbsp;<a href="{U_PROFILE}">{L_PROFILE}</a>
</td>
<td>
<form name="search_block" method="post" action="{U_SEARCH}" onSubmit="return checkSearch()"><span class="gensmall" style="line-height=50%">
         <input class="post" type="text" name="search_keywords" size="15" />
         <input type="hidden" name="search_fields" value="all" /><input type="hidden" name="show_results" value="topics" />
         <input class="mainoption" type="submit" value="{L_SEARCH}" /></span></form>
</td>
</tr>
<tr>
<td>
&nbsp; <a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>&nbsp; 
&#8226; &nbsp;<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></td>
</tr>

</table>
See if that helps a bit.
Image
Modage: Page Title Number MOD
Linkage: Find me at Styles Support & Discussion | Get a new style | Customise your style | phpBB userguide
Noteage:
Graphics requests to members over 20 posts and genuine phpbb requirements | I do not provide custom psd files

User avatar
nedostizni
Registered User
Posts: 391
Joined: Tue Mar 04, 2003 7:25 pm

Re: Adding a search box field and button into header navigation

Post by nedostizni » Thu Jul 19, 2007 4:00 pm

thanks for the help mate. But it didn`t worked.

The thing is that for some reason, the search form and the link (Home, Forum...) cannot be in the same line.

User avatar
Greenweaver
Former Team Member
Posts: 3913
Joined: Tue Jan 10, 2006 5:25 am
Location: In the rain
Contact:

Re: Adding a search box field and button into header navigation

Post by Greenweaver » Thu Jul 19, 2007 4:21 pm

Use this code then and let me see what it looks like:

Code: Select all

    <table width="100%" border="0" cellspacing="0" cellpadding="2">
    <tr>
    <td align="left" valign="top" class="topnav">&nbsp; <a href="{U_PORTAL}">{L_HOME}</a></td>
    <td align="left" valign="top" class="topnav">&nbsp; &#8226; &nbsp;<a href="{U_INDEX}">Forum</a></td>
    <td align="left" valign="top" class="topnav">&nbsp; &#8226; &nbsp;<a href="{U_BOOKIES}">{L_BOOKIES}</a></td>
    <td align="left" valign="top" class="topnav">&nbsp; &#8226; &nbsp;<a href="{U_QUIZ}">{L_QUIZ}</a></td>
    <td align="left" valign="top" class="topnav">&nbsp; &#8226; &nbsp;<a href="{U_ALBUM}">{L_ALBUM}</a></td>
    <!-- BEGIN switch_user_logged_out -->
    <td align="left" valign="top" class="topnav">&nbsp; &#8226; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a></td>
    <!-- END switch_user_logged_out -->
    <td align="left" valign="top" class="topnav">&nbsp; &#8226; &nbsp;<a href="{U_PROFILE}">{L_PROFILE}</a></td>
    </td>
    <td align="right" valign="top" class="topnav">
    <form name="search_block" method="post" action="{U_SEARCH}" onSubmit="return checkSearch()"><span class="gensmall" style="line-height=50%">
    <input class="post" type="text" name="search_keywords" size="15" />
    <input type="hidden" name="search_fields" value="all" /><input type="hidden" name="show_results" value="topics" />
    <input class="mainoption" type="submit" value="{L_SEARCH}" /></span></form>
    </td>
    </tr>
    <tr>
    <td align="left" colspan="8">
    &nbsp; <a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>&nbsp;
    &#8226; &nbsp;<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></td>
    </tr>
    </table>
Image
Modage: Page Title Number MOD
Linkage: Find me at Styles Support & Discussion | Get a new style | Customise your style | phpBB userguide
Noteage:
Graphics requests to members over 20 posts and genuine phpbb requirements | I do not provide custom psd files

User avatar
nedostizni
Registered User
Posts: 391
Joined: Tue Mar 04, 2003 7:25 pm

Re: Adding a search box field and button into header navigation

Post by nedostizni » Thu Jul 26, 2007 11:48 pm

Nope it`s not working.


Can you help me with this:

I want to insert a Search box into cell of the table, but that cell should also have a image in it (after all, it can be a background image).

Here is the exact example of what i want:

http://www.iss-world.net/Untitled-1.jpg

And here is what it looks now: http://www.iss-world.net/phpBB2/

Locked

Return to “[2.0.x] Styles Development & Discussion”