zamiland

» Habillage de la recherche sur l'index (sur Prosilver)

a travers ce Tuto vous allez pouvoir mettre un Habillage sur la Recherche de l'index du forum

» Mise en place

Voici les images utilisé:


Allez sur votre FTP et copier les images dans le dossier suivant : styles/votre_style/theme/images/



» Partie .html
commencer par ouvrir Votre-style/template/overall_header.html

chercher

Code: Tout sélectionner

<div id="search-box">
            <form action="{U_SEARCH}" method="post" id="search">
            <fieldset>
               <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
               <input class="button2" value="{L_SEARCH}" type="submit" /><br />
               <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}

remplacer par

Code: Tout sélectionner

<div id="search-box">
         <input class="boutton" value="{L_SEARCH}" type="submit" />
            <form action="{U_SEARCH}" method="post" id="search">
            <fieldset>
               <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
                <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}

» Partie .css
ouvrir Votre-style/theme/common.css

chercher

Code: Tout sélectionner

#search-box {
   color: #FFFFFF;
   position: relative;
   margin-top: 30px;
   margin-right: 5px;
   display: block;
   float: right;
   text-align: right;
   white-space: nowrap; /* For Opera */
}

#search-box #keywords {
   width: 95px;
   background-color: #FFF;
}

remplacer par

Code: Tout sélectionner

#search-box {
   color: #FFFFFF;
   position: relative;
   height: 25px;
   width: 194px;
   margin-top: 22px;
   margin-right: 5px;
   display: block;
   float: right;
   text-align: center;
   white-space: nowrap; /* For Opera */
}

#search-box #keywords {
    display: block;
    width: 165px;
   padding: 5px;
    margin: 3px 0 6px 20px;
}

a.boutton, input.boutton  {
    height: 22px;
   width: 95px;
   display: block;
   text-decoration: none;
   font-size: 1em;
   font-weight: bold;
   text-align: center;
   padding: 3px;
   margin: -27px 0 2px 52px;
}   


ouvrir Votre-style/theme/colours.css

chercher

Code: Tout sélectionner

#search-box {
   color: #FFFFFF;
}

#search-box #keywords {
   background-color: #FFF;
}

#search-box input {
   border-color: #0075B0;
}

remplacer par

Code: Tout sélectionner

#search-box {
    background: url("{T_THEME_PATH}/images/searchbox.gif") no-repeat;
   color: #FFFFFF;
   
}

#search-box #keywords {
   color: #FFFFFF;
   background-color: transparent;
   border: none;
}

#search-box input {
   border: none;
}

chercher

Code: Tout sélectionner

a.button1, input.button1, input.button3, a.button2, input.button2 {

ajouter avant sur une nouvelle ligne

Code: Tout sélectionner

a.boutton, input.boutton {
     background: url("{T_THEME_PATH}/images/bouton.gif") no-repeat;
    color: #000;
}

chercher

Code: Tout sélectionner

input.search {
   background-image: url("{T_THEME_PATH}/images/icon_textbox_search.gif");
}

remplacer par

Code: Tout sélectionner

input.search {
   /*background-image: url("{T_THEME_PATH}/images/icon_textbox_search.gif");*/
}

aperçus: