[TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

[Milouze14Fondateur]

Rappel du premier message :

,

je pense que je vais en régaler plus d'un ,
l'astuce consiste a déposer une barre des tâches ayant l'apparence de celle de Windows 10, elle sera pourvue de diverses fonctions.

Et aussi truffée de transitions sur les apparences diverses.
Elle arrivera progressivement en bas de page de votre forum et au survol
de cette dernière les icônes apparaitront.
Puis le bouton de démarrage affichera une copie que vous pouvez avoir
en cliquant sur votre pseudo présent sur la toolbar.

Et encore bien d'autres fonctions,
La C.S.S est assez conséquente et assez complexe les ami(e)s.

Allez voici les captures pour un fofo version phpbb2 , mais rassurez vous la barre est compatible toutes versions.









Cette même barre décalera a l'affichage le bas de page automatiquement et vice versa à la fermeture.




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

Juste avant ceci:

Code:

<!-- BEGIN switch_facebook_login -->

Déposez ceci:

Code:


<!-- BEGIN switch_user_logged_in -->
                      
        <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>
        <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/f87/19/99/37/49/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/f87/19/99/37/49/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/f87/19/99/37/49/notepa10.png"alt="Signature"/></a>
          </div>
      
        <div class="M14_Win_Google">
          <a href="https://www.google.fr/"target="_blank">
            <img src="https://i.servimg.com/u/f87/19/99/37/49/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="https://www.milouze14.com/"target="_blank">
            <img src="https://i.servimg.com/u/f87/19/99/37/49/firefo10.png"alt="Milouze14"align="absmiddle"/></a>
          </div>
          <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 barre 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 -->
        <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_Windows').hover(function(){
$('#M14_Win_Mp ,#M14_Win_avatar ,#M14_Win_Sign ,
.M14_Win_Google ,.M14_Milouze ,.M14_btn_Window').animate({marginTop:'-30px'})
});});
        </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>      
 
 


Penses à enregistrer puis à valider en cliquant respectivement sur    puis
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Déposez ceci:

Code:





   /*Debut barre des taches facon Windows 10 par Milouze14*/

    /*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:white !important;margin-left:50px !important;border:2px 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;
    }

    #M14_Win_Mp ,#M14_Win_avatar ,#M14_Win_Sign ,.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_Win_Mp{left: 22%;}
    #M14_Win_avatar{left: 27%;}
    #M14_Win_Sign{left: 32%;}
    .M14_Win_Google{left: 80%;}
    .M14_Milouze{left: 85%;}
    .M14_btn_Window,.M14_btn_Window_close{left: 90%;}
    .M14_Milouze ,.M14_Win_Google,#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 ,#M14_Win_Mp:hover ,#M14_Win_avatar:hover ,
    #M14_Win_Sign:hover ,.M14_btn_Window:hover{border-bottom:2px solid purple;}
    #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 par Milouze14*/




J'ai volontairement placé un lien vers ce forum, merci de respecter le travail effectué les ami(e)s.
Ensuite vous pouvez changer les liens des boutons à votre guise .

[1bernard1]

Merci beaucoup !

[chrisnvidia]

[Splash]

En espérant que ce soit la dernière mise à jour

Sans doute faudrait-il updater les liens pour les passer en HTTPS ?

Code:

<!-- BEGIN switch_user_logged_in -->
                      
        <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="http://i18.servimg.com/u/f18/11/26/21/37/contac11.png"alt="User"align="absmiddle"/><span class="USERNAME">
          </span>

[Milouze14Fondateur]

Hello Fred,
merci pour ta remontée, je viens d'éditer l'astuce

[tritri]

merci beaucoup pour ce tuto et tout le travail qui va avec

[soleda]

Bonjour et un grand merci quel travail bravo Phil

[Quad Daniel]

Merci Phil,
j'ai déjà une belle barre don peut être je te solliciterai pour le lien de gauche
Amicalement

[ren]

Je peux pas ajouter le css , le mien est déjà bien rempli , il me dit que le css est trop long pour être rajouté , comment faire ?

[Milouze14Fondateur]

J'ai édité l'astuce ici:
https://www.milouze14.com/t29034-toutes-versions-heberger-du-css-dans-une-page-html-comme-sur-la-feuille-de-style#556149

Afin que ce soit plus compréhensible ren