[PHPBB2] Menu Rechercher en haut à gauche effet survol

Rappel du premier message :

,

je vais vous donner l'astuce pour avoir le menu de recherche assez original   .

On le cache en ne laissant apparaitre qu'une petite partie  .

-Astuce des Forums Milouze14&Compagnie- Astuce postée par: Réponse automatique: Merci de cliquer ici pour voir le message Pour toute information,merci de contacter un Membre du Staff

Allez on y va   .


Dans le template overall_header  :
Affichage/Templates/Général/ overall_header

Rechercher ceci:

Code:

<div style="clear: both;"></div>

Juste avant déposez ceci pour que le menu ne soit visible que par vos membres:

Code:


<!-- BEGIN switch_user_logged_in -->
<div id="M14_rechercher">
 <script type="text/javascript">
//<![CDATA[
var url_search = '/search';
insert_search_menu();//]]>
</script>
</div>
<!-- END switch_user_logged_in -->


Ou alors pour les invités

Code:


<div id="M14_rechercher">
 <script type="text/javascript">
//<![CDATA[
var url_search = '/search';
insert_search_menu();//]]>
</script>
</div>



Pensez à enregistrer puis à valider en cliquant respectivement sur    puis

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Collez ceci:

Code:


/*_____________DEBUT DU BLOC RECHERCHER PERSO____________________*/
/*le bloc dans sa totalite*/
#M14_rechercher div#search_menu
{
position:absolute !important;
width:250px !important;
height:130px !important;
top:100px !important;
left:-252px !important;
display:block!important;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}
/*on deplace le bloc*/
#M14_rechercher div#search_menu:hover
{
left:0!important;
}
/*on personnalise en affichant un texte*/
#M14_rechercher div#search_menu:before
{
content:'Moteur de recherche des forums';
color: #20aec8;
font-size:13px;
margin-left:10px;
}
/*on affiche un petite triangle a droite du bloc en le positionnant au milieu*/
#M14_rechercher div#search_menu:after
{
content:'';
float:left;
margin-top:-65px;
margin-left:254px;
border:1px solid #20aec8;
border-color:transparent transparent transparent #20aec8   ;
border-width:10px;/*ne pas toucher*/
}

/*on donne apparence au bloc rechercher*/
#M14_rechercher div#search_menu .forumline
{
background:#000000 !important ;
border:1px solid #20aec8;  
cursor:pointer;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

/*on donne apparence au champs de recherche*/
#M14_rechercher div#search_menu .forumline input.post
{
background-color:#000000;
color:#20aec8;
width:110px;/*ne pas toucher*/
border:1px solid #20aec8;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-o-transition-timing-function: ease-in;/*ne pas toucher*/
-webkit-transition: all 0.5s ease-in;/*ne pas toucher*/
-moz-transition: all 0.5s ease-in;/*ne pas toucher*/
-o-transition: all 0.5s ease-in;/*ne pas toucher*/
transition: all 0.5s ease-in;/*ne pas toucher*/
}
/*on donne apparence au champs de recherche au survol*/
#M14_rechercher div#search_menu .forumline input.post:hover
{
width:150px;/*ne pas toucher*/
background-color:#ffffff;
color:#000000;
}
/*on donne une apparence au bouton Go*/
#M14_rechercher div#search_menu .forumline input.button
{
background-color:#000000;
color:#20aec8;
font-weight:bold;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/*on supprime la bordure et donne une couleur*/
#M14_rechercher div#search_menu .forumline th.thHead {border:none;color:#20aec8;}
/*on donne une apparence à la barre de separation*/
#M14_rechercher div#search_menu .forumline .row2 hr {border:1px dotted #20aec8;}
/*on donne une apparence au texte Resultats par  Messages et sujets */
#M14_rechercher div#search_menu .forumline .row2 .genmed {color: #20aec8;}
/*on donne une apparence a la recherche avancee*/
#M14_rechercher div#search_menu .forumline a  
{
height:30px;
border-left:none !important;
border-top:none !important;
color:#20aec8;
text-decoration:none !important;
}


Voilà,c'est tout pour le moment.
Un soucis?
Direction l'entraide 
https://www.milouze14.com/f108-entraide-tous-supports

Merci beaucoup !

merci beaucoup