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