[PA] (Onyx) Une PA pour mon Forum

Dreuis

Age : 28Messages : 95

Mar 10 Mar 2015 - 18:48

Rappel du premier message :

Ma demande

Bien le bonjour, never-utopien, si on dit ça comme ça … je galère sur mon forum rpg a faire une belle PA, ce qui ruine totalement mon beau thème, et j'aurai donc besoin d'aide pour cela. Gérant ça seul, je n'ai aucun moyen de faire traiter ça par un membre de mon forum. Je vous demande donc de l'aide, et je vous en remercie d'avance. PS : La bannière étant fournis à la fin du doc, vous avez le droit de l'utiliser pour faire les images de la PA si vous en avez envie. De plus, j'aimerai que le copyright soit en haut à droite de la PA, et si problème sur mon schéma, n'hésiter à pas à me le dire.

Schéma(s) et Eléments
Schémas : https://nsa33.casimages.com/img/2015/03/10/150310064248725023.jpg
Tailles des éléments : 860*490 environ en taille globale,
après Diviser en quatre le rectangle principal, je sais pas trop
Effets voulus : Arrondis et des onglets, pour le cadre en haut à gauche et en bas à droite.
Version de votre forum : phpBB2 

Ressources
Les Images je m'en occuperait moi même.

Autres précisions ?
Le lien de la bannière pour les couleurs
https://i.servimg.com/u/f39/13/66/42/13/eahkac10.jpg

hirondelle

Age : 35Messages : 134

Jeu 2 Avr 2015 - 21:29

il fait 200 sur 200.
Vu que tu n'as pas donné d'instruction, j'ai fait ça au pif.

Dreuis

Age : 28Messages : 95

Jeu 2 Avr 2015 - 21:37

Tu peux le réduire en 150*150 ?

hirondelle

Age : 35Messages : 134

Ven 3 Avr 2015 - 13:51

Voilà c'est fait ^^

Dreuis

Age : 28Messages : 95

Ven 3 Avr 2015 - 15:08

Merci, je trouve que ça rend mieux x)

hirondelle

Age : 35Messages : 134

Sam 4 Avr 2015 - 14:45

Bon, on va donc passer à la mise en forme de tout ça.
Une préférence?

Dreuis

Age : 28Messages : 95

Jeu 9 Avr 2015 - 7:35

Non je n'ai pas de préférence particulière, en faite j'aime bien regarder et dire ce qu'il manque après

hirondelle

Age : 35Messages : 134

Jeu 9 Avr 2015 - 9:36

Coucou,

Dis moi ce qu'il manque alors :)

Dreuis

Age : 28Messages : 95

Jeu 9 Avr 2015 - 19:14

Onglet cliquable si tu retrouve et agrandir la zone de texte en haut à gauche parce que je pense qu'il y a la place pour

hirondelle

Age : 35Messages : 134

Sam 11 Avr 2015 - 14:12

Désolée pour le retard, j'ai eu un soucis de mon côté.
Je vais donc chercher comment faire des onglets cliquables pour la PA. Il va falloir que tu t'armes de patience ^^

Onyx

Age : 30Messages : 3350

Mer 22 Avr 2015 - 5:41

Salut!

Je viens aux nouvelles, tout ce passe bien? Merci de donner de vos nouvelles dans les 10 prochains jours

Dreuis

Age : 28Messages : 95

Mer 22 Avr 2015 - 21:49

Je suppose que tout ce passe bien (je suis pas trop actif car j'ai une tonne de boulot désolé)

Neva

Age : 33Messages : 18565

Sam 2 Mai 2015 - 11:29

Des nouvelles d'hirondelle ? Ca fait une vingtaine de jours qu'elle n'a pas posté ici, tu devrais peut-être la MP

Dreuis

Age : 28Messages : 95

Sam 2 Mai 2015 - 18:22

Je l'ai fait ce matin pour tout dire, vu que j'avais pas de nouvelle, elle m'a toujours pas répondu

Neva

Age : 33Messages : 18565

Sam 2 Mai 2015 - 22:42

Je propose d'attendre quelques jours (au moins que le week-end se termine, elle a peut-être pas accès à internet) et, si jamais tu n'as pas de nouvelles, tu n'auras qu'à poster pour qu'on réouvre la commande à tous les codeurs

Onyx

Age : 30Messages : 3350

Jeu 7 Mai 2015 - 7:23

Salut!

Est-ce que tu as des nouvelles d'Hirondelle? Elle avait pris deux autres demandes et n'a pas l'air d'être retournée sur elles non plus, alors si elle ne répond pas, on va remettre toutes ses demandes en libre pour que vous n'attendiez pas trop longtemps.


PS: Si elle ne répond pas, je peux m'occuper de reprendre la demande, surtout que comme elle n'a pas changé son forum test, je peux récupérer ce qu'elle a commencé

Dreuis

Age : 28Messages : 95

Jeu 7 Mai 2015 - 13:01

Bah elle a toujours pas répondu à mon grand désespoir

Onyx

Age : 30Messages : 3350

Ven 8 Mai 2015 - 7:41

Damnit >< Alors je remets en libre et si quelqu'un n'a pas pris la demande d'ici lundi, je la prendrai en charge

Dreuis

Age : 28Messages : 95

Ven 8 Mai 2015 - 15:32

D'accord Merci

Onyx

Age : 30Messages : 3350

Dim 10 Mai 2015 - 1:45

Salut!

Finalement j'ai été un peu plus vite que je le pensais
Voilà le résultat : http://forum-test-onyx5.forum-canada.com/

Des critiques et/ou modifications?

Dreuis

Age : 28Messages : 95

Dim 10 Mai 2015 - 10:10

Non, c'est juste absolument parfait

Onyx

Age : 30Messages : 3350

Mar 12 Mai 2015 - 2:49

Alors si tout est bon, voilà les codes ^^

Pour le CSS :

Code:

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

/*Fond de la 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 -------------------------------------------------- */


Et voici le HTML de la PA :

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>

Dreuis

Age : 28Messages : 95

Mer 13 Mai 2015 - 22:00

Merci beaucoup, je l'ai installé et tout fonctionne, c'est parfait

Contenu sponsorisé