Red
Messages : 46 Date d'inscription : 17/04/2015
| Sujet: P A et template Dim 12 Juil - 0:45 | |
| HTML Panneau d'administration > Affichage > Page d'accueil / Généralités - Code:
-
<table> <tbody> <tr> <td id="battypa_bloc1" colspan="2"> <div class="battypa_contexte"> <div> Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum. </div> </div> <div class="battypa_slideshow"> <div class="slideshow" id="slideshow"> <div id="slideshow-container"> <div class="slide"> <img alt="Slideshow 1" src="http://i.imgur.com/2tGYJBx.png" /> </div> <div class="slide"> <img alt="Slideshow 2" src="http://i.imgur.com/WTnDxrM.png" /> </div> <div class="slide"> <img alt="Slideshow 3" src="http://i.imgur.com/HxVAcKi.png" /> </div> <div class="slide"> <img alt="Slideshow 4" src="http://i.imgur.com/wKN4fV5.png" /> </div> </div> </div> </div> </td> <td id="battypa_bloc2" rowspan="3"> <span class="battypa_staff">Fondatrice<br /><span>"Fofolle de service"</span><br /><br /><a href="URL_PROFIL">Son profil</a> ♥ <a href="URL_MP">La contacter</a><img src="http://i.imgur.com/NKi4Dbx.png" /></span><span class="battypa_staffname">Name</span> <span class="battypa_staff">Fondatrice<br /><span>"Fofolle de service"</span><br /><br /><a href="URL_PROFIL">Son profil</a> ♥ <a href="URL_MP">La contacter</a><img src="http://i.imgur.com/NKi4Dbx.png" /></span><span class="battypa_staffname">Name</span><span class="battypa_staff">Fondatrice<br /><span>"Fofolle de service"</span><br /><br /><a href="URL_PROFIL">Son profil</a> ♥ <a href="URL_MP">La contacter</a><img src="http://i.imgur.com/NKi4Dbx.png" /></span><span class="battypa_staffname">Name</span> <span class="battypa_staff">Fondatrice<br /><span>"Fofolle de service"</span><br /><br /><a href="URL_PROFIL">Son profil</a> ♥ <a href="URL_MP">La contacter</a><img src="http://i.imgur.com/NKi4Dbx.png" /></span><span class="battypa_staffname">Name</span> </td> </tr> <tr> <td colspan="2"> <div class="battypa_partenaires"> <span>Partenaires</span><a href="URL FORUM"><img title="Nom du forum" src="http://i.imgur.com/CQsfbJi.png" /></a> <a href="URL FORUM"><img title="Nom du forum" src="http://i.imgur.com/CQsfbJi.png" /></a> <a href="URL FORUM"><img title="Nom du forum" src="http://i.imgur.com/CQsfbJi.png" /></a> <a href="URL FORUM"><img title="Nom du forum" src="http://i.imgur.com/CQsfbJi.png" /></a> <a href="URL FORUM"><img title="Nom du forum" src="http://i.imgur.com/CQsfbJi.png" /></a> <a href="URL FORUM"><img title="Nom du forum" src="http://i.imgur.com/CQsfbJi.png" /></a> <a href="URL FORUM"><img title="Nom du forum" src="http://i.imgur.com/CQsfbJi.png" /></a> <a href="URL FORUM"><img title="Nom du forum" src="http://i.imgur.com/CQsfbJi.png" /></a> <a href="URL FORUM"><img title="Nom du forum" src="http://i.imgur.com/CQsfbJi.png" /></a> </div> </td> </tr> <tr> <td> <div class="battypa_autre"> Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum. <br /><br />Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum. </div> <div class="battypa_copyright"> © Batty pour <a href="http://epicode.bbactif.com/">Epicode </a> </div> </td> <td> <div class="battypa_membrefond"> <div id="warped"> <span class="w0">M</span><span class="w1">e</span><span class="w2">m</span><span class="w3">b</span><span class="w4">r</span><span class="w5">e</span><span class="w7">d</span><span class="w8">u</span><span class="w10">m</span><span class="w11">o</span><span class="w12">i</span><span class="w13">s</span> <img title="" src="http://i.imgur.com/j2n82n3.png" /> </div> </div> </td> </tr> </tbody> </table> CSS - Code:
-
#battypa_bloc1{ width:500px; height:200px; position:relative; overflow:hidden; }
.battypa_contexte{ position:absolute; width:200px; height:200px; display:table; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background-color:#8d3f61; overflow:hidden; top:0px; z-index:2;
}
.battypa_contexte > div{ /*allignement du texte dans la bulle*/ width:100%; display:table-cell; vertical-align:middle; line-height:normal; font-size:11px; color:#dcccce; text-align:center; }
.battypa_slideshow{ position:absolute; width:350px; height:150px; border: 5px solid #dcccce; background-color:#dcccce; text-align:center; overflow:hidden; top:20px; left:140px; z-index:1; }
.slideshow, .slide { width: 350px; height: 150px; }
.slideshow { overflow: hidden; background-color: black; }
.slideshow div { position: relative; top: 0; left: 0; } .slide { margin: 0; display: inline-block; vertical-align: middle; } #battypa_bloc2{ padding-top:3px; } .battypa_staff{ position:relative; display:block; width:140px; height:65px; border: 1px solid #8d3f61; background-color:#dcccce; padding:5px; font-size:12px; color:#8d3f61; text-align:center; overflow:hidden; margin-top:5px; }
.battypa_staff span{ font-size:9px; font-style:italic; }
.battypa_staff a{ text-decoration:none; font-variant:small-caps; color:#8d3f61; font-weight:bold; }
.battypa_staff img{ position: absolute; left: 0; top: 0; transition: all 3s; -moz-transition: all 3s; -o-transition: all 3s; -webkit-transition: all 3s; }
.battypa_staff:hover img{ transform: translatey(75px); -moz-transform: translatey(75px); -o-transform: translatey(75px); -webkit-transform: translatey(75px); }
.battypa_staffname{ display:block; width:150px; padding-top:5px; background-color:#8d3f61; border: 1px solid #8d3f61; color:#dcccce; font-family:'Lithos Pro'; font-size:16px; text-align:center; }
.battypa_partenaires{ position:relative; width:490px; height:50px; padding:5px; background-color:#dcccce; text-align:center; }
.battypa_partenaires span{ position:absolute; display:block; width:495px; text-align:right; top:-22px; color:#8d3f61; font-family:'Lithos Pro'; font-size:24px; letter-spacing: -2px; }
.battypa_autre{ width:290px; height:160px; border: 5px solid #8d3f61; background-color:#dcccce; padding:5px; overflow: auto; font-size:11px; color:#8d3f61; text-align:justify; }
.battypa_membrefond{ width:180px; height:180px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius:100px; background-color:#8d3f61; position: relative; }
.battypa_membrefond img{ -webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius:80px; position:absolute; top:20px; left:9px; }
#warped {position: relative; display: block; width:180px; height:180px;}
#warped>span[class^=w]:nth-of-type(n+0){display:block; position:absolute; -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50% 100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%;;}
#warped span{font-family:'Lithos Pro';font-size:16px;font-weight:regular;font-style:normal; line-height:1; white-space:pre; overflow:visible; padding:0px; color:#dcccce;}
#warped .w0 {-moz-transform: rotate(-0.2rad);-webkit-transform: rotate(-0.2rad);-o-transform: rotate(-0.2rad);-ms-transform: rotate(-0.2rad); transform: rotate(-0.3rad); width: 18px; height: 21px; left: 58px; top: 6px;}
#warped .w1 {-moz-transform: rotate(-0.04rad);-webkit-transform: rotate(-0.04rad);-o-transform: rotate(-0.04rad);-ms-transform: rotate(-0.04rad); transform: rotate(-0.04rad); width: 11px; height: 21px; left: 75px; top: 3px;}
#warped .w2 {-moz-transform: rotate(0.13rad);-webkit-transform: rotate(0.13rad);-o-transform: rotate(0.13rad);-ms-transform: rotate(0.13rad); transform: rotate(0.13rad); width: 19px; height: 21px; left: 86px; top: 4px;}
#warped .w3 {-moz-transform: rotate(0.31rad);-webkit-transform: rotate(0.31rad);-o-transform: rotate(0.31rad);-ms-transform: rotate(0.31rad); transform: rotate(0.31rad); width: 12px; height: 21px; left: 102px; top: 8px;}
#warped .w4 {-moz-transform: rotate(0.43rad);-webkit-transform: rotate(0.43rad);-o-transform: rotate(0.43rad);-ms-transform: rotate(0.43rad); transform: rotate(0.43rad); width: 8px; height: 21px; left: 112px; top: 12px;}
#warped .w5 {-moz-transform: rotate(0.54rad);-webkit-transform: rotate(0.54rad);-o-transform: rotate(0.54rad);-ms-transform: rotate(0.54rad); transform: rotate(0.54rad); width: 11px; height: 21px; left: 121px; top: 18px;}
#warped .w7 {-moz-transform: rotate(0.76rad);-webkit-transform: rotate(0.76rad);-o-transform: rotate(0.76rad);-ms-transform: rotate(0.76rad); transform: rotate(0.76rad); width: 13px; height: 21px; left: 135px; top: 31px;}
#warped .w8 {-moz-transform: rotate(0.94rad);-webkit-transform: rotate(0.94rad);-o-transform: rotate(0.94rad);-ms-transform: rotate(0.94rad); transform: rotate(0.98rad); width: 13px; height: 21px; left: 140px; top: 40px;}
#warped .w10 {-moz-transform: rotate(1.20rad);-webkit-transform: rotate(1.20rad);-o-transform: rotate(1.20rad);-ms-transform: rotate(1.20rad); transform: rotate(1.20rad); width: 19px; height: 21px; left: 146px; top: 61px;}
#warped .w11 {-moz-transform: rotate(1.35rad);-webkit-transform: rotate(1.35rad);-o-transform: rotate(1.35rad);-ms-transform: rotate(1.35rad); transform: rotate(1.35rad); width: 13px; height: 21px; left: 150px; top: 74px;}
#warped .w12 {-moz-transform: rotate(1.80rad);-webkit-transform: rotate(1.80rad);-o-transform: rotate(1.80rad);-ms-transform: rotate(1.80rad); transform: rotate(1.80rad); width: 5px; height: 21px; left: 153px; top: 78px;}
#warped .w13 {-moz-transform: rotate(2rad);-webkit-transform: rotate(2rad);-o-transform: rotate(2rad);-ms-transform: rotate(2rad); transform: rotate(2rad); width: 10px; height: 21px; left: 148px; top: 87px;}
.battypa_copyright{ font-size:11px; color:#8d3f61; } .battypa_copyright a{ text-decoration:none; font-variant:small-caps; color:#8d3f61 !important; } Javasript Panneau d'administration > Modules > Gestion des codes Javascript > Crée un nouveau Javasript /!\ Donner lui un nom, coché "Sur l'index" et Valider /!\ /!\ Assurez-vous que "Activer la gestion des codes Javascript" est cocher oui /!\ - Code:
-
$(function () { //VARIABLES MODIFIABLES var delaiSwitch = 5000; // Délai (en ms) d'affichage d'un slide var delaiTransition = 1000; // Délai (en ms) de l'animation de transition var direction = 'left'; // Sens (left ou right) du défilement var idSlideshow = '#slideshow'; // ID du slideshow var idContainer = '#slideshow-container'; // ID du container //VARIABLES SYSTEME var slideshowWidth = parseInt($(idSlideshow).css('width')); var slideshowHeight = parseInt($(idSlideshow).css('height')); var nbSlides = $(idContainer+' > .slide').length; //ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT $(idContainer).css('width', slideshowWidth*nbSlides+'px');
//REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS if(direction==='right') { var decalageLeft = -slideshowWidth*(nbSlides-1); $(idContainer).css('left', decalageLeft+'px'); $(idContainer+' > .slide').each(function() { var el = $(this).remove(); $(idContainer).prepend(el); }, this); } else { $(idContainer+' > .slide').each(function() { var el = $(this).remove(); $(idContainer).append(el); }, this); } //ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW $(idSlideshow+' img').css('max-width', slideshowWidth); $(idSlideshow+' img').css('max-height', slideshowHeight); //LANCEMENT DE L'ANIMATION setInterval(function() { slideshow() }, delaiSwitch); //FONCTION DE DEFILEMENT function slideshow() { var compteur = 0; // Compte les slides ayant bougé if(direction==='right') { $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() { compteur++; // Lorsque le dernier slide à bougé, on crée la boucle if(compteur===nbSlides) { var el = $(idContainer+' > .slide:last').remove(); $(idContainer).prepend(el); $(idContainer+' > .slide').css('left', '0'); compteur = 0; } }); } else { $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() { compteur++; // Lorsque le dernier slide à bougé, on crée la boucle if(compteur===nbSlides) { var el = $(idContainer+' > .slide:first').remove(); $(idContainer).append(el);
$(idContainer+' > .slide').css('left', '0'); compteur = 0; } }); } } });
| |
|