[3.0] Habillage de la recherche sur l'index

[Prosilver]

- 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

aperçus:

- Mise en place

Voici l' images utilisé:

searchbox.png

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");*/
}