[PHPBB2] Menu déroulant et Profil Rechercher et Nouveau M.P séparé

,

comme annoncé récemment ,
je vais vous donner le moyen d'avoir un menu  pour les invités
et deux autres pour les connectés (membres) .

Vous aurez un bouton pour le profil et un autre pour le reste
des différents liens actuels (FAQ, Membres etc ,etc ) sauf le menu rechercher et le profil qu'il faudra masquer .

Au survol de ces derniers les menus s'afficheront et dévoileront leur contenu.
Pour le menu des liens (FAQ, Membres etc ,etc ) quelque soit le statut (connecté ou non)
quand le bouton se déploiera on affichera avec un effet de déplacement le pseudo du membre
connecté ou le statut invité.

Le menu rechercher sera caché en haut à gauche et d'un simple survol se déplacera pour s'affiche dans sa totalité.

Un bouton en haut à droite vous préviendra d'un nouveau message privé  le cas échéant .


Voilà pour résumer les ami(e)s.

La C.S.S étant très volumineuse , je vous propose d'héberger cette dernière sur mon nom de domaine et ceci gratuitement les ami(e)s en m'envoyant un MP .

Je vous donnerais les explications par retour.

Toute divulgation du lien de la C.S.S donnée , ce dernier sera systématiquement supprimé de la base de données.
Pour en faire la demande, il suffira de répondre pour voir le contenu puis de modifier les couleurs et les liens du profil
puis m'envoyer un MP avec tout le contenu de votre C.S.S modifiée.
En retour vous recevrez le lien avec les explications.

Le tutoriel a été conçu pour tous les menus disponibles sur ForumActif  

Ensuite rien ne vous empêche de créer d'autre menu personnel
le menu déroulant s'adaptera .

Allez un tit aperçu :
Pour les invités.

L'aperçu imagé:



Au survol:
L'aperçu imagé:



Pour les membres.

L'aperçu imagé:


Au survol:
L'aperçu imagé:

Pour le profil:
L'aperçu imagé:

Au survol:
L'aperçu imagé:



Pour que le tuto fonctionne sur votre forum, il faut impérativement
avoir cette disposition dans votre P.A:
Affichage/Page d'accueil/En-tête & Navigation/Barre de navigation



Profil
Membres
Rechercher
Accueil
S'enregistrer
Portail
FAQ
Calendrier
Groupes
Membres
Galerie
Messagerie
Connexion

Montez ou descendez en cliquant sur les boutons pour arriver à ce résultat .




On passe aux codes :
https://www.milouze14.com/t24879-une-navigation-a-gauche-en-menu-deroulant-avec-profil-rechercher-et-nouveau-mp-separe#507040

Allez on y va   .


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

Recherchez ceci:

Code:

<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>

Remplacez par ceci:

Code:


<td align="{MENU_POSITION}"{MENU_NOWRAP}>
<!-- Permettra d afficher la variable USERNAME -->
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
 <!-- BEGIN switch_user_logged_out -->
<!-- LE MENU DES INVITES -->
 <div id="M14_menu_invite">
<li>
<a href="#">Navigation</a>
 <p>Bienvenu(e)<br /><span><span class="USERNAME"></span></span></p>
<ul>
 <li>{GENERATED_NAV_BAR}</li>
</ul>
</li>

</div>
<!-- FIN DU MENU DES INVITES -->
<!-- END switch_user_logged_out -->
 <!-- BEGIN switch_user_logged_in -->
<!-- DEBUT DU MENU DES MEMBRES -->
<div id="M14_menu">
<li>
<a href="#">Navigation</a>
 <p>Bienvenu(e)<br /><span><span class="USERNAME"></span></span></p>
<ul>
 <li>{GENERATED_NAV_BAR}</li>
</ul>
</li>
<!-- on supprime le pseudo de la deconnexion -->
 <script type="text/javascript">
$(function() {
       $('a.mainmenu[href^="/login?logout=1&tid="]').text('Déconnexion');
       });
</script>
</div>
  <!-- FIN DU MENU DES MEMBRES -->
 
<!-- DEBUT DU MENU RECHERCHER -->
<div id="M14_rechercher">
 
<script type="text/javascript">
     //<![CDATA[
var url_search = '/search';
insert_search_menu();//]]>

   </script>

</div>

 <!-- FIN DU MENU RECHERCHER -->
 <!-- DEBUT DU MENU DU PROFIL -->
                                        
            <div id="M14_profil">

<li>
 <a href="#">Profil</a>
 <ul>
<li><a href="/profile?mode=editprofile">Informations</a></li>
<li><a href="/profile?mode=editprofile&page_profil=preferences">Préférences</a></li>
<li><a href="/profile?mode=editprofile&page_profil=signature">Signature</a></li>
<li><a href="/profile?mode=editprofile&page_profil=attachments">Fichiers joints</a></li>
<li><a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a></li>
<li><a href="/profile?mode=editprofile&page_profil=friendsfoes">Amis et ignorés</a></li>
<li><a href="/profile?mode=editprofile&page_profil=notifications">Notifications</a></li>
<li><a href="/search?search_id=watchsearch">Sujets surveillés</a></li>
<li><a href="/search?search_id=favouritesearch">Favoris</a></li>
<li><a href="/search?search_id=draftsearch">Brouillons</a></li>
<li><a href="/profile?mode=editprofile&page_profil=facebook">Facebook</a></li>
</ul>
</li>
</div>      
 <!-- FIN DU MENU DU PROFIL -->
 <!-- DEBUT DU BOUTON M.P -->
