Search box and search button on same line
- Posted by: ftruscot • 29 March, 2006
I am running multiple blogs and wanted to have some where the <%searchform%> would output the search input box and the search button on the same line. See above. But I also wanted to use it with two lines like in the sidebar to the right.
I have found two methods to do this. The first modifies both the SKIN.php file and adds a form template. It's advantage is that you can use just a skinvar call to get the desired effect. The second method was inspired by the comment from Tomas below. It requires a simple change to the searchform.template and relies on CSS to show or not show the linebreak. Both methods are outlined below.
Method 1
Modification to SKIN.php and add new form template
To do this, I had to make a few changes, but now I can call searchform with a second parameter. Like this:
where
- blog is the shortname of the blog to search (default is null, giving current blog)
- nlb is 0 or 1, and indicates whether to insert a line break between input box and button (default is null, or 0, which inserts the linebreak. 1 will remove the linebreak)
So <%searchform(,1)%> will search current blog and there will be no linebreak between the input box and the button.
The modifications required are as follows:
I added a template in nucleus/forms called "searchform-nlb.template"
<!-- part of mod to SKIN.php -->
<form method="get" action="<%self%>">
<div class="searchform">
<input name="query" class="formfield" size="10" maxlength="60" accesskey="4" value="<%formdata(query)%>" />
<input type="hidden" name="amount" value="0" />
<input type="hidden" name="blogid" value="<%formdata(id)%>" />
<input type="submit" value="<%text(_SEARCHFORM_SUBMIT)%>" class="formbutton" />
</div>
</form>
Then I modified the parse_searchform function in nucleus/libs/SKIN.php starting around line 1332. It now looks like this:
* to allow flag when calling searchform to keep search input
* and Search button on same line
* to get no line break call with $nlb=1
* e.g. <%searchform('',1)%>
*/
function parse_searchform($blogname = '',$nlb = 0) {
global $CONF, $manager, $maxresults;
if ($blogname) {
$blog =& $manager->getBlog(getBlogIDFromName($blogname));
} else {
global $blog;
}
// use default blog when no blog is selected
$this->formdata = array(
'id' => $blog?$blog->getID():$CONF['DefaultBlog'],
'query' => htmlspecialchars(getVar('query')),
);
if ($nlb) {
$this->doForm('searchform-nlb');
} else {
$this->doForm('searchform');
}
}
Method 2
Template mod and CSS
This method was inspired by the comment from Tomas. I made a quick modification to the nucleus/forms/searchform.template file to add a class attribute to the <br> tag before the search button. Now my searchform.template looks like this:
<div class="searchform">
<input name="query" class="formfield" size="10" maxlength="60" accesskey="4" value="<%formdata(query)%>" />
<input type="hidden" name="amount" value="0" />
<input type="hidden" name="blogid" value="<%formdata(id)%>" />
<br class="lb" />
<input type="submit" value="<%text(_SEARCHFORM_SUBMIT)%>" class="formbutton" />
</div>
</form>
In my css file, I added the following lines:
display:none;
}
.ylb .lb {
display:block;
}
And finally, when I make the call of <%searchform%> in my skin, I enclose it in a <div> tag with either class="ylb" (to display the linebreak) or class="nlb" (to hide the linebreak).
i.e.
To have the linebreak either call <%searchform%> as normal or like this:
<%searchform%>
</div>
To hide the linebreak, I put the following in my skin:
<%searchform%>
</div>
The visual model should be always done by CSS. So if you want to show br on some pages, and on some not, you can use standard form with br and then hide it on the other pages by display:none or you can use a form without br and then use display:block for the other element.
The standard nucleus search button is anyway stupid as it do not pass accessibility rules, so it is up to you what you prefer.
tomas • 31 March, 2006 • 12:56:49