PA #1

Nature du code

PA.
Tout le contenu est évidemment modifiable. Le code a déjà été simplement utilisé pour Dream. La cbox a été enlevée dans le code HTML, c'est donc devenu une cellule vide.
Vous voulez une personnalisation ? Postez à la suite ou bien envoyez-moi un mail !

Aperçu

Cliquez pour voir l'image en taille réelle.

Code

Panneau d'administration >> Affichage >> Généralités

HTML:

Code:: <div class="dreampa">

<div class="head">
   <a href="http://dream.forumsactifs.net/t13-what-s-new-on-dream#15">Dernières mises à jour</a> + <a href="http://dream.forumsactifs.net/t41-repertoire-des-codes#50">Tous les codes</a> + <a href="http://dream.forumsactifs.net/t102-alltheboys#220">Hommes ♂ </a>+ <a href="http://dream.forumsactifs.net/t99-allthegirls#217">Femmes ♀</a> + <a href="http://dream.forumsactifs.net/t12-le-but-et-le-reglement-du-forum#14">Avant de prendre </a> + <a href="http://dream.forumsactifs.net/t187-les-qfp-ou-autrement-dit-les-questions-frequemment-posees#551">QFP</a> + <a href="/f4-faq">Une question ?</a>
</div>

<div class="paborder">
   <center>
<div id="survolezmoi">
<span>Survolez</span>
</div>
</center>
</div>

<table>

<tbody>

<tr>

<td style="vertical-align: middle;" class="contact">
   <a href="http://shippingspirit.tumblr.com"><em class="fa fa-tumblr-square fa-lg"></em> Shipping Spirit</a> • <a href="http://epicarena.net">Epicarena <span>Joy </span></a> • <a href="http://ut-austin.forumactif.org">La Boîte à Souvenirs <span>Charlie J. Hayes </span></a>
</td>

<td rowspan="3" class="painfo">

<center>

<div id="pamove">
   <span class="patitre">Dream ? C'est quoi ça ? </span><br /> Dream est le forum galerie de Joy, anciennement LittleParadise. <br />Ici sont regroupées toutes mes créations : codes, avatars, icons et gifs. Ce sont des ressources pour RPG en libre-service, ma seule demande est de me créditer. J'ai mis du temps pour faire tout ça, c'est la moindre des choses non ? <br /><span style="font-style: italic; font-weight: bold;">Puis si tu mets pas le crédit, t'es pas joli. </span><br /><br />Pour faire de la pub pour le forum parce que vous en avez envie, vous pouvez utiliser le bouton. ♥ <br />
<center>
   <img src="http://nsm08.casimages.com/img/2014/10/27//14102711470613517812651125.gif" />
</center>

</div>

</center>

</td>

<td class="patuto" rowspan="2">
   <span class="patitre">Tutoriels</span>
<div>
   Retrouvez des tutoriels sur Dream ! Tutoriels pour coder et pour grapher. ♥ <br /><a href="http://dream.forumsactifs.net/t176-repertoire-des-tutoriels#498">Tous les tutoriels HTML/CSS</a> + <a href="http://dream.forumsactifs.net/f29-tutoriels">Tous les tutoriels graphiques </a>
</div><br /> <span class="patitre"> Derniers tutoriels : </span>
<div>
   + <a href="http://dream.forumsactifs.net/t202-barre-de-lecteur-youtube#588">Barre de lecteur YouTube </a><br />+ <a href="http://dream.forumsactifs.net/t201-photoshop-faire-un-gif-de-a-a-z-avec-vlc-media-player#582">Photoshop: Créer un gif à partir d'une vidéo </a><br />
</div>

</td>

</tr>

<tr>

<td rowspan="2" class="palast">
   <span class="patitre">Derniers codes : </span>
<div>
   + <a href="http://dream.forumsactifs.net/t208-cadre-pour-liens-6#597">Cadre pour liens #6 </a><br />+ <a href="http://dream.forumsactifs.net/t104-fiche-de-post-3#222">Fiche de post #3</a> <br /> + <a href="http://dream.forumsactifs.net/t231-categories-1#683">Catégories #1 </a> <br />
</div><br /><span class="patitre">Derniers avatars : </span>
<div>
   + 13 <a href="http://dream.forumsactifs.net/t221-cody-christian#627">Cody Christian </a><br />+ 18 <a href="http://dream.forumsactifs.net/t219-shay-mitchell#625">Shay Mitchell</a><br />+ 10 <a href="http://dream.forumsactifs.net/t232-alycia-debnam-carey#693">Alycia Debnam Carey</a><br />
</div><br /> <span class="patitre">Derniers icons : </span>
<div>
   + 7 <a href="http://dream.forumsactifs.net/t193-shelley-hennig#633">Shelley Hennig</a> <br /> + 13 <a href="http://dream.forumsactifs.net/t222-cody-christian#628">Cody Christian </a><br />+ 9 <a href="http://dream.forumsactifs.net/t233-alycia-debnam-carey#694">Alycia Debnam Carey</a><br />
</div>
   <br /><span class="patitre">Derniers gifs : </span>
<div>
   + <a href="http://dream.forumsactifs.net/t229-jake-falahee-et-luke-newberry#667">Crackship: Jake Falahee & Luke Newberry </a><br /> + <a href="http://dream.forumsactifs.net/t227-chris-wood-ashley-benson#655">Crackship: Chris Wood & Ashley Benson</a><br />
</div>

</td>

</tr>

<tr>

<td>
CELLULE VIDE.
</td>

</tr>

</tbody>

</table>
</div>

Panneau d'administration >> Affichage >> Couleurs >> Feuille de style CSS

CSS:

Code:: /* Début PA by Joy http://dream.forumsactifs.net */

.dreampa {
  width: 90%;
  border-radius: 5px;
  background: #fff; /* Couleur de fond de la PA entière */
  margin: 5px;
  box-shadow: 0px 0px 2px 0px #777; /* Ombre de la boîte de la PA */
}
.dreampa a {
  color: #000; /* Couleur des liens */
  transition: all ease 1s;
  -moz-transition: all ease 1s;
  -webkit-transition: all ease 1s;
  -ms-transition: all ease 1s;
  -o-transition: all ease 1s;
}
.dreampa a:hover {
  font-style: italic;
  color: #fff842; /* Couleur des liens de la PA au survol */
}

/* TITRES SPAN ET P */
.patitre {
  font-family: 'Oswald', sans-sérif;
  font-size: 18px;
  font-variant: small-caps;
  color: #000; /* Couleur des sous-titres de la PA */
}
.patitre:hover {
  letter-spacing: 2px;
  transition: all ease 1s;
  -moz-transition: all ease 1s;
  -webkit-transition: all ease 1s;
  -ms-transition: all ease 1s;
  -o-transition: all ease 1s;
}

