AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    PA à Damier

    Onyx
    Onyx
    FémininAge : 26Messages : 3318

    le Mer 10 Fév 2016 - 23:46

    Rappel du premier message :


    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.


    - La version du forum est PHPBB2.
    - Les catégories ont une largeur de 850px.

    Mettre un crédit vers Never-Utopia est obligatoire. Donc si vous enlevez le crédit sur la PA, assurez-vous de le mettre ailleurs.


    Vos commentaires et remerciements sont toujours bienvenus ^^


    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 !


    Dernière édition par Onyx le Mer 30 Mai 2018 - 0:42, édité 2 fois



    Lancy Orca
    Lancy Orca
    FémininAge : 30Messages : 20

    le Mer 30 Aoû 2017 - 12:18

    Meric :)
    Féhéla
    Féhéla
    FémininAge : 47Messages : 238

    le Lun 19 Fév 2018 - 19:03

    merci
    Shiba Rikubi
    Shiba Rikubi
    MasculinAge : 25Messages : 23

    le Ven 23 Fév 2018 - 14:39

    Merci beaucoup pour cette très belle page d'accueil! ^^
    Eva Mayers
    Eva Mayers
    FémininAge : 31Messages : 3

    le Sam 21 Avr 2018 - 21:14

    merci
    Yumeki
    Yumeki
    FémininAge : 28Messages : 147

    le Jeu 10 Oct 2019 - 19:53

    Merci pour le partage ^^
    Contenu sponsorisé


      La date/heure actuelle est Jeu 29 Oct 2020 - 5:41