Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2006-07-29 22:33:27
- deronsizemore
- Member
- From: Kentucky
- Registered: 2005-11-02
- Posts: 324
I'm trying to style my site search...not having much luck
Hello,
I’m using this code: txp:search_input label=“Search” button=“Search” size=“15” wraptag=“p” to add a search funtion to my site, which can be found here: <a href=“http://www.kentuckygolfing.com”>http://www.kentuckygolfing.com</a>
I can’t seem to figure out how to change the defult button to my own button? I played around with a few different techniques that I found by searching the forums, one of which seemd to work, but the custom button was not lined up with the text feild and I couldn’t get it to center either.
Sorry if this is confusing. I’ve made this image to kinda give you an idea what I’m trying to duplicate:
<a href=“http://www.kentuckygolfing.com/preview.gif”>http://www.kentuckygolfing.com/preview.gif</a>
Thanks,
Deron
Sorry for the code at the top of this post…I don’t know how to make the code stand out…it keeps making it invisible when I write it in full, so I took the <> </> off.
Last edited by deronsizemore (2006-07-29 22:37:06)
Offline
Re: I'm trying to style my site search...not having much luck
Just customize the HTML:
TXP Code:
<code>
<form action=”<txp:site_url />” method=“get”>
<p>Search<br />
<input type=“text” name=“q” value=”“ size=“15” /></p>
<p><input class=“button” type=“submit” value=“Search” /></p>
</form>
</code>
You could then use Phark image replacement (or another). If you have multiple input buttons, either wrap the search form in a fieldset with an id and use descendant selectors (#search .button {}) or give the button an id.
Offline
#3 2006-07-30 00:03:28
- deronsizemore
- Member
- From: Kentucky
- Registered: 2005-11-02
- Posts: 324
Re: I'm trying to style my site search...not having much luck
Thanks for the help, but I’m lost still.
I have no idea what Phark image replacement is, and I don’t know how giving the button and id helps me?
Here is the html that I used:
<code><form action=”<txp:site_url />” method=“get”>
<p>Search<br />
<input type=“text” name=“q” value=”“ size=“15” /></p>
<p><input class=“button” id=“gobutton” type=“submit” value=“Search” /></p>
</form>
</code>
<br /><br />
And here is the CSS after I gave the button an id:
<br /><br />
<code>
#gobutton {
background: url(/images/gobutton.gif) no-repeat 0 50%;
}
</code>
I don’t know if that is what you were talking about or not, but it just placed a background image over the default search button (which you can see by going to the site again).
Thanks,
Deron
Last edited by deronsizemore (2006-07-30 00:04:12)
Offline
Re: I'm trying to style my site search...not having much luck
Phark Image Replacement (image replacement roundup). This should help.
Offline
#5 2006-07-30 05:02:44
- deronsizemore
- Member
- From: Kentucky
- Registered: 2005-11-02
- Posts: 324
Re: I'm trying to style my site search...not having much luck
Nice! That was pretty easy to figure out after I checked out the link. Pretty slick technique. Thanks!
The only other thing that is coming up now is that I’d like the “search” button to be directy on the right of the search text area and not under it. I’ve tried to decrease the size of the text box, but it still stays under. Is there a bit of code here that is making it jump down under the text box that I’m not seeing?
Thanks,
Deron
Last edited by deronsizemore (2006-07-30 05:03:01)
Offline
Re: I'm trying to style my site search...not having much luck
Here’s a solution that works in Opera 9 (aside from the cursor). I setup an example too.
CSS
<pre>
#search {
margin: 0;
border: 0;
padding: 0;
}
#search button {
width: 30px; /*width of the button*/
height: 30px; /*height of the button */
border: 0;
background: url(button.png);
cursor: pointer;
}
#search legend,#search button {
/*hide the legend and button text */
text-indent: -9999px;
}
#search legend {
/*Remove the legend remnants*/
position: absolute;
}
</pre>
HTML
<pre>
<form action="#" method="get">
<fieldset id="search">
<legend>Search</legend>
<label for="query">Search</label>
<input id="query" name="q" size="15" type="text" value="" />
<button type="submit">Search!</button>
</fieldset>
</form>
</pre>
PS: That is a good-looking, refreshing design.
Last edited by deldindesign (2006-07-30 06:53:51)
Offline
#7 2006-07-30 23:56:16
- deronsizemore
- Member
- From: Kentucky
- Registered: 2005-11-02
- Posts: 324
Re: I'm trying to style my site search...not having much luck
Ah! You’re awesome! Sorry to be such a pain, but styling forms just has never up my ally for some reason, I don’t have a problem with much else though.
Everything works great now!
Thanks for the comments on the site! I appreciate it. Really reasurring (sp?), because lately I’ve been looking at the design wondering if I should change it.
Offline