Page 1 sur 1

[TUTO] Habillage de la recherche sur l'index v2

MessagePosté: 28 Nov 2010, 10:48
de sub60
» 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 l' images utilisé:
Image
Allez sur votre FTP et copier l' 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">
                 <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="boutton" value="ok" type="submit" />
                    <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: 35px;
   width: 205px;
   margin-top: 22px;
   margin-right: 5px;
   display: block;
   float: right;
   text-align: center;
   white-space: nowrap; /* For Opera */
}

#search-box #keywords {
    display: block;
    width: 145px;
    padding: 0px;
    margin: 10px 0 10px 28px;
}

a.boutton, input.boutton  {
    height: 25px;
   width: 30px;
   display: block;
   text-decoration: none;
        font-family: Verdana, Helvetica, Arial, sans-serif;
   font-size: 1.2em;
   font-weight: bold;
   text-align: center;
   padding: 6px;
   margin: -33px 18px 9px 174px;
}   


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: transparent;
    color: #fff;
}


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:Image