Membres connectés récemment
[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
Page 1 sur 2 • 1, 2
,
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.
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:
Déposez ceci:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposez ceci:
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 .
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.
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>
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 .
Quad Daniel aime ce message
- InvitéInvité
Merci beaucoup !
- InvitéInvité
merci pour l'astuce
Page 1 sur 2 • 1, 2
Sujets similaires
» [TOUTES VERSIONS] Afficher le logo de votre forum dans la toolbar
» [TOUTES VERSIONS] Faire voler autant d'images que vous le souhaitez sur toutes les pages de votre forum
» [TOUTES VERSIONS] Afficher la réponse rapide façon Facebbok au clic
» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
» [TOUTES VERSIONS] Modifier les textes de la barre de navigation
» [TOUTES VERSIONS] Faire voler autant d'images que vous le souhaitez sur toutes les pages de votre forum
» [TOUTES VERSIONS] Afficher la réponse rapide façon Facebbok au clic
» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
» [TOUTES VERSIONS] Modifier les textes de la barre de navigation
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum