PA by Shakumiro

Coucou tout le monde !

Je vous présente une PA avec 2 onglets "News" et "Staff". Pour pouvoir l'intégrer sur votre forum vous devrez la mettre dans [Affichage -> Généralités] et le tour est joué.

Image des staffiens 150x140

Le code

Code::   <script>
   function changeOnglet(_this){
   var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('span');
   for(var i = 0; i < getOnglets.length; i++){
   if(getOnglets[i].id){
   if(getOnglets[i].id == _this.id){
   getOnglets[i].className = 'mon_onglet_selected';
   document.getElementById('c' + _this.id).style.display = 'block';
   }
   else{
   getOnglets[i].className = 'mon_onglet';
   document.getElementById('c' + getOnglets[i].id).style.display = 'none';
   }
   }
   }
}
  </script><style type="text/css">
.absent{
width:148px;
  height:20px;
  line-height:20px;
  margin-top:5px;
  font-size:15px;
  font-family:Roboto;
  color:white;
  background-color:red;
  border:1px solid red;
text-align:center;
}
.present{
width:148px;
  height:20px;
  line-height:20px;
  margin-top:5px;
  font-size:15px;
  font-family:Roboto;
  color:white;
  background-color:green;
  border:1px solid green;
text-align:center;
}
input[name=profil]{
width:150px;
  height:20px;
  margin-top:5px;
  font-size:15px;
  font-family:Roboto;
  background-color:#FC4837;
  border:1px solid #FC4837;
}
input[name=profil]:hover{
width:150px;
  height:20px;
  margin-top:5px;
  font-size:15px;
  font-family:Roboto;
  background-color:white;
  border:1px solid #FC4837;
  cursor:pointer;
   -moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
-webkit-transition: .5s;
}
input[name=mp]{
width:150px;
  height:20px;
  margin-top:5px;
  font-size:15px;
  font-family:Roboto;
  background-color:#FC4837;
  border:1px solid #FC4837;
}
input[name=mp]:hover{
width:150px;
  height:20px;
  margin-top:5px;
  font-size:15px;
  font-family:Roboto;
  background-color:white;
  border:1px solid #FC4837;
  cursor:pointer;
   -moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
-webkit-transition: .5s;
}
.cadrestaff{
width:150px;
   height:230px;
  background-color:grey;
  float:left;
  margin-left:17px;
  margin-top:5px;
  box-shadow:0 0 3px white;
}
.cadrestaff:hover{
width:150px;
   height:230px;
  background-color:grey;
  float:left;
  margin-left:17px;
  margin-top:5px;
  box-shadow:0 0 3px brown;
}
.cadrestaff2{
width:150px;
   height:230px;
  background-color:grey;
  margin-left:17px;
  margin-top:5px;
  box-shadow:0 0 3px white;
}
.cadrestaff2:hover{
width:150px;
   height:230px;
  background-color:grey;
  margin-left:17px;
  margin-top:5px;
  box-shadow:0 0 3px brown;
}
#staff{
  width:690px;
  height:400px;
}
#partenaire{
  width:690px;
  height:80px;
  background-color:grey;
  opacity:0.8;
  float:left;
  margin-left:5px;
}
.iconepartenaire{
width:690px;
height:80px;
margin-left:22px;
}
.stock{
  width:340px;
  height:400px;
  overflow:auto;
  text-align:left;
  margin:0;
  font-size:13px;
}
.bandeautitre{
  color:#0185B5;
  width:340px;
  height:20px;
  background-color:white;
  margin:0;
  font-weight: bold;
text-align:center;
}
.bandeautitre2{
  color:#0185B5;
  width:690px;
  height:20px;
  background-color:white;
  font-weight: bold;
  margin-bottom:5px;
text-align:center;
}
#news{
  width:340px;
  height:420px;
  background-color:grey;
  opacity:0.8;
  margin:5px;
  float:right;
}
#presentation{
  width:340px;
  height:420px;
  background-color:grey;
  opacity:0.8;
  float:left;
  margin:5px;
}
#mes_onglets{
  width:700px;
  height:50px;
  background-color:#4b7d95;
  border-radius:10px 10px 0 0;
  text-align:center;
  line-height:50px;
  border-top:3px dotted white;
  border-left:3px dotted white;
  border-right:3px dotted white;
}
#o_1,#o_2{
  margin-left:100px;
   margin-right:100px;
  font-size:40px;
  font-family:Quicksand;
  color:#faa82a;
  text-shadow: 0 1px 0 #be322b,
   0 2px 0 #faaa2d,
   -1px 3px 0 #ffd72f,
   -1px 4px 0 #67bec7,
   -2px 5px 0 #3a677e,
   -2px 6px 0 #9c3793,
   -2px 7px 2px rgba(0,0,0, 0.6),
   -2px 7px 8px rgba(0,0,0, 0.2),
   -2px 7px 45px rgba(0,0,0, 0.4);

}
#o_1:hover,#o_2:hover{
  margin-left:100px;
   margin-right:100px;
  font-size:40px;
  font-family:Quicksand;
  color:white;
  text-shadow: 0 1px 0 #eee,
   0 2px 0 #e5e5e5,
   -1px 3px 0 #C8C8C8,
   -1px 4px 0 #C1C1C1,
   -2px 5px 0 #B9B9B9,
   -2px 6px 0 #B2B2B2,
   -2px 7px 2px rgba(0,0,0, 0.6),
   -2px 7px 8px rgba(0,0,0, 0.2),
   -2px 7px 45px rgba(0,0,0, 0.4);
  cursor:pointer;
  transition:.5s;
}
#mes_contenus{
  width:700px;
  height:520px;
  background-color:#4b7d95;
  border-bottom:3px dotted white;
  border-left:3px dotted white;
  border-right:3px dotted white;
}
</style><link href="http://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" /><meta charset="UTF-8" />
<div id="mes_onglets">
<span onclick="changeOnglet(this);" class="mon_onglet_selected" id="o_1">News</span><span onclick="changeOnglet(this);" class="mon_onglet" id="o_2">Staff</span>
</div>

<div class="clear">

<div id="mes_contenus">

   <div class="mon_contenu" id="co_1">

      <div id="presentation">

         <div class="bandeautitre">
            Présentation du forum
         </div>

         <div class="stock">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar eget ipsum a dictum. Nulla aliquam nunc nibh, nec condimentum elit dictum lacinia. Nulla sed orci malesuada, bibendum velit sed, laoreet est. Suspendisse sed diam non nisi mattis tincidunt at ut purus. Etiam rhoncus auctor lorem in posuere. Sed cursus vitae neque nec pellentesque. Mauris non purus pretium, ultricies ante sit amet, lacinia est. Mauris sagittis massa dolor, at ornare ex sollicitudin congue. Mauris varius sem ut sem maximus, eget imperdiet diam sollicitudin. Phasellus tincidunt leo quis iaculis hendrerit. Cras nec odio vel lacus pharetra varius eu sed metus. In hac habitasse platea dictumst. Mauris at iaculis est. Duis eget finibus lectus. Duis tincidunt metus eget lacus dignissim pretium. Fusce ut lorem quis urna feugiat sagittis nec id ex. Nunc ut commodo erat. Vivamus ultricies nec ipsum non pellentesque. Ut nec mi ornare, convallis sem rhoncus, congue quam. Duis ullamcorper varius nulla non vestibulum. Phasellus vehicula maximus finibus. Proin quam eros, dictum eu risus in, pulvinar volutpat massa. Sed eget elit eu nisi ultrices convallis. Phasellus euismod vitae diam vel tempor. Fusce quis laoreet mi. Nam massa dui, rhoncus quis magna in, congue convallis nunc. Proin aliquam augue vitae tempus lacinia.
         </div>

      </div>

      <div id="news">

         <div class="bandeautitre">
            News du forum
         </div>

         <div class="stock">

            <div style="text-align:justify;">
               <span style="color: red;">19/04/2015</span>: Nouveau PA pour le forum Sweet Swirl<br /> <span style="color: red;">18/04/2015</span>: texte ici <br /> <span style="color: red;">17/04/2015</span>: texte ici <br /> <span style="color: red;">16/04/2015</span>: texte ici <br />
            </div>

         </div>

      </div>

      <div id="partenaire">

         <div class="bandeautitre2">
            Partenaires
         </div>
         <div class="iconepartenaire">
            <a href="LIEN"><img src="http://img15.hostingpics.net/pics/870519logo5050thmprintemps.png" /></a> <img src="http://img15.hostingpics.net/pics/870519logo5050thmprintemps.png" /> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/870519logo5050thmprintemps.png" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/870519logo5050thmprintemps.png" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/870519logo5050thmprintemps.png" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/870519logo5050thmprintemps.png" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/870519logo5050thmprintemps.png" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/870519logo5050thmprintemps.png" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/870519logo5050thmprintemps.png" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/870519logo5050thmprintemps.png" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/870519logo5050thmprintemps.png" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/870519logo5050thmprintemps.png" /></a>
         </div>

      </div>

   </div>

   <div style="display: none;" class="mon_contenu" id="co_2">

      <div id="staff">

         <div class="cadrestaff">
            <img src="http://i19.servimg.com/u/f19/18/88/54/70/render11.png" /> <input name="profil" type="button" value="Profil" /> <input name="mp" type="button" value="Mp" />
            <div class="present">
               Présent
            </div>

         </div>

         <div class="cadrestaff">
            <img src="http://i19.servimg.com/u/f19/18/88/54/70/render11.png" /> <input name="profil" type="button" value="Profil" /> <input name="mp" type="button" value="Mp" />
            <div class="absent">
               Absent
            </div>

         </div>

         <div class="cadrestaff">
            <img src="http://i19.servimg.com/u/f19/18/88/54/70/render11.png" /><input name="profil" type="button" value="Profil" /> <input name="mp" type="button" value="Mp" />
            <div class="present">
               Présent
            </div>

         </div>

         <div class="cadrestaff">
            <img src="http://i19.servimg.com/u/f19/18/88/54/70/render11.png" /> <input name="profil" type="button" value="Profil" /> <input name="mp" type="button" value="Mp" />
            <div class="absent">
               Absent
            </div>

         </div>

         <div id="staff">

            <div class="cadrestaff">
               <img src="http://i19.servimg.com/u/f19/18/88/54/70/render11.png" /> <input name="profil" type="button" value="Profil" /> <input name="mp" type="button" value="Mp" />
               <div class="present">
                  Présent
               </div>

            </div>

            <div class="cadrestaff">
               <img src="http://i19.servimg.com/u/f19/18/88/54/70/render11.png" /> <input name="profil" type="button" value="Profil" /> <input name="mp" type="button" value="Mp" />
               <div class="absent">
                  Absent
               </div>

            </div>

            <div class="cadrestaff">
               <img src="http://i19.servimg.com/u/f19/18/88/54/70/render11.png" /><input name="profil" type="button" value="Profil" /> <input name="mp" type="button" value="Mp" />
               <div class="present">
                  Présent
               </div>

            </div>

            <div class="cadrestaff">
               <img src="http://i19.servimg.com/u/f19/18/88/54/70/render11.png" /> <input name="profil" type="button" value="Profil" /> <input name="mp" type="button" value="Mp" />
               <div class="absent">
                  Absent
               </div>

            </div>

         </div>

      </div>

   </div>

</div>

</div>

Voilà Voilà bonne mise en place !

Anw c'est génial PA by Shakumiro 842042703

Tu peux aller prendre 8 points !

» For Shakumiro ♥
» Boutique de Shakumiro
» Shakumiro en tant que codeur pour Sweet Swirl