<div id="M14_MP"><div style="display:none">{GENERATED_NAV_BAR}</div>
<a href="/privmsg?folder=inbox" id="mp">Messagerie</a>
<!-- le plugin qui permettra l affichage du nouveau M.P-->
 <script type="text/javascript">
function blinker()
{
       setTimeout(function() {setInterval(function () {$("#new_message");},1000);},500);
       setInterval(function () {$("#new_message");},1000);
}

jQuery().ready(function(){
      
      /* on prend l'élément du menu de base de nouveau message */
       var e= $("#i_icon_mini_new_message");
      
      /* si il y en a pas, c'est qu'il y a pas de nouveau message donc on termine là */
       if(!e.length){
        return;
     }else{
      
       /* sinon */
        /* on prend le nombre de nouveau message */
        var n= +e.attr("title").replace(/^([1-9][0-9]*) .*$/,"$1");
        
        /* on change l'identifiant en new_message et on remplace le texte */
        $("#mp").attr("id","new_message").text(n+" Nouveau M.P"+(n>1?"s":""));
        
        blinker();
     }
    
   
      });

</script>
</div>
 <!-- FIN DU BOUTON M.P -->
<!-- END switch_user_logged_in -->            
</td>                


Pensez à enregistrer puis à valider en cliquant respectivement sur    puis


Collez ceci:

Code:


/*_____________LE MENU DES INVITES____________________*/
#M14_menu_invite
{
position:absolute;/*ne pas toucher*/
left:-140px;/*ne pas toucher*/
top:160px;/*ne pas toucher*/
width: 240px;/*ne pas toucher*/
padding: 5px 0;/*ne pas toucher*/
list-style: none;/*ne pas toucher*/
border-top:1px solid #20aec8;/*bordure du haut*/
border-right:1px solid #20aec8;/*bordure a droite*/
border-bottom:1px solid #20aec8;/*bordure basse*/
border-left:none;/*ne pas toucher*/
background-color:#000000;/*on donne une couleur de fond*/
cursor:pointer;/*le type de curseur*/
/*les bordures arrondies*/
-webkit-border-top-right-radius: 6px;/*ne pas toucher*/
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
/*l effet de transition qui s effectuera au survol*/
-webkit-transition: left 0.5s ease-in-out;/*modifiez la valeur 0.5s si besoin*/
-moz-transition: left 0.5s ease-in-out;/*modifiez la valeur 0.5s si besoin*/
-o-transition: left 0.5s ease-in-out;/*modifiez la valeur 0.5s si besoin*/
transition: left 0.5s ease-in-out;/*modifiez la valeur 0.5s si besoin*/
}
/*La barre de navigation pour les invites au survol*/
#M14_menu_invite:hover
{
left:0;/*ne pas toucher*/
border-top:1px solid #20aec8;/*bordure du haut*/
border-right:1px solid #20aec8;/*bordure a droite*/
border-bottom:none;/*ne pas toucher*/
border-left:none;/*ne pas toucher*/
  /*les bordures arrondies*/
-webkit-border-top-right-radius: 6px;/*ne pas toucher*/
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
}
/*on positionne le bloc qui contiendra le titre*/
#M14_menu_invite  li
{
float:right;/*ne pas toucher*/
padding:8px 9px 0  ;/*ne pas toucher*/
position: relative;/*ne pas toucher*/
}

