Customising the Beez template/header/mod search

From Joomla! Documentation

Jump to: navigation, search

Contents

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
Retrieved from "http://docs.joomla.org/Customising_the_Beez_template/header/mod_search"
Personal tools