PA #2 by Laxy & Jamy

Pré-requis : accès au panneau d'administration.
Version forum : phpBB2
Difficulté : moyen.
Le rendu :

Tout est modifiable, couleur, image, texte (évidemment !) Prévu pour avoir une image de fond en titre, qui sera également sous le titre de la PA & du Qui Est En Ligne.
Merci de garder un crédit, un lien renvoyant sur AvadaKedagraph si vous utilisez cette PA ! Merci !

Le design de mon bébé change du tout au tout, alors on vous met en LS l'index !! I love you

catégories qui vont avec cette PA

Pour simplifier mon code, j'ai utilisé des variables dans ma feuille CSS. C'est à dire que si vous utilisez ces codes, vous allez pouvoir modifier les couleurs plutôt facilement ! Pour tout savoir à ce sujet : lire ce tuto.

Instruction.

Rendez-vous sur la Page d'accueil (Panneau d'administration > Onglets Affichage > rubrique Page d'accueil > Généralité).
Coller le code suivant et personnalisé le à votre guise.

Code:: <div class="fondPa">

<div class="fondTitrePA">

<div class="titrePA">
   Anapneo
</div>

<div class="sousTitrePa">
   forum Harry Potter ϟ descendance ϟ octobre 2025
</div>

</div>

<div class="paContent">

<div class="partLeft">

<div class="contexte">

<p>
   <strong>get your wands ready ϟ</strong> Ici on est pas juste là pour RP, on est aussi là pour jouer, et surtout, utiliser la magie ! Immergez vous dans les années 2025, bien après la mort de Voldemort et laissez vous guider dans un monde fantastique qui n'a pas tant changé ! Le Poudlard Express vous attend avec son lot de friandises à acheter et l'école de sorcellerie vous accueille avec ses nouveaux professeurs et un système d'apprentissage innovant ! Sans oublier Pré-Au-Lard ou le Chemin de Traverse avec ses boutiques plus que réelles. Découvrez un nouveau système de jeu où votre propre personnage sera obligé de se dépasser pour obtenir ce qu'il veut. Promis, vous n'êtes pas au bout de vos surprises...
</p>
   <img src="http://image.noelshack.com/fichiers/2018/41/5/1539361621-baguette-allumee.gif" class="imgContexte" />
</div>

<div class="scenar">

<div class="subtitle">
   wanted
</div>
   <a title="April Lestrange ϟ 30 ans ϟ Ministère" href="http://anapneo.forumactif.com/t498-april-lestrange-mere-30-ans-ancienne-serpentarde"><img alt="April Lestrange ϟ 30 ans ϟ Ministère" src="https://66.media.tumblr.com/c42089969ec99574fba2a989a3f34b91/tumblr_n8iok6mhTa1scx9bko1_250.png" class="imgScenar" /></a> <a title="Fred II Weasley ϟ Serdaigle ϟ 15 ans" href="http://anapneo.forumactif.com/t87-pv-5emes-annees-dispo-4-5#294"><img alt="Fred II Weasley ϟ Serdaigle ϟ 15 ans" src="http://image.noelshack.com/fichiers/2018/51/3/1545225822-jaden-smith-instrumental.jpg" class="imgScenar" /></a> <a title="Victoire Weasley ϟ 27 ans ϟ médicomage" href="http://anapneo.forumactif.com/t71-pv-adultes#468"><img alt="Victoire Weasley ϟ 27 ans ϟ médicomage" src="http://images6.fanpop.com/image/photos/39100000/Amanda-Seyfried-amanda-seyfried-39131720-300-300.jpg" class="imgScenar" /></a> <a title="Neville Londubat ϟ 45 ans ϟ Professeur de Botanique" href="http://anapneo.forumactif.com/t71-pv-adultes#470"><img alt="Neville Londubat ϟ 45 ans ϟ Professeur de Botanique" src="http://images4.fanpop.com/image/photos/20300000/Matt-Lewis-neville-longbottom-20398572-100-100.png" class="imgScenar" /></a> <a href="http://anapneo.forumactif.com/t70-pv-7emes-annees-dispo-3-4#484" title="Albus S. Potter ϟ 17 ans ϟ Serpentard"><img class="imgScenar" src="http://image.noelshack.com/fichiers/2019/01/2/1546343791-pcl8rlmb-400x400.jpg" alt="Albus S. Potter ϟ 17 ans ϟ Serpentard" /></a> <a href="http://anapneo.forumactif.com/t87-pv-5emes-annees-dispo-4-5#295" title="Hugo Weasley ϟ 15 ans ϟ Gryffondor"><img class="imgScenar" src="http://image.noelshack.com/fichiers/2019/01/2/1546343672-2b4c275934f17d8c4165fa88ed3b3fb2-dane-dehaan-character-profile.jpg" alt="Hugo Weasley ϟ 15 ans ϟ Gryffondor" /></a> <a href="http://anapneo.forumactif.com/t87-pv-5emes-annees-dispo-4-5#296" title="Lysander Dragonneau ϟ 15 ans ϟ Poufsouffle"><img class="imgScenar" src="https://yt3.ggpht.com/a-/AN66SAxn8ebiPhhPqR_Az4MYcyGqpZRMOJf5i3g_xw=s900-mo-c-c0xffffffff-rj-k-no" alt="Lysander Dragonneau ϟ 15 ans ϟ Poufsouffle" /></a> <a href="http://anapneo.forumactif.com/t71-pv-adultes-dispo-4-5#5656" title="Dominique Weasley ϟ 24 ans ϟ métier libre"><img class="imgScenar" src="https://pbs.twimg.com/media/CDJROl1WYAIBsrV.jpg" alt="Dominique Weasley ϟ 24 ans ϟ métier libre" /></a>
