PA à Damier

PA à Damier

Voici un petit LS d'une PA que j'ai fait pour la demande de Thanil et qui avait déjà été commencé par Hirondelle.

Effets spéciaux :
Au survol de l'image au centre (le membre du mois), une infobulle avec les informations du membre du mois apparaît.
Le carré en haut à gauche a 3 onglets : Contexte, Événement et Partenaires.
Le carré en bas à droite a 2 onglets : Informations et Recherchés (Prédéfinis).

Pour voir l'aperçu : cliquez ici.

Ce LS est en deux parties.

• Tout d'abord, nous allons installer le HTML de la PA.
  
• Puis, nous allons le mettre en forme à l'aide du CSS.

1. Corps de la PA (HTML)

Nous allons commencer par aller dans l'espace de la page d'accueil pour y mettre la partie HTML.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > PAGE D'ACCUEIL
> > > > GÉNÉRALITÉS
> > > > > CONTENU DU MESSAGE

On y met le code suivant et on enregistre :

Code:

<script type="text/javascript">
  //<!--
    function change_paonglet(name)
    {
      document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
      document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
      document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
      document.getElementById('contenu_paonglet_'+name).style.display = 'block';
      anc_paonglet = name;
    }
  //-->
</script><script type="text/javascript">
  //<!--
    function change_papaonglet(name)
    {
      document.getElementById('papaonglet_'+anc_papaonglet).className = 'papaonglet_0 papaonglet';
      document.getElementById('papaonglet_'+name).className = 'papaonglet_1 papaonglet';
      document.getElementById('contenu_papaonglet_'+anc_papaonglet).style.display = 'none';
      document.getElementById('contenu_papaonglet_'+name).style.display = 'block';
      anc_papaonglet = name;
    }
  //-->
</script>
<div class="pa">
            
 <div class="pa_credits">
       PA par Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>      
 </div>
                              
 <div class="pa_infobulle">
                <img alt="Image du membre du mois" src="http://www.zupimages.net/up/15/14/pcnf.png" />                
 <div class="pa_infobulle_inside">
           Félicitation à NOM qui est le membre du mois de MOIS !            
 </div>
                              
 </div>
                                        
 <div class="pa_bloc_left_top">
                                          
 <div class="onglets_left_top">
                     <span onclick="javascript:change_paonglet('Contexte');" id="paonglet_Contexte" class="paonglet_1 paonglet">Contexte</span><span onclick="javascript:change_paonglet('Evenement');" id="paonglet_Evenement" class="paonglet_0 paonglet">Événement</span><span onclick="javascript:change_paonglet('Partenaires');" id="paonglet_Partenaires" class="paonglet_0 paonglet">Partenaires</span>                      
 </div>
                                          
 <div id="contenu_paonglet_Contexte" class="contenu_paonglet">
                                                
 <div class="pa_inside">
                            Texte de Contexte                          
 </div>
                                              
 </div>
                                          
 <div id="contenu_paonglet_Evenement" class="contenu_paonglet">
                                                
 <div class="pa_inside">
                            Texte de Événement.                          
 </div>
                                              
 </div>
                                          
 <div id="contenu_paonglet_Partenaires" class="contenu_paonglet">
                                                
 <div class="pa_inside">
                            Texte de Partenaires.                          
 </div>
                                              
 </div><script type="text/javascript">
    //<!--
      var anc_paonglet = 'Contexte';
      change_paonglet(anc_paonglet);
    //-->
  </script>                    
 </div>
                                        
 <div class="pa_bloc_right_top">
                                          
 <div class="staff_bloc">
                  
 <div class="pa_title">
          Staff          
 </div>
            <span><img src="http://www.zupimages.net/up/15/14/pcnf.png" alt="Image de Staff1" /></span><span><img src="http://www.zupimages.net/up/15/14/pcnf.png" alt="Image de Staff1" /></span><span><img src="http://www.zupimages.net/up/15/14/pcnf.png" alt="Image de Staff1" /></span>                            
 </div>
                                        
 </div>
                                    
 <div class="pa_bloc_left_bottom">
                                          
 <div class="rpmois_bloc">
                  
 <div class="pa_title">
          RPs du mois          
 </div>
           <span><img src="http://www.zupimages.net/up/15/14/pcnf.png" alt="Image de RP du mois" /></span><span><img src="http://www.zupimages.net/up/15/14/pcnf.png" alt="Image de RP du mois" /></span><br /><a target="_blank" href="#">Lien vers le RP</a><a target="_blank" href="#">Lien vers le RP</a>                              
 </div>
                                        
 </div>
                                    
 <div class="pa_bloc_right_bottom">
                                
 <div class="onglets_right_bottom">
                     <span onclick="javascript:change_papaonglet('Informations');" id="papaonglet_Informations" class="papaonglet_1 papaonglet">Informations</span><span onclick="javascript:change_papaonglet('Recherches');" id="papaonglet_Recherches" class="papaonglet_0 papaonglet">Recherchés</span>                  
 </div>
                                          
 <div id="contenu_papaonglet_Informations" class="contenu_papaonglet">
                                                
 <div class="pa_inside">
                          Texte de Informations.                        
 </div>
                                              
 </div>
                                          
 <div id="contenu_papaonglet_Recherches" class="contenu_papaonglet">
                                                
 <div class="pa_inside">
                            Texte de Recherchés.                          
 </div>
                                              
 </div><script type="text/javascript">
    //<!--
      var anc_papaonglet = 'Informations';
      change_papaonglet(anc_papaonglet);
    //-->
  </script>                        
 </div>
                                  
 <div style="clear: both;">
                                  
 </div>
                                  
 <div class="pa_bloc_bottom">
              <a href="#" target="_blank">Règlement</a><a href="#" target="_blank">Présentation</a><a href="#" target="_blank">Top-Sites</a>                          
 </div>
