Connexion

Récupérer mon mot de passe

Derniers sujets
» [EDGE]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
par Ptite_Perle Aujourd'hui à 18:24

» *RESOLU*[MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB
par Milouze14 Hier à 15:56

» *RESOLU*[PHPBB2] Décaler des petites images dans le corps du message d'accueil sur l'index;
par Milouze14 Sam 22 Fév 2020 - 15:17

» [PHPBB3] Afficher les membres en ligne (version graphique) sur l'index et dans la liste des sujets
par BarTender Sam 22 Fév 2020 - 15:00

» histoire du Jour sans fin
par Quad Daniel Sam 22 Fév 2020 - 12:06

» [PHPBB3] Widget anniversaire sur toutes les pages du fofo
par Milouze14 Sam 22 Fév 2020 - 10:43

» [TOUTES VERSIONS] Bouton générateur de tableaux
par BarTender Ven 21 Fév 2020 - 15:31

» [PHPBB3] Intégrer des boutons en relation avec le profil du membre style barre de contact
par BarTender Ven 21 Fév 2020 - 14:57

» [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome
par BarTender Ven 21 Fév 2020 - 13:08

» *RESOLU*[PHPBB2] Fenetres en haut du forum
par Milouze14 Ven 21 Fév 2020 - 3:46

» [BESTOF] Images favorites
par Milouze14 Jeu 20 Fév 2020 - 19:33

» [BESTOF] Ajouter lien message dans titre citation
par Milouze14 Mar 18 Fév 2020 - 18:44

» *RESOLU*[PHPBB2] WYSIWYG pour citation sur message rapide
par Milouze14 Mar 18 Fév 2020 - 18:32

» [TOUTES VERSIONS]Ajouter un contenu visible que par les membres ayant répondu.
par dymo Mar 18 Fév 2020 - 2:10

» *RESOLU*[PHPBB2] Mise en page dans le corps du message uniquement sur le 1er message
par Milouze14 Ven 14 Fév 2020 - 16:25

» [BESTOF] Les photos à partir de l'ID d'un membre
par Milouze14 Ven 14 Fév 2020 - 3:53

» [PHPBB2] Afficher un message en haut de sujet lorsqu'il est verrouillé
par christ77000 Jeu 13 Fév 2020 - 10:01

» [TOUTES VERSIONS]Visualiser le mot de passe
par christ77000 Jeu 13 Fév 2020 - 8:29

» [TOUTES VERSIONS] Recherche de texte dans les templates
par photoclic Mer 12 Fév 2020 - 19:42

» *RESOLU*[PHPBB3] Mettre un cadre aux forums des catégories
par Milouze14 Jeu 6 Fév 2020 - 15:06

[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 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 .
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 Milouze14 le Ven 21 Fév 2020 - 16:36, édité 11 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