</div>

</div>

<div class="partMiddle">

<div class="lienPa">
   <a href="http://anapneo.forumactif.com/t20-reglement-d-anapneo">Règlement</a> <a href="http://anapneo.forumactif.com/t57-contexte">Contexte</a> <a href="http://anapneo.forumactif.com/t60-bottin-des-avatars">Bottin avatars</a> <a href="http://anapneo.forumactif.com/t47-guide-complet-de-l-apprenti-sorcier">Guide du forum</a> <a href="http://anapneo.forumactif.com/t55-03-le-package-de-depart">Le package de départ</a> <a href="http://anapneo.forumactif.com/f3-les-niveaux-quetes">Les quêtes</a>
</div>

<div class="topsite">

<div class="subtitle2">
   Top-site - Votez !
</div>
   <a href="http://www.root-top.com/topsite/pubrpgdesign/in.php?ID=1990"><img src="http://image.noelshack.com/fichiers/2018/42/7/1540121167-choixpeaux.png" /></a> <a href="http://www.root-top.com/topsite/vulnerasamento/in.php?ID=870"><img src="http://image.noelshack.com/fichiers/2018/42/7/1540121167-choixpeaux.png" /></a> <a href="http://www.root-top.com/topsite/smykie/in.php?ID=1599"><img src="http://image.noelshack.com/fichiers/2018/42/7/1540121167-choixpeaux.png" /></a> <a href="http://www.root-top.com/topsite/serpentgy/in.php?ID=12105"><img src="http://image.noelshack.com/fichiers/2018/42/7/1540121167-choixpeaux.png" /></a>
</div>

<div class="topfriend">
   <a href="http://cursedwarfare.forumactif.org/"><img src="https://nsa39.casimages.com/img/2018/10/31/181031015557854716.png" /></a> <a target="_blank" href="http://amnesia.actifforum.com"><img src="https://zupimages.net/up/18/49/mfs9.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://erodaacademy.creerforum.com/"><img alt="" src="https://zupimages.net/up/18/25/h557.png" border="0" /></a> <a href="http://yabf-rpg.forumactif.com/"><img src="https://i.imgur.com/XBmc6n7.png" /></a> <a href=""><img src="https://via.placeholder.com/35x35" /></a> <span><a href="http://anapneo.forumactif.com/t101-devenir-partenaire">envie de devenir notre partenaire ? </a></span>
</div>

</div>

<div class="partRight">

<div class="staff">

<div class="subtitle">
   le staff
</div>
   <a href="http://anapneo.forumactif.com/u7" class="item-staff"> Alexander Anderson<br /><em>Co-fonda</em><img src="http://image.noelshack.com/fichiers/2018/49/7/1544355071-tumblr-o213jzwt681t4osjeo8-250.png" /> </a> <a class="item-staff" href="http://anapneo.forumactif.com/u13"> Molly II Weasley<br /><em>Admin</em><img src="http://image.noelshack.com/fichiers/2018/49/7/1544355171-25010470-160720021206029-3417245498761805824-n.jpg" /> </a> <a href="http://anapneo.forumactif.com/u41" class="item-staff"> Roxanne Weasley<br /><em>Modo</em><img src="http://image.noelshack.com/fichiers/2018/49/7/1544355172-tumblr-n2shx5hbuk1stgfauo1-500-zendaya-coleman-38857180-500-500.jpg" /> </a>
</div>

<div class="actus">

<p>
   <strong>21 décembre</strong> Elles sont de retour, toutes belles, toutes fraiches, <a href="http://anapneo.forumactif.com/f3-les-niveaux-quetes">les quêtes !!</a> A vos RPs les amis ! ϟ <strong>12 décembre</strong> MAJ du forum, mise en place de la <a href="http://anapneo.forumactif.com/t484-la-v2#6020">V2</a> & lancement de l'<a href="http://anapneo.forumactif.com/t482-evenement-n2-foire-a-pre-au-lard#6018">event n°2</a> ϟ <strong>6 décembre</strong> Devenir Animagus, Occlumens, Legimens, faire de la magie sans baguette ou lancer des sorts informulés est désormais <a href="http://anapneo.forumactif.com/f102-les-bottins">disponible</a> ϟ <strong>5 décembre</strong> Tu peux à présent <a href="http://anapneo.forumactif.com/t430-reboot-de-son-personnage#5544">reboot ton personnage</a> ! ϟ ouverture du forum le <strong>30 octobre</strong>.
</p>

</div>

</div>

</div>