</div>

2. Mise en forme (CSS)

Si vous regardez votre PA, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre PA à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :

Code:

/* -------------------------------------------------- PA -------------------------------------------------- */

.pa {
  position: relative;
  background-color: #3f3f3f;
  background-image: url('http://img15.hostingpics.net/pics/461112Fond.png');
  border: 5px solid #363A5D;
  border-radius: 50px;
  height: 480px;
  width: 850px;
  font-family: 'Verdana';
  overflow: hidden;
  font-size: 12px;
}


/*Crédits*/
.pa_credits {
  position: absolute;
  right: 30px;
  top: 0px;
  color: #93909b;
  font-size: 12px;
  text-shadow: none;
  font-variant: small-caps;
}
.pa_credits a {
  font-family: 'Verdana';
  color: #786FA8;
  font-size: 12px;
  text-shadow: none;
  font-variant: small-caps;
}


/*Titres dans la PA*/
.pa_title {
  text-align: center;
  color: #786FA8;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 5px;
  text-decoration: none;
  text-shadow: 1px 1px 1px #1D1934;
  text-transform: uppercase;
}


/*Bloc du membre du mois*/
.pa_infobulle {
  position: absolute;
  top: 138px;
  left: 345px;
  width: 150px;
  height: 150px;
  border: 5px solid #363A5D;
  border-radius: 100%;
}
/*Image du membre du mois*/
.pa_infobulle img {
  width: 150px;
  height: 150px;
  border-radius: 100%;
}
/*Texte du membre du mois*/
.pa_infobulle_inside {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 120px;
  height: 120px;
  overflow: auto;
  border-radius: 20px;
  background-color: #333438;
  border: 5px solid #363A5D;
  padding: 5px;
  text-align: center;
  color: #93909b;
  font-size: 12px;
  transform: rotate(-360deg) scale(0);
  -webkit-transform: rotate(-360deg) scale(0);
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Apparition du texte du membre du mois*/
.pa_infobulle:hover .pa_infobulle_inside {
  transform: rotate(0deg) scale(1);
  -webkit-transform: rotate(0deg) scale(1);
}


/*Bloc en haut à gauche*/
.pa_bloc_left_top {
  float: left;
  margin-top: 10px;
  margin-left: 20px;
  width: 390px;
  height: 183px;
}
/*Bloc des onglets*/
.onglets_left_top {
  width: 390px;
  height: 20px;
  text-align: center;
  color: #786FA8;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 1px 1px 1px #1D1934;
  text-transform: uppercase;
}
/*Espacement des onglets*/
#paonglet_Evenement {
  display: inline-block;
  margin-left: 15px;
  margin-right: 15px;
}
/*Onglets inactifs*/
.paonglet_0 {
  opacity: 0.8;
  text-shadow: none;
}
/*Onglets inactifs au survol*/
.paonglet_0:hover {
  cursor: pointer;
  text-shadow: 1px 1px 1px #1D1934;
}
/*Blocs des contenus des onglets - Contexte -Événements - Partenaires*/
.contenu_paonglet {
  display: none;
  width: 370px;
  height: 153px;
  background-color: #333438;
  border: 5px solid #363A5D;
  border-radius: 5px;
  padding: 5px;
  text-align: left;
  color: #93909b;
}
/*Intérieur des contenus des onglets*/
.contenu_paonglet .pa_inside {
  width: 327px;
  height: 153px;
  text-align: justify;
  overflow: auto;
  padding-right: 5px;
}


