Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.

Astuces ForumactifConnexion

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB

-37%
Le deal à ne pas rater :
Couette 2 places (220×240) – Polyester – Fabrication Française
29 € 46 €
Voir le deal

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

+23
Splash
1bernard1
petitefeuille
chrisnvidia
Ptite_Perle
hamesashek
msfeettoes
Tawny
DownXIIILoad
photoclic
safranite
dragon594
50Thierry
ThunderTB
clost
El_Mojito
Sophie 2
Sacha
STYLMUSIC
Grande013
patriciadpt30
mariok
Milouze14
27 participants

descriptionIcône par defaut[TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
coucou ,

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.

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

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

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

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

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  Enregistr  puis Ajout
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 .



Dernière édition par Milouze14 le Lun 29 Nov 2021 - 8:02, édité 13 fois

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
coucou les ami(e)s,
je viens de corriger l'astuce concernant le panneau au clic sur le Pseudo du membre, celui-ci restait ouvert à la fermeture de la barre des tâches.
De plus la barre des tâches pourra quand elle est réduite être de nouveau ouverte à l'aide d'un nouveau bouton hinhin

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
coucou suite à un bug rapporté par Sacha (que je remercie) le script a été de nouveau corrigé
afin de permettre de ne plus avoir à la réouverture de la barre des tâches un soucis de clic sur le membre en question clin oeil .
En espérant que ce soit la dernière mise à jour transpir

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci bien.

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
merci pour ce tuto  clin oeil

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
merci pour l'astuce ♥️

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Merci beaucoup !

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Milouze14 a écrit:
En espérant que ce soit la dernière mise à jour transpir

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>

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

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

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

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

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
Bonjour et un grand merci quel travail bravo Phil Mercibis

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz

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

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
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 ?

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
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 hinhin

descriptionIcône par defautRe: [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum

more_horiz
privacy_tip Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum