Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

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


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

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 22 Aoû 2015 - 11:52

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 Sam 7 Déc 2024 - 7:47, édité 14 fois

Quad Daniel aime ce message

avatar
mariok
MIlouzien regretté

http://www.amarid.net

Messagemariok Mar 25 Aoû 2015 - 8:28

Merci beaucoup !
avatar
patriciadpt30

Messagepatriciadpt30 Dim 6 Sep 2015 - 10:05

Merci beaucoup !
avatar
Grande013

MessageGrande013 Mer 30 Sep 2015 - 19:53

Merci beaucoup !
STYLMUSIC
STYLMUSIC
http://tyros.forum-officiel.com/

MessageSTYLMUSIC Sam 3 Oct 2015 - 8:08

Merci beaucoup !
Sacha
Sacha
https://amis-pub.forumactif.com/

MessageSacha Jeu 15 Oct 2015 - 23:03

Merci beaucoup !
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 18 Oct 2015 - 8:07

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
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 23 Oct 2015 - 6:29

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
Anonymous
Invité
Invité

MessageInvité Dim 1 Nov 2015 - 23:27

Merci beaucoup !
avatar
Sophie 2
http://entrenous.azureforum.com/

MessageSophie 2 Dim 8 Nov 2015 - 15:34

Merci bien.
avatar
El_Mojito
http://Crewweedganja.forumactif.be

MessageEl_Mojito Dim 15 Nov 2015 - 22:20

Merci beaucoup !
clost
clost
https://www.dyane-collection-passion.net

Messageclost Mar 22 Mar 2016 - 19:22

merci pour ce tuto  clin oeil
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Mer 4 Mai 2016 - 23:59

Merci beaucoup !
50Thierry
50Thierry
http://www.gps-sne.com/

Message50Thierry Mer 15 Juin 2016 - 3:29

Merci beaucoup !
dragon594
dragon594
https://dragon-graphisme59.forumactif.org/

Messagedragon594 Sam 12 Nov 2016 - 19:04

Merci beaucoup !
avatar
safranite

Messagesafranite Sam 25 Fév 2017 - 12:23

Merci beaucoup !
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Sam 25 Fév 2017 - 22:17

Merci beaucoup !
avatar
DownXIIILoad
https://fslogging.forumactif.com

MessageDownXIIILoad Lun 3 Avr 2017 - 15:29

Merci beaucoup !
Tawny
Tawny
http://forumtestcata.forumactif.fr/

MessageTawny Mar 11 Avr 2017 - 18:34

Merci beaucoup !
msfeettoes
msfeettoes
https://feetloverfeets.forumactif.com/

Messagemsfeettoes Jeu 13 Avr 2017 - 14:04

Merci beaucoup !
hamesashek
hamesashek
http://3arb-way.a7larab.net/

Messagehamesashek Lun 6 Nov 2017 - 19:36

Merci beaucoup !
Ptite_Perle
Ptite_Perle
https://forumcrea.forumactif.org/

MessagePtite_Perle Mar 8 Mai 2018 - 11:41

Merci beaucoup !
chrisnvidia
chrisnvidia
https://sos-pc.forumactif.org/

Messagechrisnvidia Mar 12 Juin 2018 - 18:16

Merci beaucoup !
Anonymous
Invité
Invité

MessageInvité Mer 13 Juin 2018 - 8:42

merci pour l'astuce ♥️
1bernard1
1bernard1
http://ze-bistro.forumactif.com/

Message1bernard1 Dim 24 Fév 2019 - 1:53

Merci beaucoup !

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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