Come primo passaggio creare il file search-block-form.tpl.php nel proprio tema
<?php
/**
* @file
* Displays the search form block.
*
* Available variables:
* - $search_form: The complete search form ready for print.
* - $search: Associative array of search elements. Can be used to print each
* form element separately.
*
* Default elements within $search:
* - $search['search_block_form']: Text input area wrapped in a div.
* - $search['actions']: Rendered form buttons.
* - $search['hidden']: Hidden form elements. Used to validate forms when
* submitted.
*
* Modules can add to the search form, so it is recommended to check for their
* existence before printing. The default keys will always exist. To check for
* a module-provided field, use code like this:
* @code
* <?php if (isset($search['extra_field'])): ?>
* <div class="extra-field">
* <?php print $search['extra_field']; ?>
* </div>
* <?php endif; ?>
* @endcode
*
* @see template_preprocess_search_block_form()
*/
?>
<div class="search-box" role="search">
<input class="" name="search_block_form" value="" required id="cerca">
<button class="" title="Avvia la ricerca" aria-label="Avvia la ricerca"></button>
</div>
<?php echo $search['hidden']; ?>
Stile CSS
.search-box {
border-radius: 3px;
background: #FFF;
margin: 30px 0 10px 0;
padding:0;
position: relative;
display: flex;
width: 99%;
text-align: right;
float: right;
}
.search-box button {
border-style: none;
background: #000;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.search-box button::before {
font-family: "FontAwesome";
content:"\f002";
color: #FFF !important;
background-image: none;
padding: .35em;
text-transform: none;
margin: .1em;
}
.search-box input {
font-size: 1rem;
letter-spacing: .01em;
border: 0;
color: #666;
margin: 0;
padding: .35em;
margin: .1em 0 .1em .1em;
width: 100%;
}
Inserirlo dove si preferische con il seguente codice:
<?php $block = module_invoke( 'search', 'block_view', 'search'); print render($block); ?>
Effettuare il Flush della Cache di Druapl