/*le titre du menu*/
#M14_menu_invite a
{
width:90px;/*ne pas toucher*/
float: left;/*ne pas toucher*/
padding: 5px 11px 11px 12px ;/*ne pas toucher*/
color: #20aec8;/*on lui donne une couleur*/
font-size: 12px;/*on lui donne une taille*/
text-decoration: none !important;/*on supprime le soulignement*/
-webkit-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-moz-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-o-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
border-top:1px solid #20aec8;/*bordure en haut*/
border-left:1px solid #20aec8;/*bordure a gauche*/
  /*les bordures arrondies*/
-webkit-border-top-left-radius: 6px;/*ne pas toucher*/
-webkit-border-top-right-radius: 6px;/*ne pas toucher*/
-moz-border-radius-topleft: 6px;/*ne pas toucher*/
-moz-border-radius-topright: 6px;/*ne pas toucher*/
border-top-left-radius: 6px;/*ne pas toucher*/
border-top-right-radius: 6px;/*ne pas toucher*/
}
/*le titre du menu au survol*/
#M14_menu_invite a:hover
{
border-top:1px solid #5EA440;/*bordure en haut plus changement de couleur*/
border-left:1px solid #5EA440;/*bordure a gauche plus changement de couleur*/
color:#5EA440;/*on lui donne une couleur*/
}
#M14_menu_invite li p
{
position:absolute;/*ne pas toucher*/
margin-top:0;/*ne pas toucher*/
margin-left:0;/*ne pas toucher*/
color:none !important; /*ne pas toucher*/
font-size:10px;/*ne pas toucher*/
width:150px;/*ne pas toucher*/
-moz-opacity:0;/*ne pas toucher*/
-khtml-opacity:0;/*ne pas toucher*/
-ms-filter:"alpha(opacity=0)";/*ne pas toucher*/
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);/*ne pas toucher*/
filter:alpha(opacity=0);/*ne pas toucher*/
opacity:0;/*ne pas toucher*/
zoom: 1;/* HACK POUR IE ne pas toucher*/
-webkit-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-moz-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-o-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
}
/* Au survol on deplace le menu invite*/
#M14_menu_invite:hover  li p
{
margin-left:-140px;/*ne pas toucher*/
color:#40A447;/*la couleur de police*/
-moz-opacity:1;/*ne pas toucher*/
-khtml-opacity:1;/*ne pas toucher*/
-ms-filter:"alpha(opacity=100)";/*ne pas toucher*/
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);/*ne pas toucher*/
filter:alpha(opacity=100);/*ne pas toucher*/
opacity:1;/*ne pas toucher*/
zoom: 1;/* HACK POUR IE ne pas toucher*/
}
/*le menu de username*/
#M14_menu_invite li p span
{
margin-left:0; /*ne pas toucher*/
position:relative;/*ne pas toucher*/
}

