[PhpBB2] Barre windows 10

Hello, Philippe,

Je viens vers toi concernant ce tutoriel https://www.milouze14.com/t28519-toutes-versions-afficher-une-barre-des-taches-facon-windows-10-sur-votre-forum?highlight=barre+windows pour en modifier le système afin de voir les icônes directement plutôt que de devoir passer le curseur sur la barre pour les voir apparaître !

Lorsque le curseur n'a pas encore été pointer sur la barre



Lorsque le curseur pointe sur la barre c'est cela que j'aimerais voir constamment visible



Est-ce possible ?

Aussi je ne vois pas apparaître mon pseudo comme tu peux le remarquer sur cette capture ci-dessous.



Autre petite chose que j'aimerais intégrer sur le milieu de la barre windows 10.

J'aimerais intégrer ce petit code.

Code:

<div style="max-width: 100%; width: 88px; height: 31px;"><iframe class="banniere-iframe" src="https://amis-pub.i-services.net/gestion_ban/emplacement-responsive.html?idempl=2848&proxy" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe></div>

Ce qui donnera cela :



Je te redonne le code HTML et Javascript du template ainsi que le CSS car j'ai trouvé comment ajouter de nouveaux boutons sur la barre mdrrrrr

Template overall_footer_end :

Code:

<div id="M14_Windows"style="display:none;">
              <div class="M14_Win_cont"style="display:none;">
                  <div id="M14_Win_Cont_one">
                      <div class="M14_Win_User"title="Voir mon profil">
              <img src="https://i.servimg.com/u/f18/11/26/21/37/contac11.png"alt="User"align="absmiddle"/><span class="USERNAME">
              </span>
                        </div>
                      
            <div class="M14_Win_groups">
            <img src="https://i.servimg.com/u/f18/11/26/21/37/confer10.png"alt="Groupes"align="absmiddle"/><a href="/groups">Groupes</a>
            </div>
            <div class="M14_Win_members">
            <img src="https://i.servimg.com/u/f18/11/26/21/37/find_u10.png"alt="Membres"align="absmiddle"/><a href="/memberlist">Membres</a>
            </div>
              
            

                <div class="M14_Win_user_Prof"style="display:none;"></div>

                      </div>
            <div id="M14_Win_Cont_two"></div>
            </div>
                              
            <div class="M14_Win_Logo"title="Afficher mon contenu"><img src="https://i.servimg.com/u/f18/11/26/21/37/logo10.png"align="absmiddle"alt="Logo"/></div>
            <div class="M14_Win_Search"></div>
              <!-- Début placement des boutons coté barre recherche windows -->
            <div id="M14_Win_Mp"><a href="/privmsg?folder=inbox"class="M14_Win_MP"title="Voir ma messagerie privée">
              <img src="https://i.servimg.com/u/f18/11/26/21/37/email_10.png"alt="Mp"/></a>
              </div>
            <div id="M14_Win_avatar"><a href="/profile?mode=editprofile&page_profil=avatars"title="Modifier mon avatar">
              <img src="https://i.servimg.com/u/f18/11/26/21/37/yahoo_10.png"alt="Avatar"/></a>
              </div>
              <div id="M14_Win_Sign"><a href="/profile?mode=editprofile&page_profil=signature"title="Modifier ma signature">
              <img src="https://i.servimg.com/u/f18/11/26/21/37/notepa10.png"alt="Signature"/></a>
              </div>
               <!-- Fin placement des boutons coté barre recherche windows -->
               <!-- Début placement des boutons coté horloge -->
             <div class="translate">
              <a href="https://translate.google.fr/"target="_blank">
                <img src="https://i.servimg.com/u/f88/20/00/21/16/transl10.png"align="absmiddle"alt="Google"title="Traducteur Google"/></a>
              </div>
            <div class="M14_Win_Google">
              <a href="https://www.google.fr/"target="_blank">
                <img src="https://i.servimg.com/u/f18/11/26/21/37/google10.png"align="absmiddle"alt="Google"title="Google est votre ami"/></a>
              </div>
            <div class="M14_Milouze"title="Milouze14 Forum d'entraide Forum actif">
              <a href="http://www.milouze14.com/"target="_blank">
                <img src="https://i.servimg.com/u/f18/11/26/21/37/firefo10.png"alt="Milouze14"align="absmiddle"/></a>
              </div>
               <!-- Fin placement des boutons coté barre windows -->
              
              <div class="M14_btn_Window">
                <img src="https://i.servimg.com/u/f18/11/26/21/37/sort_d10.png"alt="Réduire"title="Réduire"align="absmiddle"/>
              </div>
              <div class="M14_btn_Window_close"title="Ouvrir la barre des tâche"style="display:none;">
                <img src="https://i.servimg.com/u/f21/11/26/21/37/up-5010.png"alt="Ouvrir la berre des tâches"align="absmiddle"/>
              </div>
            <div id="M14_hour"></div>
            <script type="text/javascript">
            function date(){var today=new Date();var date_heure="";
            h=today.getHours();m=today.getMinutes();s=today.getSeconds();if(h<10){h='0'+h}if(m<10){m='0'+m}if(s<10){s='0'+s}date_heure=''+h+'h'+m+'m'+s+'';document.getElementById('M14_hour').innerHTML=date_heure}setInterval("date()",1000);
            </script>              
            </div>
            <!-- END switch_user_logged_in -->
<!-- Mettre la class ou id de chaque nouveau bouton -->
<script type="text/javascript">
    $(function(){
    $('#M14_Windows').hover(function(){
    $('#M14_Win_Mp ,#M14_Win_avatar ,#M14_Win_Sign ,
    .translate,.M14_Win_Google ,.M14_Milouze ,.M14_btn_Window').animate({marginTop:'-30px'})
    });});
            </script>

            <script type="text/javascript">
            $(function(){
            $(function(){
            $('#fa_search').clone().appendTo('.M14_Win_Search');
            $('.M14_Win_Search #fa_textarea').attr('placeHolder','Rechercher sur le forum......');
            $('#fa_menu #fa_menulist').clone().appendTo('.M14_Win_user_Prof');
            $('#fa_usermenu').clone().appendTo('#M14_Win_Cont_two');
            });
            });
            </script>
        
            <script type="text/javascript">            
            $(function(){
            $('#M14_Windows').delay('1000').fadeIn(1600);
            $('#wrap , .bodylinewidth, #ipbwrapper , .pun').delay('800').animate({paddingBottom: '45px'});
            $('.M14_Win_Logo').click(function(){
            $('.M14_Win_cont').toggle();
            $('.M14_Win_User').click(function(){
            $('.M14_Win_user_Prof').toggle();
            });
            });
            });
            </script>
            <script type="text/javascript">
            $(function(){
            $('.M14_btn_Window').click(function(){
            $('.M14_Win_cont,.M14_Win_user_Prof').fadeOut();
            $('#M14_Windows, #wrap , .bodylinewidth, #ipbwrapper , .pun').delay('800').animate({height: '0px',padding: '0px'});
            $('.M14_btn_Window_close').delay(1500).fadeIn();
        });
        });
            </script>
    <script type="text/javascript">
    $(function(){
    $('.M14_btn_Window_close').click(function(){
    $(this).fadeOut(800);
    $('.M14_Win_User').click(function(){
    $('.M14_Win_user_Prof').toggle();
    });
    $('#wrap , .bodylinewidth, #ipbwrapper , .pun').delay('800').animate({paddingBottom: '45px'});
    $('#M14_Windows').delay('800').animate({height: '40px'});
    });

    });
        </script>

            <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>

Le CSS :

Code:

/*Debut barre des taches facon Windows 10*/
/*les transitions*/
#M14_Windows ,.M14_btn_Window ,.M14_Win_cont ,
.M14_Milouze ,.M14_Win_Google,#M14_Win_Mp,#M14_Win_avatar ,#M14_Win_Sign ,.M14_btn_Window_close {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition: all 1s ease-in-out;
}
/*LA COULEUR DE LA BARRE ET LE RESTE*/
#M14_Windows ,.M14_btn_Window,.M14_btn_Window_close{background:#222; }
/*LA COULEUR DE LA BARRE ET LE RESTE AU SURVOL*/
#M14_Windows:hover ,.M14_Win_cont:hover ,#M14_Windows:hover .M14_btn_Window {
background:#445555;
}
#M14_Windows:hover  #fa_search #fa_textarea{background:transparent !important;
}
#M14_Windows {
position:fixed;
left:0px;
right:0px;
bottom:0px;
width:100%;
height:40px;
-khtml-opacity:0.8;
-ms-filter:"alpha(opacity=80)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
filter:alpha(opacity=80);
opacity:0.8;
z-index:999;
}
#M14_Windows:hover {
-khtml-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter:alpha(opacity=100);
opacity:1;
}
.M14_Win_cont {
position:fixed;
left:0px;
bottom:40px;
background:#222 ;
width:250px;
height:300px;
padding:5px;
}
#M14_Win_Cont_one {
position:absolute;
margin-top:5px;
width:250px;
height:150px;
}
.M14_Win_User, .M14_Win_groups , .M14_Win_members {
color:white;
font-size:11px;
font-weight:bold;
width:250px;
height: 43px;
cursor:pointer;
}
.M14_Win_User:hover , .M14_Win_groups:hover ,.M14_Win_members:hover {
background:#333333 !important;
}
.M14_Win_user_Prof  #fa_menulist li:hover {
background:#222 !important;
}
.M14_Win_user_Prof {
top: 30px;
margin-left:5px;
width:230px;
height:auto;
padding:5px;
position:absolute;
}
.M14_Win_user_Prof .fa_separator {
display:none !important;
}
.M14_Win_user_Prof #fa_menulist li {
float:left !important;
width:230px !important;
height:22px !important;
cursor:pointer !important;
}
.M14_Win_user_Prof a ,#M14_logout ,#M14_logout a#logout , .M14_Win_groups a, .M14_Win_members a ,
#M14_logout a#logout:hover ,.M14_Win_user_Prof #fa_menulist li a ,
#M14_Win_Cont_two #fa_usermenu a#fa_ranktitle ,.M14_Milouze a {
font-size:11px !important;
color:white !important;
text-decoration:none !important;
}
#M14_Win_Cont_two {
position:absolute;
bottom:5px;
width:250px;
height:150px;
}
#M14_Win_Cont_two #fa_usermenu {
background:# !important;
margin-left:50px !important;
border:0px solid black !important;
}
.M14_Win_user_Prof #fa_usermenu ,#M14_Win_Cont_two #fa_usermenu table {
display:none;
}
.M14_Win_user_Prof #fa_menulist li a , .M14_Win_groups a ,.M14_Win_members a {
margin-left:5px; !important;
}
.M14_Win_user_Prof #fa_menulist {
display:block;
width:220px !important;
height:200px !important;
left:5px !important;
padding-left:0px !important;
background:#333333 !important;
border:1px solid grey !important;
line-height: 20px !important;
}
.M14_Win_Logo {
cursor:pointer;
width:43px;
height:34px;
}
.M14_Win_Search {
position:absolute;
margin: -35px 0px 0px 45px;
height:40px;
width:200px;
}
#M14_Windows #fa_search #fa_textarea {
color:white !important;
height:40px !important;
border-radius:0px !important;
border-left:1px dotted black;
border-right:1px dotted black;
background:transparent;
}
/*Placement des boutons*/
.M14_btn_Window_close {
bottom:0px !important;
}
/* début placement des boutons barre windows 10 */
/* début placement des boutons coté barre recherche */
#M14_Win_Mp {
left: 14.2%;
}
#M14_Win_avatar {
left: 16%;
}
#M14_Win_Sign {
left: 17.7%;
}
/* fin placement des boutons coté barre recherche */
/* début placement des boutons coté horloge */
.M14_btn_Window,.M14_btn_Window_close {
left: 90%;
}
.M14_Milouze {
left: 88%;
}
.M14_Win_Google {
left: 86.3%;
}
.translate {
left: 84.5%;
}
/* fin placement des boutons coté horloge */
#M14_Win_Mp ,#M14_Win_avatar ,#M14_Win_Sign ,.translate ,.M14_Win_Google ,.M14_Milouze ,.M14_btn_Window , .M14_btn_Window_close {
position: absolute;
height: 40px;
margin-top: 50px;
width:32px;
height:32px;
cursor:pointer;
}
.M14_Milouze ,.M14_Win_Google,.translate,#M14_Win_Mp,#M14_Win_avatar ,#M14_Win_Sign ,.M14_btn_Window,.M14_btn_Window_close {
border-bottom:2px solid white;
}
.M14_Milouze:hover ,.M14_Win_Google:hover ,.translate:hover,#M14_Win_Mp:hover ,#M14_Win_avatar:hover ,
 #M14_Win_Sign:hover ,.M14_btn_Window:hover {
border-bottom:2px solid purple;
}
/* fin placement des boutons barre windows 10 */
#M14_hour {
position: absolute;
left: 95%;
height: 40px;
margin-top: -25px;
color: white;
font-size: 11px;
}
/*Fin de la barre des taches facon Windows 10*/

D'avance je te remercie pour ton aide.

Sacha.