/* DIV LIENS IMPORTANTS EN-TÊTE */
.head {
  border-bottom: 2px dotted #fff842; /* Bordure pointillée sous les liens en en-tête */
  text-align: center;
  font-family: 'Oswald', sans-sérif;
  font-size: 22px;
  font-variant: small-caps;
}
/* DIV POUR LA BORDURE EPAISSE SOUS LIENS EN-TÊTE */
.paborder {
  border-top: 10px solid #fff842; /* Bordure épaisse */
  text-align: center;
}
/* LE PETIT TRIANGLE SURVOLEZ */
#survolezmoi {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 100px 0 100px;
  border-color: #fff842 transparent transparent transparent;
  color: none;
  position: relative;
  text-align: center;
}
div#survolezmoi span {
  position: relative;
  top: -45px;
  left: -25px;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  color: #fff;
  text-transform: lowercase;
}
/* TABLEAU PRINCIPAL DE LA PA */
.dreampa table {
  border-spacing: 10px;
  margin: -5px 5px;
}
.dreampa td {
  box-shadow: 0px 0px 5px 0px #fff842; /* Ombre qui borde les différentes cellules de la PA */
  border-radius: 5px;
  padding: 5px;
  vertical-align: top;
}
/* CELL WHERE TO FIND ME */
.contact {
  width: 300px;
  height: 30px;
  text-align: center;
  font-size: 16px;
  font-family: 'Oswald', sans-serif;
  font-variant: small-caps;
}
.contact span {
  display: none;
}
.contact a:hover span {
  display: none; /* On masque l'infobulle. */
}
.contact a:hover {
  background: none; /* Correction d'un bug d'Internet Explorer. */
  z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
}
.contact a:hover span {
  display: inline; /* On affiche l'infobulle. */

  position: absolute;

  color: #bbb; /* Couleur du texte de l'infobulle */

  border-radius: 5px;
  padding: 5px;
  border: 1px dotted #fff842; /* Bordure de l'infobulle */

  background: #FFFFFF; /* On change la couleur du fond. */
  text-align: center; /* On aligne le texte dans l'infobulle. */
}
/* CELL PA INFO */
.painfo {
  padding: 0px 5px;
  vertical-align: middle !important;
  background: url();
  width: 200px;
  overflow: hidden;
  box-shadow: none !important;
  background: #fff842 url('http://nsm08.casimages.com/img/2015/09/13//15091308270713517813579613.png') no-repeat center center; /* Image de la fille au milieu à modifier soi-même ou à enlever */
}
/* BLOC DES INFOS */
div#pamove {
  opacity: 0;
  width: 185px;
  height: 285px;
  transition: all ease 1s;
  background: #fff;
  border-radius: 5px;
  padding: 3px;
  text-align: justify;
}
.painfo:hover div#pamove {
  opacity: 1;
}
/* CELL PA TUTORIELS DIV ET CELL PA DERNIERS CODES/VAVAS/ICONS/GIFS DIV */
.patuto div, .palast div {
  margin-left: 10px;
  text-align: justify;
}
/* LIENS DIV PA TUTOS ET DERNIERES CREAS */
.patuto a, .palast a {
  color: #bbb !important; /* Couleur des liens de la PA (ne pas enlever le !important) */
}
.patuto a:hover, .palast a:hover {
  color: #fff842 !important; /* Couleur des liens de la PA au survol (ne pas enlever le !important) */
}
/* CELL PA LAST + PA TUTO */
.palast, .patuto {
  width: 200px;
}
/* Fin PA by Joy */

Invité

J'ai pris ta PA, elle est super jolie !J'ai bien mis le crédit, t'inquiètes !
Mais j'ai une petite question, comment change-t-on l'image de la fille au milieu ?
Et comment on change les couleurs ?

Alors, pour l'image de la fille au milieu, c'est au niveau de cette partie de code :

Code:: /* CELL PA INFO */
.painfo {
padding: 0px 5px;
vertical-align: middle !important;
background: url();
width: 200px;
overflow: hidden;
box-shadow: none !important;
background: #fff842 url('http://nsm08.casimages.com/img/2015/09/13//15091308270713517813579613.png') no-repeat center center;
}

Tu changes le lien de l'image. ^^

Pour changer les couleurs, ce sont toutes les couleurs #fff842 qui donneront du jaune. Je vais recommenter le code du CSS dans le premier post pour que ce soit plus clair. ^.-

Par contre, le mot "survolez" est une image donc il faut en modifier la couleur avec Gimp, Photofiltre ou PS.

Invité

Merci beaucoup pour ton aide, grâce à toi je peux enfin me faire une PA, je n'oublierais pas de te créditer quand je ferais la PA :)

De rien ! ^^

Invité

Bonjour !

Ayant emprunter tes codes de catégories allant avec la P.A, j'aimerais bien l'utiliser également. Seulement, c'est une PA pour site graphique et on aimerait bien l'utiliser pour un forum RPG. Seulement je ne sais pas comment la modifier. Serait-il possible d'avoir de l'aide ? Merci d'avance !

Au besoin voici mon adresse email : aikoyangiisland@gmail.com

Merci d'avance !

Coucou,
Je te l'emprunterais quand mon ordi arrêtera d'avoir bugs... (Il ne me montre pas les spoilers...).