/*Le bloc qui contient tous les liens*/
#M14_menu_invite ul
{
list-style: none;/*ne pas toucher*/
margin: 0;/*ne pas toucher*/
padding:0 5px 0 5px;/*ne pas toucher*/
position: absolute;/*ne pas toucher*/
top: 0;/*ne pas toucher*/
left:-400px;/*ne pas toucher*/
z-index: 999;/*ne pas toucher*/
height:0;/*ne pas toucher*/
overflow:hidden;/*ne pas toucher*/
-moz-transition-property:left, top ,height ;/*ne pas toucher*/
-moz-transition-duration: 1s ,1s, 2s;/*augmentez les valeurs en seconde si besoin*/
-moz-transition-timing-function:  ease-out ;/*ne pas toucher*/
-webkit-transition-property: left ,top, height ;/*ne pas toucher*/
-webkit-transition-duration:1s , 1s ,2s;/*augmentez les valeurs en seconde si besoin*/
-webkit-transition-timing-function: ease-out ;/*ne pas toucher*/
-o-transition-property:left, top,height ;/*ne pas toucher*/
-o-transition-duration: 1s , 1s ,2s ;/*augmentez les valeurs en seconde si besoin*/
-o-transition-timing-function:  ease-out ;/*ne pas toucher*/
-ms-transition-property: left ,top,height;/*ne pas toucher*/
-ms-transition-duration:1s , 1s ,2s ;/*augmentez les valeurs en seconde si besoin*/
-ms-transition-timing-function:  ease-out ;/*ne pas toucher*/

}
/* On affiche au survol du bloc qui contient le titre et le invite */
#M14_menu_invite li:hover  ul  
{
height:auto;/*ne pas toucher*/
display: block;/*ne pas toucher*/
background:#000000;/*on lui donne une couleur de fond*/
top: 39px;/*ne pas toucher*/
left:9px;/*ne pas toucher*/
border-top:none;/*ne pas toucher*/
border-right:1px solid #20aec8;/*bordure a droite*/
border-bottom:1px solid #20aec8;/*bordure basse*/
border-left:1px solid #20aec8;/*bordure a gauche*/
-webkit-border-bottom-right-radius: 6px;/*ne pas toucher*/
-webkit-border-bottom-left-radius: 6px;/*ne pas toucher*/
-moz-border-radius-bottomright: 6px;/*ne pas toucher*/
-moz-border-radius-bottomleft: 6px;/*ne pas toucher*/
border-bottom-right-radius: 6px;/*ne pas toucher*/
border-bottom-left-radius: 6px;/*ne pas toucher*/
}
/*Les blocs qui contiennent les liens*/
#M14_menu_invite ul li
{
float: none;/*ne pas toucher*/
margin: 0;/*ne pas toucher*/
display:block;/*ne pas toucher*/
padding:5px;/*ne pas toucher*/

}
/*les liens*/
#M14_menu_invite ul li  .mainmenu
{
padding:3px 5px 3px 5px;/*ne pas toucher*/
display:block;/*ne pas toucher*/
float:none;/*ne pas toucher*/
color:#666666;/*on lui donne une couleur*/
border-left: 1px solid #666666;/*la bordure de gauche */
border-right: 1px solid #666666;/*la bordure de droite*/
border-bottom:1px solid #006699;/*la bordure basse*/
-webkit-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-moz-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-o-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
}
/*les liens au survol*/
#M14_menu_invite ul li  .mainmenu:hover
{
padding:4px 5px 4px 5px;/*on donne des espaces de 3px sur les quatres cotes*/
color:#ffffff;/* la couleur au survol*/
border-left: 1px solid #cccccc;/*la bordure de gauche */
border-right: 1px solid #cccccc;/*la bordure de droite */
border-bottom:3px solid #006699;/*la bordure basse*/
-moz-box-shadow: -8px 0px 34px #20aec8;/*peut etre supprime*/
-webkit-box-shadow: -8px 0px 34px #20aec8;/*peut etre supprime*/
box-shadow: -8px 0px 34px #20aec8;/*peut etre supprime*/
  /*les bordures arrondies*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/*_____________FIN DU MENU DES INVITES____________________*/


/*_____________SUPPRESSION DES IMAGES DE LA BARRE DE NAVIGATION____________________*/
img#i_icon_mini_index  , img#i_icon_mini_portal , img#i_icon_mini_gallery ,
img#i_icon_mini_calendar , img#i_icon_mini_faq , img#i_icon_mini_logout , img#i_icon_mini_login ,
img#i_icon_mini_search , img#i_icon_mini_members , img#i_icon_mini_groups , img#i_icon_mini_profile  ,
img#i_icon_mini_register , #i_icon_mini_message  , #i_icon_mini_new_message
{display:none;}/*ne pas toucher*/
/*_____________FIN DE SUPPRESSION DES IMAGES DE LA BARRE DE NAVIGATION____________________*/
/*_____________LE MENU DES MEMBRES____________________*/
/*on cache le profil*/
#M14_menu ul li .mainmenu:first-child  {display:none;}/*ne pas toucher*/
/*on cache le menu rechercher*/
#M14_menu ul li .mainmenu:nth-child(2){display:none;}/*ne pas toucher*/

/*La barre de navigation*/
#M14_menu
{
position:absolute;/*ne pas toucher*/
left:-140px;/*ne pas toucher*/
top:160px;/*ne pas toucher*/
width: 240px;/*ne pas toucher*/
padding: 5px 0;/*ne pas toucher*/
list-style: none;/*ne pas toucher*/
border-top:1px solid #20aec8;/*bordure du haut*/
border-right:1px solid #20aec8;/*bordure a droite*/
border-bottom:1px solid #20aec8;/*bordure basse*/
border-left:none;/*ne pas toucher*/
background-color:#000000;/*on donne une couleur de fond*/
cursor:pointer;/*le type de curseur*/
/*les bordures arrondies*/
-webkit-border-top-right-radius: 6px;/*ne pas toucher*/
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
/*l effet de transition qui s effectuera au survol*/
-webkit-transition: left 0.5s ease-in-out;/*augmentez la valeur 0.5s si besoin*/
-moz-transition: left 0.5s ease-in-out;/*augmentez la valeur 0.5s si besoin*/
-o-transition: left 0.5s ease-in-out;/*augmentez la valeur 0.5s si besoin*/
transition: left 0.5s ease-in-out;/*augmentez la valeur 0.5s si besoin*/

}
/*La barre de navigation au survol*/
#M14_menu:hover
{
left:0;/*ne pas toucher*/
border-top:1px solid #20aec8;/*bordure du haut*/
border-right:1px solid #20aec8;/*bordure a droite*/
border-bottom:none;/*ne pas toucher*/
border-left:none;/*ne pas toucher*/
  /*les bordures arrondies*/
-webkit-border-top-right-radius: 6px;/*ne pas toucher*/
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;

}


/*Le menu du pseudo*/
#M14_menu li p
{
position:absolute;/*ne pas toucher*/
margin-top:0;/*ne pas toucher*/
margin-left:0;/*ne pas toucher*/
color:none !important; /*ne pas toucher*/
font-size:10px;/*ne pas toucher*/
width:150px;/*ne pas toucher*/
-moz-opacity:0;/*ne pas toucher*/
-khtml-opacity:0;/*ne pas toucher*/
-ms-filter:"alpha(opacity=0)";/*ne pas toucher*/
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);/*ne pas toucher*/
filter:alpha(opacity=0);/*ne pas toucher*/
opacity:0;/*ne pas toucher*/
zoom: 1;/* HACK POUR IE ne pas toucher*/
-webkit-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-moz-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-o-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
}
/* Au survol on deplace le menu pseudo*/
#M14_menu:hover  li p
{
margin-left:-140px;/*ne pas toucher*/
color:#40A447;/*la couleur de police*/
-moz-opacity:1;/*ne pas toucher*/
-khtml-opacity:1;/*ne pas toucher*/
-ms-filter:"alpha(opacity=100)";/*ne pas toucher*/
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);/*ne pas toucher*/
filter:alpha(opacity=100);/*ne pas toucher*/
opacity:1;/*ne pas toucher*/
zoom: 1;/* HACK POUR IE ne pas toucher*/
}
/*le menu de username*/
#M14_menu li p span
{
margin-left:0; /*ne pas toucher*/
position:relative;/*ne pas toucher*/
}

/*On positionne le bloc qui contiendra le titre*/
#M14_menu  li
{
float:right;/*ne pas toucher*/
padding:8px 9px 0  ;/*ne pas toucher*/
position: relative;/*ne pas toucher*/
}
/*l apparence du titre et son positionnement*/
#M14_menu a
{
width:90px;/*ne pas toucher*/
float: left;/*ne pas toucher*/
padding: 5px 11px 11px 12px ;/*ne pas toucher*/
color: #20aec8;/*on lui donne une couleur*/
font-size: 12px;/*on lui donne une taille*/
text-decoration: none !important;/*on supprime le soulignement*/
-webkit-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-moz-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-o-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
border-top:1px solid #20aec8;/*bordure en haut*/
border-left:1px solid #20aec8;/*bordure a gauche*/
  /*les bordures arrondies*/
-webkit-border-top-left-radius: 6px;/*ne pas toucher*/
-webkit-border-top-right-radius: 6px;/*ne pas toucher*/
-moz-border-radius-topleft: 6px;/*ne pas toucher*/
-moz-border-radius-topright: 6px;/*ne pas toucher*/
border-top-left-radius: 6px;/*ne pas toucher*/
border-top-right-radius: 6px;/*ne pas toucher*/
}
/*l apparence du titre au survol*/
#M14_menu a:hover
{
border-top:1px solid #5EA440;/*bordure en haut plus changement de couleur*/
border-left:1px solid #5EA440;/*bordure a gauche plus changement de couleur*/
color:#5EA440;/*on lui donne une couleur*/
}
/*Le bloc qui contient tous les liens*/
#M14_menu ul
{
list-style: none;/*ne pas toucher*/
margin: 0;/*ne pas toucher*/
padding:0 5px 0 5px;/*ne pas toucher*/
position: absolute;/*ne pas toucher*/
top: 0;/*ne pas toucher*/
left:-400px;/*ne pas toucher*/
z-index: 999;/*ne pas toucher*/
height:0;/*ne pas toucher*/
overflow:hidden;/*ne pas toucher*/
-moz-transition-property:left, top ,height ;/*ne pas toucher*/
-moz-transition-duration: 1s ,1s, 2s;/*augmentez les valeurs en seconde si besoin*/
-moz-transition-timing-function:  ease-out ;/*ne pas toucher*/
-webkit-transition-property: left ,top, height ;/*ne pas toucher*/
-webkit-transition-duration:1s , 1s ,2s;/*augmentez les valeurs en seconde si besoin*/
-webkit-transition-timing-function: ease-out ;/*ne pas toucher*/
-o-transition-property:left, top,height ;/*ne pas toucher*/
-o-transition-duration: 1s , 1s ,2s ;/*augmentez les valeurs en seconde si besoin*/
-o-transition-timing-function:  ease-out ;/*ne pas toucher*/
-ms-transition-property: left ,top,height;/*ne pas toucher*/
-ms-transition-duration:1s , 1s ,2s ;/*augmentez les valeurs en seconde si besoin*/
-ms-transition-timing-function:  ease-out ;/*ne pas toucher*/

}
/* On affiche au survol du bloc qui contient le titre et le pseudo */
#M14_menu li:hover  ul  
{
height:auto;/*ne pas toucher*/
display: block;/*ne pas toucher*/
background:#000000;/*on lui donne une couleur de fond*/
top: 39px;/*ne pas toucher*/
left:9px;/*ne pas toucher*/
border-top:none;/*ne pas toucher*/
border-right:1px solid #20aec8;/*bordure a droite*/
border-bottom:1px solid #20aec8;/*bordure basse*/
border-left:1px solid #20aec8;/*bordure a gauche*/
-webkit-border-bottom-right-radius: 6px;/*ne pas toucher*/
-webkit-border-bottom-left-radius: 6px;/*ne pas toucher*/
-moz-border-radius-bottomright: 6px;/*ne pas toucher*/
-moz-border-radius-bottomleft: 6px;/*ne pas toucher*/
border-bottom-right-radius: 6px;/*ne pas toucher*/
border-bottom-left-radius: 6px;/*ne pas toucher*/

}
/*Les blocs qui contiennent les liens*/
#M14_menu ul li
{
float: none;/*ne pas toucher*/
margin: 0;/*ne pas toucher*/
display:block;/*ne pas toucher*/
padding:5px;/*ne pas toucher*/
}


