Bonjour !

Puisque ddtddt me l'a suggéré, je m'en viens partager ma méthode (de barbare) pour placer la barre de recherche dans le header.

En premier lieu, mon thème est un thème personnalisé, enfant du thème par défaut (default), j'ai donc récupéré les templates header.tpl et menubar_menu.tpl de ce dernier, que j'ai placés dans un dossier templates pour mon thème personnel -> Ils auront la prévalence sur les templates par défaut et si j'ai un problème je n'aurai qu'à les virer et tout remarchera comme d'ordinaire.

Dans menubar_menu.tpl je vire cette partie du code (enfin, on peut tout aussi bien la garder pour avoir deux barres de recherche, mais je n'en vois pas trop l’intérêt) :

<form action="{$ROOT_URL}qsearch.php" method="get" id="quicksearch" onsubmit="return this.q.value!='' && this.q.value!=qsearch_prompt;">
  <p style="margin:0;padding:0"{*this <p> is for html validation only - does not affect positioning*}>
    <input type="text" name="q" id="qsearchInput" onfocus="if (value==qsearch_prompt) value='';" onblur="if (value=='') value=qsearch_prompt;">
  </p>
</form>
<script type="text/javascript">var qsearch_prompt="{'Quick search'|@translate|@escape:'javascript'}"; document.getElementById('qsearchInput').value=qsearch_prompt;</script>

Dans header.tpl
J'ai personnalisé mon header (cf la pièce jointe) du coup le résultat dépendra de vos compétences en HTML/CSS et surtout de ce que vous voulez obtenir.

Dans le template par défaut, vous avez cette ligne :

<div id="theHeader">{$PAGE_BANNER}</div>

En vous contentant du strict minimum vous n'avez plus qu'à placer votre barre de recherche sournoisement volée au menubar juste en dessous :

<div id="theHeader">{$PAGE_BANNER}</div>
<div id="theSearchBar">
<form action="{$ROOT_URL}qsearch.php" method="get" id="quicksearch" onsubmit="return this.q.value!='' && this.q.value!=qsearch_prompt;">
  <p style="margin:0;padding:0"{*this <p> is for html validation only - does not affect positioning*}>
    <input type="text" name="q" id="qsearchInput" onfocus="if (value==qsearch_prompt) value='';" onblur="if (value=='') value=qsearch_prompt;">
  </p>
</form>
<script type="text/javascript">var qsearch_prompt="{'Quick search'|@translate|@escape:'javascript'}"; document.getElementById('qsearchInput').value=qsearch_prompt;</script>
</div>

Il ne vous restera plus qu'à rajouter un peu de css personnalisé là dessus, du genre  :

#theSearchBar {
text-align:center; /* On centre la barre de recherche */
}

#theSearchBar #quicksearch input {
width:200px; /* on réduit la taille du champ de recherche */
}

Vous pouvez évidemment vous lancer dans des personnalisations plus pointues, comme dans mon cas (le terme de "pointu" étant à prendre avec des pincettes XD), mais elles auront tendance à varier selon les cas donc je ne me lancerai pas là dedans u_u'

Évidemment, l'ensemble de mes explications n'est valable (du moins "testé") que pour Piwigo 2.2.3 (mon ancienne version, si je ne m'abuse) et 2.3.0. Et je n'ai pas eu la motivation de vérifier que mes explications rendaient bien sur le thème par défaut (je sors d'une bataille ardue avec ma mise à jour), donc je n'exclus pas quelques étrangetés.

Voilà. Prévenez moi si quelque chose manque de clarté @x@

Dernière modification par Lostmindy (2011-11-05 16:32:58)