Un simple forum personnel, pour répertorier tout et n'importe quoi
 
AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 P A et template

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

avatar

Messages : 45
Date d'inscription : 17/04/2015

MessageSujet: 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;
                }
            });
        }        
    }
});
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
P A et template
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Template Tilset A, A1, A2...
» Template "match-3"
» Template Druide Restauration
» Template "Indiana Jones"
» Template Paladin

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Doudous Chronicles :: Bric à Brac :: Le bazar de Red-
Sauter vers: