Connexion

Récupérer mon mot de passe

Derniers sujets
» [PhpBB2] Ouverture d'une balise object ou iframe au clic sur un bouton
par fascicularia Aujourd'hui à 19:53

» [PhpBB3] Supprimer : Dernière édition le .....
par Milouze14 Aujourd'hui à 18:57

» [Edge] Page html
par Milouze14 Aujourd'hui à 18:51

» Règlement de l'entraide Forumactif
par Coventgarden Aujourd'hui à 18:35

» *RESOLU*[PhpBB3] Miniature agrandie sur réponse rapide
par Milouze14 Hier à 15:19

» [PhpBB2] positionnement css
par Milouze14 Lun 18 Nov 2019 - 17:50

» histoire du Jour sans fin
par Quad Daniel Lun 18 Nov 2019 - 7:28

» *RESOLU*[PhpBB2] Notifications Push
par Milouze14 Lun 18 Nov 2019 - 6:06

» *RESOLU*[PhpBB2] Modifier la toolbar
par Milouze14 Lun 18 Nov 2019 - 6:03

» [PHPBB2] Menu Rechercher en haut à gauche effet survol
par HardRock Sam 16 Nov 2019 - 21:23

» *RESOLU*[PhpBB3] Couleur de lien dans les messages
par Milouze14 Sam 16 Nov 2019 - 19:04

» *CORBEILLE*[PhpBB2] avertissement lors de la publication d'un email 2 le retour
par Milouze14 Sam 16 Nov 2019 - 7:16

» [PhpBB2]Module de connexion type forumactif
par petitefeuille Jeu 14 Nov 2019 - 13:12

» *RESOLU*[PhpBB3] Retirer bouton contact aux invités
par Milouze14 Mer 13 Nov 2019 - 15:59

» [PhpBB2] Avertissement lors de la publication d'un email
par Milouze14 Mer 13 Nov 2019 - 3:53

» *RESOLU*[PhpBB2] Annonce Google décalée
par Milouze14 Lun 11 Nov 2019 - 21:08

» [PhpBB2] Ajouter à vos favoris
par Milouze14 Lun 11 Nov 2019 - 18:22

» [PhpBB2] Changer le nom d'un groupe
par petitefeuille Lun 11 Nov 2019 - 15:53

» *RESOLU*[Edge] Bannière defilante
par Milouze14 Lun 11 Nov 2019 - 8:57

» *RESOLU*[PhpBB3] Bouton uniquement sur premier post
par Milouze14 Dim 10 Nov 2019 - 19:19

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

Page 2 sur 2 Précédent  1, 2

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

Milouze14
Milouze14
Fondateur

MessageMilouze14 le Sam 22 Aoû 2015 - 11:52

Rappel du premier message :

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 - Page 2 0150

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

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

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

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

-Astuce des Forums Milouze14&Compagnie-





  • Astuce postée par:
    Réponse automatique:

    Merci de cliquer ici pour voir le message

Pour toute information,merci de contacter un Membre du Staff
[TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum - Page 2 Staff10



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 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 -->
        <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 .
Voila, c est tout pour le moment  clin oeil .
Un soucis direction l entraide hinhin
https://www.milouze14.com/f108-entraide-tous-supports


Dernière édition par no_way le Dim 14 Avr 2019 - 0:17, édité 9 fois

Milouze14
Fondateur

MessageMilouze14 le Lun 25 Fév 2019 - 7:33

Hello Fred,
merci pour ta remontée, je viens d'éditer l'astuce hinhin
Temps-pour-elle
Temps-pour-elle
Milouzien

MessageTemps-pour-elle le Mer 23 Oct 2019 - 10:42

Je viens de tester, c'est bien, merci Milouze!

Page 2 sur 2 Précédent  1, 2

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