/*Bloc en haut à droite*/
.pa_bloc_right_top {
  float: left;
  margin-top: 20px;
  margin-left: 30px;
  width: 390px;
  height: 183px;
}
/*Bloc du staff*/
.staff_bloc {
  width: 355px;
  height: 163px;
  background-color: #333438;
  border: 5px solid #363A5D;
  border-radius: 5px;
  padding: 5px;
  padding-left: 20px;
  text-align: center;
  color: #93909b;
}
.staff_bloc span {
  display: inline-block;
  width: 85px;
  height: 115px;
  border-radius: 100%;
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 5px;
  border: 5px solid #363A5D;
}
/*Images du staff*/
.staff_bloc img {
  width: 85px;
  height: 115px;
  border-radius: 100%;
}


/*Bloc en bas à gauche*/
.pa_bloc_left_bottom {
  float: left;
  margin-top: 30px;
  margin-left: 20px;
  width: 390px;
  height: 183px;
}
/*Bloc des RPs du mois*/
.rpmois_bloc {
  width: 370px;
  height: 163px;
  background-color: #333438;
  border: 5px solid #363A5D;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  color: #93909b;
}
/*Bloc des images des RPs du mois*/
.rpmois_bloc span {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 5px solid #363A5D;
  border-radius: 100%;
  margin-top: 2px;
  margin-left: 15px;
  margin-right: 25px;
}
/*Images des RPs du mois*/
.rpmois_bloc img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
}
/*Liens des RPs du mois*/
.rpmois_bloc a {
  display: inline-block;
  vertical-align: top;
  width: 110px;
  margin-top: 1px;
  margin-left: 15px;
  margin-right: 25px;
  color: #E7E7E7;
  font-size: 13px;
  text-shadow: 1px 1px 1px #777777;
  text-transform: uppercase;
  font-family: 'Verdana';
}


/*Bloc en bas à droite*/
.pa_bloc_right_bottom {
  float: left;
  margin-top: 20px;
  margin-left: 30px;
  width: 390px;
  height: 183px;
}
/*Onglets de en bas à droite - Informations et Autres*/
.onglets_right_bottom {
  width: 390px;
  height: 20px;
  text-align: right;
  color: #786FA8;
  font-size: 15px;
  font-weight: 700;
  margin-left: 10px;
  text-decoration: none;
  text-shadow: 1px 1px 1px #1D1934;
  text-transform: uppercase;
}
/*Espacement des onglets*/
#papaonglet_Recherches {
  display: inline-block;
  margin-left: 15px;
  margin-right: 15px;
}
/*Onglets inactifs*/
.papaonglet_0 {
  opacity: 0.8;
  text-shadow: none;
}
/*Onglets inactifs survolés*/
.papaonglet_0:hover {
  cursor: pointer;
  text-shadow: 1px 1px 1px #1D1934;
}
/*Contenu des onglets*/
.contenu_papaonglet {
  display: none;
  width: 370px;
  height: 153px;
  background-color: #333438;
  border: 5px solid #363A5D;
  border-radius: 5px;
  padding: 5px;
  color: #93909b;
}
/*Intérieur du contenu des onglets*/
.contenu_papaonglet .pa_inside {
  padding-left: 48px;
  width: 322px;
  height: 153px;
  text-align: justify;
  overflow: auto;
  padding-right: 5px;
  margin-right: -5px;
}


/*Bas de la PA*/
.pa_bloc_bottom {
  margin-top: 20px;
  width: 850px;
  height: 33px;
  background-color: #333438;
  border-top: 5px solid #363a5d;
  border-radius: 0px 0px 50px 50px;
  padding-top: 7px;
}
/*Liens du bas de la PA*/
.pa_bloc_bottom a {
  color: #786FA8;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 1px 1px 1px #1D1934;
  text-transform: uppercase;
  font-family: 'Verdana';
}
/*Espacement entre les liens*/
.pa_bloc_bottom a:nth-child(2) {
  display: inline-block;
  margin-left: 80px;
  margin-right: 80px;
}

/* -------------------------------------------------- FIN PA -------------------------------------------------- */

C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier la PA et avez besoin d'aide.

À plus !