Forum d'entraide de graphisme & de codage
 
AccueilAccueil  CalendrierCalendrier  Guide du Swirlien  FAQFAQ  RechercherRechercher  MembresMembres  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 PA by Shakumiro

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Shakumiro
Membre
avatar

Image par défaut
Rang Messages : 305
Date d'inscription : 25/02/2015
Age : 20
Localisation : Dans mon monde

MessageSujet: PA by Shakumiro   Mar 21 Avr - 22:43




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 !



• • • • • • • • • •



Merci à toi Lucy pour le kit <3
Revenir en haut Aller en bas
Keylha
Equipe Bleue
avatar

Image par défaut
Rang Messages : 2394
Date d'inscription : 12/04/2014
Age : 17
Localisation : Montagnes

MessageSujet: Re: PA by Shakumiro   Mer 22 Avr - 19:05

Anw c'est génial
Tu peux aller prendre 8 points !

• • • • • • • • • •


Merci Yuu  
Revenir en haut Aller en bas
 
PA by Shakumiro
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sweet Swirl :: Archives :: BIG ARCHIVES :: Pages d'Accueil-
Sauter vers: