,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](https://servimg.com/r/1811262137/0150.png)
![[TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum 0230](https://servimg.com/r/1811262137/0230.png)
![[TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum 0314](https://servimg.com/r/1811262137/0314.png)
![[TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum 0411](https://servimg.com/r/1811262137/0411.png)
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 .
Dernière édition par Milouze14 le Lun 29 Nov 2021 - 8:02, édité 13 fois
.
