[PHPBB2] Menu Rechercher en haut à gauche effet survol

Milouze14 le Ven 21 Juin 2013 - 10:37

,

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:

Un petit merci pour voir le contenu en cliquant sur

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

fleur78 le Ven 21 Juin 2013 - 16:35

Teten85 le Sam 22 Juin 2013 - 20:20

Je découvre merci

Teten85 le Sam 22 Juin 2013 - 20:28

Ça fonctionne evghe y nickel

Milouze14 le Sam 22 Juin 2013 - 20:29

Penses a mettre le lien de ton forum dans ton profil Didier .

Teten85 le Dim 23 Juin 2013 - 0:07

pierre31250 le Dim 23 Juin 2013 - 21:54

fascicularia le Mar 9 Juil 2013 - 11:07

fleur78 le Jeu 25 Juil 2013 - 19:39

Squall le Dim 4 Aoû 2013 - 17:14

Invité le Dim 6 Oct 2013 - 11:49

Milouze14 le Dim 6 Oct 2013 - 11:51

Pourquoi tu insères ce smiley , il n'y a rien de drôle Maxime  

Invité le Dim 6 Oct 2013 - 11:51

Milouze14 le Dim 6 Oct 2013 - 11:55

Ok, alors n'utilises plus ces caractères qui correspondent à ce smileys   .

{12°S}coco-lapin le Jeu 17 Avr 2014 - 21:52

ThunderTB le Ven 5 Sep 2014 - 6:00

Eczema Help le Dim 12 Oct 2014 - 19:45

Sick.l.Offrande le Lun 13 Oct 2014 - 0:25

Invité le Dim 26 Oct 2014 - 17:44

Sick.l.Offrande le Mer 17 Déc 2014 - 20:22

patriciadpt30 le Mer 18 Fév 2015 - 21:14

1baptiste le Sam 28 Fév 2015 - 10:48

mariok le Ven 12 Juin 2015 - 14:16

El_Mojito le Mar 10 Nov 2015 - 14:49

dédé54 le Jeu 31 Déc 2015 - 17:37

El_Mojito le Sam 2 Jan 2016 - 13:31

Invité le Sam 5 Mar 2016 - 18:23

dragon594 le Sam 16 Juil 2016 - 22:13

Kaeyla le Dim 16 Avr 2017 - 7:38

Ombi le Mer 26 Juil 2017 - 22:13

Psychotic Bitch le Dim 27 Jan 2019 - 15:50

Ptite_Perle le Dim 10 Fév 2019 - 20:24

soleda le Lun 11 Fév 2019 - 11:42

fred9545 le Lun 11 Fév 2019 - 18:40

Ambroise le Mar 12 Fév 2019 - 13:33