</div>

Puis modifier la feuille CSS (Panneau d'administration > Onglet Affichage > rubrique Image & Couleur > Couleurs)
Coller le code suivant.

Copier/coller uniquement si vous n'avez pas déjà déclaré les variables depuis un autre code.

Code:: :root{
  --fondforum: #e9e9e9; /* gris */
  --fondfonce: #a8b7d3; /* mauve */
  --fondclair: #fff;
  --bordure: #fff; /* blanc */
  --colorone: #982786; /* magenta -- titre et sous titre PA */
  --colortwo: #aa3a98; /* violet clair */
  --colorthree: #008d9b; /* vert-eau -- lien */
  --colorfour: #512563; /* mangeta soulignement gras et italic */
}

Code:: /*----------------------- PA by Laxy & Jamy - AvadaKadagraph -------------*/
.forumline .row1{padding: 0;}
.fondPa {text-align:left;box-sizing:border-box;width:98%; margin: 0 auto;}
.fondTitrePA{background-image: url('http://image.noelshack.com/fichiers/2018/50/2/1544516140-pattern.png');}

.titrePA {
  color: var(--colorone);
  font-family: Dancing Script;
  font-size: 50px;
  letter-spacing: 0px;
  margin: 0 auto;
  text-shadow: 1px 1px 1px var(--bordure);
  text-align:center;
}

.sousTitrePa {
  font-size: 12px;
  color: var(--colorone);
  margin: -6px 0 0;
  font-family: 'Marcellus SC';
  text-align:center;
  padding: 0 0 5px;
}

.paContent{display: flex;justify-content: space-between;box-sizing:border-box;
padding: 5px;background-color: var(--fondfonce);}
.partLeft, .partRight{width: 32%;}
.partMiddle{width: 30%;}

.fondPa .subtitle{
  color: var(--colorone) !important;
  font-family: Marcellus SC;
  font-size: 20px;
  margin: 0 3px 5px !important;
  text-align: center;
}

.fondPa .subtitle:before, .subtitle:after{
  content: " ";
  display: inline-block;
  height: 2px;
  vertical-align: middle;
  width: 49px;
  background: var(--colorone);
}

.fondPa .subtitle2{
  color: var(--colorone) !important;
  font-family: Marcellus SC;
  font-size: 13px;
  text-align: center;
}

/* PART LEFT : context + wanted */
.contexte {
  font-size: 10px;
  text-align: justify;
  position:relative;
}

.imgContexte {
  width:100%;
  height:112px;
  position:absolute;
  top:0;
  left:0;
}

.contexte p{
  width: 100%;
  height:112px;
  padding:5px;
  overflow: auto;
  box-sizing:border-box;
  margin: 0;
}

.contexte:hover .imgContexte{
  display: none;
}

.fondPa .scenar {
  text-align: center;
  margin-top:5px;
}

.fondPa .scenar .imgScenar {
  width: 50px;
  height: 50px;
}

/* PART MIDDLE : lien et news */

.lienPa {
}

.lienPa a {
  font-size: 11px;
  letter-spacing: 0px;
  font-weight: bold;
  padding: 2px;
  display: block;
  text-align:center;
  text-decoration: none !important;
  font-style: normal;
  line-height: 17px;
  background-color: var(--fondclair);
  margin: 0 0 3px;
}

.actus{
  margin: 2% 2% 0;
}

.actus p{
  margin:3px 0px;
  padding: 0;
  text-align:justify;
  height:130px;
  overflow: auto;
font-size: 10px;
  box-sizing:border-box;
  margin-top: 10px;
}

/* PART RIGHT : PA et topsite */

.fondPa .staff{
  margin:0;
  text-align:center;
  width: 100%;
}

.fondPa .item-staff{
  width:70px;
  display: inline-block;
  text-align:center;
  height:70px;
  overflow: hidden;
  position: relative;
  margin:1px;
  background: transparent;
  font-size: 11px;
}

.fondPa .item-staff img{
  width:70px;
  height: 70px;
  display:block;
  position: absolute;
  top:0;
  left:0;
  transition:3s;
}

.fondPa .item-staff:hover img{
  opacity:0.4;
  transition:1s;
  z-index:-1;
}

.topsite{
  text-align:center;
  margin-top: 17px;
}

.topsite a img{
  width: 20px;
}

.topfriend{
  height: 62px;
  overflow: auto;
  text-align: center;
  margin-top: 18px;
}

.topfriend img{
  width: 30px;
  height: 30px;
}

.topfriend span{
  display: block;
}

.topfriend a{
  font-size:10px;
}

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

En espérant que ce code va te servir ! Si tu n'arrives pas à faire une modification, n'hésite pas à ouvrir une "commande" de codage, je peux t'aider à personnaliser/modifier un peu le code !

Enjoy coding ! PA #2 by Laxy & Jamy 3522390538

Arya

» Fiche RP #1 Laxy
» {Laxy} Downright High
» {Laxy} Une histoire de famille
» {Laxy}Big mama - avatars
» {#1 Laxy} Histoire de famille

Rechercher

Résultats par : Messages Sujets
Recherche avancée