J1.5:Customising the Beez template/header/mod search
From Joomla! Documentation
(Redirected from Customising the Beez template/header/mod search)
HTML Reference
<!-- html/mod_search/default.php line 6-46 -->
<form action="index.php" method="post" class="search<?php echo $params->get('moduleclass_sfx'); ?>">
<label for="mod_search_searchword">
<?php echo JText::_('search') ?>
</label>
<?php
$output = '<input name="searchword" id="mod_search_searchword" maxlength="20" class="inputbox'.$moduleclass_sfx.'" type="text" size="'.$width.'" value="'.$text.'" onblur="if(this.value==\'\') this.value=\''.$text.'\';" onfocus="if(this.value==\''.$text.'\') this.value=\'\';" />';
if ($button) :
if ($imagebutton) :
$button = '<input type="image" value="'.$button_text.'" class="button'.$moduleclass_sfx.'" src="'.$img.'"/>';
else :
$button = '<input type="submit" value="'.$button_text.'" class="button'.$moduleclass_sfx.'"/>';
endif;
endif;
switch ($button_pos) :
case 'top' :
$button = $button.'<br />';
$output = $button.$output;
break;
case 'bottom' :
$button = '<br />'.$button;
$output = $output.$button;
break;
case 'right' :
$output = $output.$button;
break;
case 'left' :
default :
$output = $button.$output;
break;
endswitch;
echo $output;
?>
<input type="hidden" name="option" value="com_search" />
<input type="hidden" name="task" value="search" />
</form>
Replace the lable text
JText::_('search')
Search the language file en-GB.mod_search.ini for "SEARCH=Search" and edit it:
/* #### en.GB.tpl_beez.ini line 18 #### */
SEARCH=Your text here!
CSS Reference
#header form
The following classes and ids will influence the form. Please notice the ordering. Every CSS attribute will be overwritten by the class above.
Main Class
/* #### layout.css line 161-170 #### */
#header form
{
background:#C39;
border:solid 0 #000;
float:right;
height:5em;
min-width:240px;
text-align:left;
padding:0 0 0 20px;
}
- Storage location: layout.css
Secondary Classes
/* ##### position.css line 15-19 #### */
*
{
margin: 0;
padding: 0;
}
- Further information: position.css/*
- Storage location: position.css
#header form lable
The following classes and ids will influence the (hidden) lable. Please notice the ordering. Every CSS attribute will be overwritten by the class above.
Main Class
/* #### layout.css line 187-194 #### */
#header form label
{
color:#000;
position:absolute;
left:-3000px;
top:-200px;
width:auto;
}
- Storage location: layout.css
Secondary Classes
/* ##### position.css line 15-19 #### */
*
{
margin: 0;
padding: 0;
}
- Further information: position.css/*
- Storage location: position.css
#header form .button
The following classes and ids will influence the button class of a form in the header. Please notice the ordering. Every CSS attribute will be overwritten by the class above.
Main Class
/* ##### layout.css line 196-205 #### */
#header form .button
{
background:url(../images/pfeil.gif) #000 no-repeat;
border:0;
color:#fff;
font-weight:bold;
margin:20px 10px 0 0;
padding:0px 5px 0px 30px;
cursor:pointer;
}
- Storage location: layout.css
Secondary Classes
/* ##### position.css line 15-19 #### */
*
{
margin: 0;
padding: 0;
}
- Further information: position.css/*
- Storage location: position.css
#header form .inputbox
The following classes and ids will influence the inputbox class of a form in the header. Please notice the ordering. Every CSS attribute will be overwritten by the class above.
Main Class
/* ##### layout.css line 207-215 #### */
#header form .inputbox
{
background:#fff;
border:solid 2px #93246F;
font-weight:bold;
padding:0 0 0 2px;
margin:20px 10px 0 0 !important;
width:6em;
}
/* ##### layout.css line 217-220 #### */
#header form .inputbox:focus
{
border:solid 2px #000;
}
- Storage location: layout.css
Secondary Classes
/* ##### position.css line 15-19 #### */
*
{
margin: 0;
padding: 0;
}
- Further information: position.css/*
- Storage location: position.css