/*Les liens*/
#M14_menu ul li  .mainmenu
{
padding:3px 5px 3px 5px;/*ne pas toucher*/
display:block;/*ne pas toucher*/
float:none;/*ne pas toucher*/
color:#666666;/*on lui donne une couleur*/
border-left: 1px solid #666666;/*la bordure de gauche */
border-right: 1px solid #666666;/*la bordure de droite*/
border-bottom:1px solid #006699;/*la bordure basse*/
-webkit-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-moz-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-o-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
}
/*Les liens au survol*/
#M14_menu ul li  .mainmenu:hover
{
padding:4px 5px 4px 5px;/*on donne des espaces de 3px sur les quatres cotes*/
color:#ffffff;/* la couleur au survol*/
border-left: 1px solid #cccccc;/*la bordure de gauche */
border-right: 1px solid #cccccc;/*la bordure de droite */
border-bottom:3px solid #006699;/*la bordure basse*/
-moz-box-shadow: -8px 0px 34px #20aec8;/*peut etre supprime*/
-webkit-box-shadow: -8px 0px 34px #20aec8;/*peut etre supprime*/
box-shadow: -8px 0px 34px #20aec8;/*peut etre supprime*/
  /*les bordures arrondies*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

/*_____________FIN DU MENU DES MEMBRES____________________*/


/*_____________LE MENU DU PROFIL____________________*/
/*la barre du profil*/

#M14_profil
{
position:absolute;/*ne pas toucher*/
left:-70px;/*ne pas toucher*/
top:222px;/*ne pas toucher*/
width: 170px;/*ne pas toucher*/
padding: 5px 0;/*ne pas toucher*/
list-style: none;/*ne pas toucher*/
border-top:1px solid #20aec8;/*bordure du haut*/
border-right:1px solid #20aec8;/*bordure a droite*/
border-bottom:1px solid #20aec8;/*bordure basse*/
border-left:none;/*ne pas toucher*/
background-color:#000000;/*on donne une couleur de fond*/
cursor:pointer;/*le type de curseur*/
/*les bordures arrondies*/
-webkit-border-top-right-radius: 6px;/*ne pas toucher*/
-webkit-border-bottom-right-radius: 6px;/*ne pas toucher*/
-moz-border-radius-topright: 6px;/*ne pas toucher*/
-moz-border-radius-bottomright: 6px;/*ne pas toucher*/
border-top-right-radius: 6px;/*ne pas toucher*/
border-bottom-right-radius: 6px;/*ne pas toucher*/
/*l effet de transition qui s effectuera au survol*/
-webkit-transition: left 0.5s ease-in-out;/*augmentez les valeurs 0.5s si besoin*/
-moz-transition: left 0.5s ease-in-out;/*augmentez les valeurs 0.5s si besoin*/
-o-transition: left 0.5s ease-in-out;/*augmentez les valeurs 0.5s si besoin*/
transition: left 0.5s ease-in-out;/*augmentez les valeurs 0.5s si besoin*/
-moz-opacity:1;/*ne pas toucher*/
-khtml-opacity:1;/*ne pas toucher*/
-ms-filter:"alpha(opacity=100)";/*ne pas toucher*/
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);/*ne pas toucher*/
filter:alpha(opacity=100);/*ne pas toucher*/
opacity:1;/*ne pas toucher*/
zoom: 1;/* HACK POUR IE ne pas toucher*/
}
/*la barre du profil au survol*/
#M14_profil:hover
{
left:0;/*ne pas toucher*/
border-top:1px solid #20aec8;/*bordure du haut*/
border-right:1px solid #20aec8;/*bordure a droite*/
border-bottom:none;/*ne pas toucher*/
border-left:none;/*ne pas toucher*/
-webkit-border-top-right-radius: 6px;/*ne pas toucher*/
-webkit-border-bottom-right-radius: 1px;/*ne pas toucher*/
-moz-border-radius-topright: 6px;/*ne pas toucher*/
-moz-border-radius-bottomright: 1px;/*ne pas toucher*/
border-top-right-radius: 6px;/*ne pas toucher*/
border-bottom-right-radius: 1px;/*ne pas toucher*/
}
/*On positionne le bloc qui contiendra le titre*/
#M14_profil  li
{
float:right;/*ne pas toucher*/
padding:8px 9px 0 5px ;/*ne pas toucher*/
position: relative;/*ne pas toucher*/
}
/*l apparence du titre et son positionnement*/
#M14_profil a
{
width:130px;/*ne pas toucher*/
float: right;/*ne pas toucher*/
padding: 5px 11px 11px 12px ;/*ne pas toucher*/
color: #20aec8;/*on lui donne une couleur*/
font-size: 12px;/*on lui donne une taille*/
text-decoration: none !important;/*on supprime le soulignement*/
-webkit-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-moz-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-o-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
border-top:1px solid #20aec8;/*bordure haute*/
border-left:1px solid #20aec8;/*bordure gauche*/
-webkit-border-top-left-radius: 6px;/*ne pas toucher*/
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
/*l apparence du titre au survol*/
#M14_profil a:hover
{
border-top:1px solid #5EA440;/*bordure en haut plus changement de couleur*/
border-left:1px solid #5EA440;/*bordure gauche plus changement de couleur*/
color:#5EA440;/*on lui donne une couleur*/
}
/*Le bloc qui contient tous les liens*/
#M14_profil ul
{

list-style: none;/*ne pas toucher*/
margin: 0;/*ne pas toucher*/
padding:0 5px 0 5px;/*ne pas toucher*/
position: absolute;/*ne pas toucher*/
top: 0;/*ne pas toucher*/
left:-400px;/*ne pas toucher*/
z-index: 999;/*ne pas toucher*/
height:0;/*ne pas toucher*/
overflow:hidden;/*ne pas toucher*/
-moz-transition-property:left, top ,height ;/*ne pas toucher*/
-moz-transition-duration: 1s ,1s, 2s;/*augmentez les valeurs en seconde si besoin*/
-moz-transition-timing-function:  ease-out ;/*ne pas toucher*/
-webkit-transition-property: left ,top, height ;/*ne pas toucher*/
-webkit-transition-duration:1s , 1s ,2s;/*augmentez les valeurs en seconde si besoin*/
-webkit-transition-timing-function: ease-out ;/*ne pas toucher*/
-o-transition-property:left, top,height ;/*ne pas toucher*/
-o-transition-duration: 1s , 1s ,2s ;/*augmentez les valeurs en seconde si besoin*/
-o-transition-timing-function:  ease-out ;/*ne pas toucher*/
-ms-transition-property: left ,top,height;/*ne pas toucher*/
-ms-transition-duration:1s , 1s ,2s ;/*augmentez les valeurs en seconde si besoin*/
-ms-transition-timing-function:  ease-out ;/*ne pas toucher*/
}
/* On affiche au survol du bloc qui contient le titre */
#M14_profil li:hover  ul
{

height:auto;/*ne pas toucher*/
display: block;/*ne pas toucher*/
background:#000000;/*on lui donne une couleur de fond*/
top: 39px;/*ne pas toucher*/
left:5px;/*ne pas toucher*/
border-top:none;/*ne pas toucher*/
border-right:1px solid #20aec8;/*bordure a droite*/
border-bottom:1px solid #20aec8;/*bordure basse*/
border-left:1px solid #20aec8;/*bordure a gauche*/
-webkit-border-bottom-right-radius: 6px;/*ne pas toucher*/
-webkit-border-bottom-left-radius: 6px;/*ne pas toucher*/
-moz-border-radius-bottomright: 6px;/*ne pas toucher*/
-moz-border-radius-bottomleft: 6px;/*ne pas toucher*/
border-bottom-right-radius: 6px;/*ne pas toucher*/
border-bottom-left-radius: 6px;/*ne pas toucher*/

}
 /*Les blocs qui contiennent les liens*/
#M14_profil ul li
{
float: none;/*ne pas toucher*/
margin: 0;/*ne pas toucher*/
display:block;/*ne pas toucher*/
padding:5px;/*ne pas toucher*/
}
/*on donne une couleur a la premiere lettre des liens impaires*/
#M14_profil ul li:nth-child(odd) a:first-letter {color:#5EA440;}
/*on donne une couleur a la premiere lettre des liens paires*/
#M14_profil ul li:nth-child(even) a:first-letter{color:#20aec8;}
/*on donne une couleur a toutes les lettred des liens impaires au survol*/
#M14_profil ul li:nth-child(odd) :hover {color:#5EA440;}
/*on donne une couleur a toutes les lettred des liens paires au survol*/
#M14_profil ul li:nth-child(even) :hover{color:#20aec8;}

 
/*Les liens*/
#M14_profil ul li  a
{
padding:3px 5px 3px 5px;/*ne pas toucher*/
display:block;/*ne pas toucher*/
float:none;/*ne pas toucher*/
color:#666666;/*on lui donne une couleur*/
border-left: 1px solid #666666;/*la bordure de gauche */
border-right: 1px solid #666666;/*la bordure de droite*/
border-bottom:1px solid #006699;/*la bordure basse*/
-webkit-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-moz-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-o-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
}

/*Les liens au survol*/
#M14_profil ul li  a:hover
{
padding:4px 5px 4px 5px;/*ne pas toucher*/
color:#ffffff;/* la couleur au survol*/
border-left: 1px solid #cccccc;/*la bordure de gauche */
border-right: 1px solid #cccccc;/*la bordure de droite */
border-bottom:3px solid #006699;/*la bordure basse*/
-moz-box-shadow: -8px 0px 34px #20aec8;/*peut etre supprime*/
-webkit-box-shadow: -8px 0px 34px #20aec8;/*peut etre supprime*/
box-shadow: -8px 0px 34px #20aec8;/*peut etre supprime*/
-webkit-border-radius: 6px;/*ne pas toucher*/
-moz-border-radius: 6px;/*ne pas toucher*/
border-radius: 6px;/*ne pas toucher*/
}
/*_____________FIN DU MENU DU PROFIL____________________*/

/*_____________LE MENU DU MP____________________*/

/*on place le bouton*/
#M14_MP
{
position:fixed;/*ne pas toucher*/
top:30px;
right:10px;
}
/*L apparence du titre et du bouton*/
a#mp
{
background:#000000;/*la couleur de fond*/
text-decoration:none;/*ne pas toucher*/
color:#20aec8;/*la couleur de police*/
font-size:12px;/*ne pas toucher*/
padding:10px ;/*ne pas toucher*/
border-top:1px solid #20aec8;/*bordure haute*/
-webkit-border-radius: 6px;/*ne pas toucher*/
-moz-border-radius: 6px;/*ne pas toucher*/
border-radius: 6px;/*ne pas toucher*/
-webkit-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-moz-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-o-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
}
/*l apparence du titre au survol*/
a#mp:hover {text-decoration:none !important;}/*ne pas toucher*/

/* l affichage d un nouveau MP*/
a#new_message
{
background:#000000;/*la couleur de fond*/
text-decoration:none!important;/*ne pas toucher*/
color: #ffffff;/*la couleur de police*/
font-size:12px;/*ne pas toucher*/
padding:10px 45px 10px 10px;/*ne pas toucher*/
border-top:1px solid #6eef60;/*la bordure haute*/
-webkit-border-radius: 6px;/*ne pas toucher*/
-moz-border-radius: 6px;/*ne pas toucher*/
border-radius: 6px;/*ne pas toucher*/
}
/* l affichage d un nouveau MP au survol*/
a#new_message:hover
{
text-decoration:none !important;/*ne pas toucher*/
}
/*_____________FIN DU MENU DU MP____________________*/

/*_____________DEBUT DU BLOC RECHERCHER____________________*/

#M14_rechercher div#search_menu
{
position:absolute !important;/*ne pas toucher*/
width:250px !important;/*ne pas toucher*/
height:130px !important;/*ne pas toucher*/
top:5px !important;/*ne pas toucher*/
left:-252px !important;/*ne pas toucher*/
display:block!important;/*ne pas toucher*/
-webkit-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-moz-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
-o-transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
transition: all 1s ease-in-out;/*modifiez la valeur 1s si besoin*/
}
#M14_rechercher div#search_menu:hover
{
left:0!important;/*ne pas toucher*/
}
#M14_rechercher div#search_menu:before
{
content:'Moteur de recherche des forums';/*modifiez le titre si besoin*/
color: #20aec8;/*on donne une couleur*/
font-size:13px;/*on donne une taille de police*/
}
/*la fleche ddu menu a droite*/
#M14_rechercher div#search_menu:after
{
content:'';/*ne pas toucher*/
float:left; /*ne pas toucher*/
margin-top:-65px;/*ne pas toucher*/
margin-left:253px;/*ne pas toucher*/
border:1px solid #20aec8;/*ne pas toucher*/
border-color:transparent transparent transparent #20aec8   ;/*ne pas toucher*/
border-width:10px;/*ne pas toucher*/
cursor:pointer;/*on donne un type au curseur*/
}
/*on donne une apparence au menu*/
#M14_rechercher div#search_menu .forumline
{
background:#000000 !important ;/*la couleur de fond*/
border:1px solid #20aec8;  /*la bordure avec un style solid et la couleur*/
-webkit-border-radius: 6px;/*les bordures arrondies*/
-moz-border-radius: 6px;
border-radius: 6px;
}
/*la barre de recherche*/
#M14_rechercher div#search_menu .forumline input.post
{
background-color:#000000;/*la couleur de fond*/
color:#20aec8;/*on donne une couleur*/
width:110px;/*ne pas toucher*/
border:1px solid #20aec8;/*la bordure avec un style solid et la couleur*/
-webkit-border-radius: 6px;/*les bordures arrondies*/
-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*/
}

#M14_rechercher div#search_menu .forumline input.post:hover
{
width:150px;/*ne pas toucher*/
background-color:#ffffff;/*la couleur de fond*/
color:#000000;/*on donne une couleur*/
}
#M14_rechercher div#search_menu .forumline .row2 input.button
{
background-color:#000000;/*la couleur de fond*/
color:#20aec8;/*on donne une couleur*/
-webkit-border-radius: 6px ;/*les bordures arrondies*/
-moz-border-radius: 6px;
border-radius: 6px ;
}
/*on supprime les bordures du haut*/
#M14_rechercher div#search_menu .forumline th.thHead
{
border:none;
color:#20aec8;/*on donne une couleur au titre*/
}
/*on change l apparence de la ligne*/
#M14_rechercher div#search_menu .forumline .row2 hr
{
border:1px dotted #20aec8;/*la bordure avec un style solid et la couleur*/
}
/*apparence de Resultat par Messages et Sujets*/
#M14_rechercher div#search_menu .forumline .row2 .genmed  
{
color:#20aec8;/*on donne une couleur*/
}
/*apparence de recherche avancee*/
#M14_rechercher div#search_menu .forumline .row2 a
{
color:#20aec8;/*on donne une couleur*/
text-decoration:none !important;/*on supprime le soulignement*/
}
/*puis on supprime l image*/
#M14_rechercher div#search_menu .forumline .row2 img
{
display:none !important;
}
{
height:30px;
border-left:none !important;
border-top:none !important;
color:#20aec8;
text-decoration:none !important;
}
/*_____________FIN DU BLOC RECHERCHER____________________*/



Pensez à valider les modifications en cliquant sur le bouton   .

merci

Merci 

J'ai pas tout compris pour l'hebergement de la C.S.S. mais je peux pas t'envoyer de MP :bryueryu:

Didier ,

J'ai pas tout compris pour l'hebergement de la C.S.S

modifies simplement les couleurs de fond et de police si besoin dans la C.S.S .
Ensuite , je posséde un nom de domaine ou je peux héberger ta C.S.S (que l'on placera dans le template overall_header ),
ça ne fera qu’accélérer l'affichage de ton forum .


Pour le M.P, c'est règlé .

Merci

 les ami(e)s,
Pierre a remonté une information concernant un bug sur ce tutoriel,
il s'agit tout bêtement d'une étourderie de ma part concernant le template  

Le tutoriel a été corrigé  .

Merci de votre compréhension  .
Philippe.

Pas Didier mais Pierre  

 merci Didier  .

merci

Yes , merci beaucoup .

Mais c'est génial, merci =o

Merci , je regarde .

merci

Merci

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci :)