Jump to content

Search Box

Guest

By Guest
in Customising Look & Feel

 Share

Recommended Posts

Guest

Guest

Posted
Posted

Hi Everyone

I've found a code that will allow me to add a search box with the little zoom icon.

The problem i have is that i am not confident with forms and therefore i need your assistance! :( Could someone please tell me what values i must NOT change in order for the form to keep working as normal....

<form method="get" action="http://www.mysite.com/search.php"> 

<table cellpadding="0px" cellspacing="0px"> 

<tr> 

<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">

<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;"> 

</td>

<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;"> 

<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">

</td>

</tr>

</table>

</form>




Now here is the standard code i have in my boxes/searchForm.tpl file.





<!-- BEGIN: search_form -->

<form action="index.php" method="get">

		<span class="txtSession"><strong>{LANG_SEARCH_FOR}</strong></span> <input name="searchStr" type="text" class="searchBox" id="searchStr" value="{SEARCHSTR}" size="20" />

		<input type="hidden" name="act" value="viewCat" />

		<input name="Submit" type="submit" class="searchBtn" value="{LANG_GO}" />

</form>

<!-- END: search_form -->

Your help is greatly appreciated.

Thanks

Antz :lol:

Link to comment
Share on other sites

Guest

Guest

Posted
Posted

You can change anything you want as long you don't edit the search box's ID, name and Value fields along with the hidden input after it. Make sure you have a backup of that page before you work on it :(

<input name="searchStr" type="text" class="searchBox" id="searchStr" value="{SEARCHSTR}" size="20" />

<input type="hidden" name="act" value="viewCat" />

Link to comment
Share on other sites
Guest

Guest

Posted
Posted

You can change anything you want as long you don't edit the search box's ID, name and Value fields along with the hidden input after it. Make sure you have a backup of that page before you work on it :yeahhh:

<input name="searchStr" type="text" class="searchBox" id="searchStr" value="{SEARCHSTR}" size="20" />

<input type="hidden" name="act" value="viewCat" />

Hi Again,
Well i managed to get the image to show up,,,, except.....
Why doesn't it line up properly in both IE6 and FF? >>> is this the peekaboo bug?
Does anyone know how i can get both browsers to show the searchbox and image lined up properly? aghhhhh IE!!!!!!!
This is the code i implemented pls let me know if its also correct.




I took out the "searchbox class" and tried it the way the tutorial says but it still won't line up :P



Here is the tutorial

Tutorial



Your advice would be very very much appreciated.



Thanks

Antz */*
<div class="searchbox">

<form action="index.php" method="get">

<table cellpadding="0px" cellspacing="0px"> 

<tr> 

<td style="border-style:solid none solid solid;border-color:#ffffff;border-width:1px; ">



<input name="searchStr" type="text" id="searchStr" style="width:100px; border:1px solid #4c566b; height:18px; padding:0px 3px; position:relative; " size="20"> 

</td>

  <input type="hidden" name="act" value="viewCat" />



<td style="border-style:solid;border-color:#ffffff;border-width:1px;"> 



<input name="Submit" type="submit" value="" style="border-style: none; background:url('mystore/skins/skintype/styleImages/icons/zoom1.gif') no-repeat; width: 24px; height: 20px;">

</td>

</tr>

</table>

</form> 

		

</div>

























Link to comment



Share on other sites























bsmither


Mentor









bsmither




Posted 


















    









Posted 











I haven't looked at the tutorial, so I don't know if it said to put a hidden form element between table elements.



I would put the hidden viewcat form element either inside a table cell element, or put it completely outside the table.



Maybe you already did that and it didn't make a difference.

























Link to comment



Share on other sites























Guest









Guest




Posted 


















    









Posted 











Sorry for the late reply, antzypants.



Navigate to public_html/mystore/skins/ and I believe you have another folder called skintype with a styleSheets folder in it. 



(So navigate to public_html/mystore/skins/skintype/styleSheets/ or wherever your skin's styleSheets folder is)



Open the file called style.css for editing.



Look for the searchBtn and searchBox classes. They should look like this or somewhat close to it:


.searchBtn {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 70%;

	color: #FFFFFF;

	border: none;

	height: 22px;

	width: 57px;

	background-image: url(../styleImages/buttons/searchSubmit.gif);

	background-color: #F78A0F;

}

.searchBox {

	background-color: #FFFFFF;

	border: 1px solid #7F9DB9;

	height: 14px;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 11px;

	color: #0E51A3;

}




Change it into:



/*

.searchBtn {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 70%;

	color: #FFFFFF;

	border: none;

	height: 22px;

	width: 57px;

	background-image: url(../styleImages/buttons/searchSubmit.gif);

	background-color: #F78A0F;

}

.searchBox {

	background-color: #FFFFFF;

	border: 1px solid #7F9DB9;

	height: 14px;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 11px;

	color: #0E51A3;

}

*/




Note how I commented the classes- not delete them. This will act as a backup.



Now, change this:



<div class="searchbox">

<form action="index.php" method="get">

<table cellpadding="0px" cellspacing="0px">

<tr>

<td style="border-style:solid none solid solid;border-color:#ffffff;border-width:1px; ">



<input name="searchStr" type="text" id="searchStr" style="width:100px; border:1px solid #4c566b; height:18px; padding:0px 3px; position:relative; " size="20">

</td>

  <input type="hidden" name="act" value="viewCat" />



<td style="border-style:solid;border-color:#ffffff;border-width:1px;">



<input name="Submit" type="submit" value="" style="border-style: none; background:url('mystore/skins/skintype/styleImages/icons/zoom1.gif') no-repeat; width: 24px; height: 20px;">

</td>

</tr>

</table>

</form>

		

</div>




Into this (all I did was delete the <div>):



<form action="index.php" method="get">

<table cellpadding="0px" cellspacing="0px">

<tr>

<td style="border-style:solid none solid solid;border-color:#ffffff;border-width:1px; ">



<input name="searchStr" type="text" id="searchStr" style="width:100px; border:1px solid #4c566b; height:18px; padding:0px 3px; position:relative; " size="20">

</td>

  <input type="hidden" name="act" value="viewCat" />



<td style="border-style:solid;border-color:#ffffff;border-width:1px;">



<input name="Submit" type="submit" value="" style="border-style: none; background:url('mystore/skins/skintype/styleImages/icons/zoom1.gif') no-repeat; width: 24px; height: 20px;">

</td>

</tr>

</table>

</form>



This should fix the cross browser error.



AJ Rao

























Link to comment



Share on other sites























Guest









Guest




Posted 


















    









Posted 











Sorry for the late reply, antzypants.



Navigate to public_html/mystore/skins/ and I believe you have another folder called skintype with a styleSheets folder in it. 



(So navigate to public_html/mystore/skins/skintype/styleSheets/ or wherever your skin's styleSheets folder is)



Open the file called style.css for editing.



Look for the searchBtn and searchBox classes. They should look like this or somewhat close to it:


.searchBtn {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 70%;

	color: #FFFFFF;

	border: none;

	height: 22px;

	width: 57px;

	background-image: url(../styleImages/buttons/searchSubmit.gif);

	background-color: #F78A0F;

}

.searchBox {

	background-color: #FFFFFF;

	border: 1px solid #7F9DB9;

	height: 14px;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 11px;

	color: #0E51A3;

}




Change it into:



/*

.searchBtn {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 70%;

	color: #FFFFFF;

	border: none;

	height: 22px;

	width: 57px;

	background-image: url(../styleImages/buttons/searchSubmit.gif);

	background-color: #F78A0F;

}

.searchBox {

	background-color: #FFFFFF;

	border: 1px solid #7F9DB9;

	height: 14px;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 11px;

	color: #0E51A3;

}

*/




Note how I commented the classes- not delete them. This will act as a backup.



Now, change this:



<div class="searchbox">

<form action="index.php" method="get">

<table cellpadding="0px" cellspacing="0px">

<tr>

<td style="border-style:solid none solid solid;border-color:#ffffff;border-width:1px; ">



<input name="searchStr" type="text" id="searchStr" style="width:100px; border:1px solid #4c566b; height:18px; padding:0px 3px; position:relative; " size="20">

</td>

  <input type="hidden" name="act" value="viewCat" />



<td style="border-style:solid;border-color:#ffffff;border-width:1px;">



<input name="Submit" type="submit" value="" style="border-style: none; background:url('mystore/skins/skintype/styleImages/icons/zoom1.gif') no-repeat; width: 24px; height: 20px;">

</td>

</tr>

</table>

</form>

		

</div>




Into this (all I did was delete the <div>):



<form action="index.php" method="get">

<table cellpadding="0px" cellspacing="0px">

<tr>

<td style="border-style:solid none solid solid;border-color:#ffffff;border-width:1px; ">



<input name="searchStr" type="text" id="searchStr" style="width:100px; border:1px solid #4c566b; height:18px; padding:0px 3px; position:relative; " size="20">

</td>

  <input type="hidden" name="act" value="viewCat" />



<td style="border-style:solid;border-color:#ffffff;border-width:1px;">



<input name="Submit" type="submit" value="" style="border-style: none; background:url('mystore/skins/skintype/styleImages/icons/zoom1.gif') no-repeat; width: 24px; height: 20px;">

</td>

</tr>

</table>

</form>




This should fix the cross browser error.



AJ Rao

Thanks sooooo much AJ! got it all working! all lines up :blink: i cleaned up the searchform.tpl also and gave it a couple of classes.... pls see what i've done and let me know if all is good and values are correct.




Is that the right way??????



Thanks so much! trying to learn as much as i can and making heaps of notes!



Cheers

Antz :unsure:
<!-- BEGIN: search_form -->

<div class="boxTitleRight"><span>SEARCH</span></div>

<div class="boxContentRight" style="padding:0px margin:0px">



<form action="index.php" method="get">

<table cellpadding="0px" cellspacing="0px"> 

<tr> 



<td class="tdsearch">



<input name="searchStr" type="text" id="searchStr" style="width:108px; border:0px solid; height:15px; padding:0px 3px; position:relative;"></td>



<td class="tdsearch"> 



  <input type="hidden" name="act" value="viewCat" />

  <input type="submit" value="" class="lupaimg" ></td>

  

</tr>

</table>

</form> 



</div>

<!-- END: search_form -->




and this is what i've done in style.css



/*search box*/

.lupaimg {

width:24px;

height:18px;

background-image: url(../styleImages/icons/zoom1.gif);

background-repeat:no-repeat;

border-style: none;

cursor:pointer;

}

.tdsearch {

border:1px solid #4c566b;

background-color:#ffffff;

}

























Link to comment



Share on other sites


























Join the conversation



You can post now and register later.
If you have an account, sign in now to post with your account.



















Guest






    

  • 


    • 













 Reply to this topic...





×
  Pasted as rich text.   Paste as plain text instead








  Only 75 emoji are allowed.








×
  Your link has been automatically embedded.   Display as a link instead
















×
  Your previous content has been restored.   Clear editor








×
  You cannot paste images directly. Upload or insert images from URL.















×










    

  • 

    

    

    

    • 

  • 


    • 















  Share





















Go to topic listing



















×


















×



    

  • Create New...
    •