Search code examples
htmlcsssmarty

SMARTY: Header-Search

Hey I have a slight Problem. Maybe somewone can help out real quick. The thing is i have this navbar (code below) implemented in my Website. It's just a welcome-text and a search but the search will not displayed properbly. I want a result like the search here on Stackoverflow just with the icon on the right side of the text-entry.

Code in the index.html:

{if strstr ($smarty.server.PHP_SELF, 'index')}
                <div class="{if strpos($smarty.server.PHP_SELF, 'checkout')}span12{else}span9 desk9{/if}" style="left: 0px;">
                    <div class="navbar navbar-default">
                            <div class="container">
                                <ul class="nav pull-left" >                             
                                    <li class="navbar-text"> HERZLICH WILLKOMMEN </li>
                                </ul>
                                <ul class="nav pull-right" >    
                                    <li class="navbar-search">{$box_SEARCH_HEADER}</li>
                                </ul>
                            </div>
                    </div>
                    {/if}
                </div>

code in the search_header.php: 

<? php 
$box_smarty = new smarty;
$box_smarty->assign('tpl_path', 'templates/' . CURRENT_TEMPLATE . '/');
$box_content = '';

require_once (DIR_FS_INC . 'xtc_hide_session_id.inc.php');

// BOF - GTB - 2010-09-20 - correct the Formular in dependences of the request type SSL / NONSSL
$box_smarty->assign('FORM_ACTION', xtc_draw_form('quick_find_header', xtc_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', $request_type, false), 'get') . xtc_hide_session_id());
//$box_smarty->assign('FORM_ACTION', xtc_draw_form('quick_find', xtc_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get') . xtc_hide_session_id());
// BOF - GTB - 2010-09-20 - correct the Formular in dependences of the request type SSL / NONSSL
//BOF - Dokuman - 14.08.2009 - Put dynamic "search"-text into box
//$box_smarty->assign('INPUT_SEARCH', xtc_draw_input_field('keywords', '', 'size="20" maxlength="30"'));
//BOF - web28 - 2010-04-11 - change input html size to css width
//$box_smarty->assign('INPUT_SEARCH', xtc_draw_input_field('keywords', IMAGE_BUTTON_SEARCH, 'size="20" maxlength="30" onfocus="if(this.value==this.defaultValue) this.value=\'\';" onblur="if(this.value==\'\') this.value=this.defaultValue;"'));

$search =  xtc_draw_input_field('keywords', IMAGE_BUTTON_SEARCH, 'class="span11" onfocus="if(this.value==this.defaultValue) this.value=\'\';" onblur="if(this.value==\'\') this.value=this.defaultValue;"');
$search .=  xtc_image_submit('button_quick_find.gif');
$box_smarty->assign('INPUT_SEARCH', $search);

//$box_smarty->assign('INPUT_SEARCH', xtc_draw_input_field('keywords', IMAGE_BUTTON_SEARCH, 'class="span11" onfocus="if(this.value==this.defaultValue) this.value=\'\';" onblur="if(this.value==\'\') this.value=this.defaultValue;"'));
//EOF - web28 - 2010-04-11 - change input html size to css width
//EOF - Dokuman - 14.08.2009 - Put dynamic "search"-text into box
$box_smarty->assign('FORM_END', '</form>');
$box_smarty->assign('LINK_ADVANCED', xtc_href_link(FILENAME_ADVANCED_SEARCH));
$box_smarty->assign('BOX_CONTENT', $box_content);
$box_smarty->assign('PLACEHOLDER', IMAGE_BUTTON_SEARCH);

$box_smarty->assign('language', $_SESSION['language']);
$box_smarty->caching = 0;
$box_search_header = $box_smarty->fetch(CURRENT_TEMPLATE . '/boxes/box_search_header.html');

$smarty->assign('box_SEARCH_HEADER', $box_search_header);

?>

code box_search_header.html:

{$FORM_ACTION|replace:'<form':'<form class="navbar-search pull-right"'}
{$INPUT_SEARCH|replace:'span11"':'search-query span2" placeholder="gggg"'|replace:'gggg':"`$PLACEHOLDER`"}   
 {$FORM_END}

and now the css-file:

#quick_find_header input {
    background-color: #515151;
    border-color: #111111;
    color: #999;
    }
    #quick_find_header input:focus {
    box-shadow: none;
    color:#fff;
    }

Final Code that I get when opening the page: 

 <div class="navbar navbar-default">
                                <div class="container">
                                    <ul class="nav pull-left" >                             
                                        <li class="navbar-text"> HERZLICH WILLKOMMEN </li>
                                    </ul>
                                    <ul class="nav pull-right" >    
                                        <li class="navbar-search">
<!-- Orginal
<form class="navbar-search pull-right" id="quick_find_header" action="http://vorschau2.de.dedi2539.your-server.de/fitinart.com/advanced_search_result.php" method="get">
    <input type="text" name="keywords" value="Suchen" class="search-query span2" placeholder="Suchen" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" /><input type="image" src="templates/bootstrap/buttons/german/button_quick_find.gif" alt="" />   
</form>
-->

<!--Ãnderung -->
<form class="navbar-form pull-right" id="quick_find_header" action="http://vorschau2.de.dedi2539.your-server.de/fitinart.com/advanced_search_result.php" method="get">
    <input type="text" name="keywords" value="Suchen" class="span2" placeholder="Suchen" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" /><input type="image" src="templates/bootstrap/buttons/german/button_quick_find.gif" alt="" />
</form></li>
                                    </ul>
                                </div>

                        </div>
Solution

  • Just use background-image in the text input, add some padding to the right and remove the image button. i.e.

    #quick_find_header input{
  padding-right:25px;
  background:url(image.png) right center;
}