Voici donc une PA utilisée sur un forum Harry Potter.
Elle comporte un emplacement pour le contexte, un pour les liens utiles, un pour le Staff, un autre pour les Top-sites, un espace pour les nouvelles, un espace pour la météo, un pour les prédéfinis et Scénarios, un pour les partenaires et un pour les crédits.
En effet, les infobulles ont un léger beug depuis une MAJ de Forumactif (d'il y a longtemps).
Il faut donc créer une page HTLM (en prenant soin de cliquer sur ).
Code à mettre dans "Panneau d'Administration > Module > Gestion des Pages HTLM"
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>PA NOM DE VOTRE FORUM</title>
<style>
a, a:link, a:visited, a:hover {
text-decoration: none;
}
a {
color: #B03939;
font-family: Georgia;
font-size:10px;
text-decoration: none;
}
a:hover {
color: #7A6B54;
font-size:10px;
font-family: Georgia;
text-decoration: none;
}
a.lien, a.lien:link, a.lien:visited, a.lien:hover {
text-decoration: none;
}
a.lien {
font-size: 10px;
font-family: Georgia;
color: #B03939;
text-shadow: 1px 1px 1px black;
text-decoration: none;
}
a.lien:hover {
font-size: 10px;
font-family: Georgia;
color: #7A6B54; text-shadow: 1px 1px 1px black;
font-weight:bolder;
text-decoration: none;
}
#fond_pa {
margin : auto;
width : 710px;
padding : 15px;
border-width : 1px 4px 1px 4px;
border-color : #4F030C;
border-style : solid;
background-color:#d6bd87;
}
#fond_pa h1 {
text-align : center;
margin : 0 auto;
font-size : 25px;
color : #660E0E;
text-shadow : 1px 1px 0 #4F030C;
text-transform : uppercase;
font-family : Georgia;
}
#fond_pa h1:hover {
text-align : center;
margin : 0 auto;
font-size : 25px;
color : #7A6B54;
text-shadow : 1px 1px 0 #4F030C;
font-family : Georgia;
}
#fond_pa h2 {
text-align : center;
margin : 0 auto;
font-size : 18px;
color : #660E0E;
text-shadow : 1px 1px 0 #4F030C;
text-transform : uppercase;
border: 2px solid #4F030C;
border-bottom: 2px dotted #4F030C;
font-family : Georgia;
}
#fond_pa h2:hover {
text-align : center;
margin : 0 auto;
font-size : 18px;
color : #7A6B54;
text-shadow : 1px 1px 0 #4F030C;
border: 2px solid #4F030C;
border-bottom: 2px dotted #4F030C;
font-family : Georgia;
}
#contexte {
width : 213px;
height : 630px;
padding : 5px;
border: 2px solid #4F030C;
border-top: 2px dotted #4F030C;
overflow : auto;
text-align : justify;
font-family : Georgia;
font-size : 10px;
}
#liens {
width : 213px;
height : 182px;
padding : 5px;
border: 2px solid #4F030C;
border-top: 2px dotted #4F030C;
text-align : justify;
font-family : Georgia;
font-size : 10px;
}
#news {
width : 213px;
height : 182px;
padding : 5px;
border: 2px solid #4F030C;
border-top: 2px dotted #4F030C;
overflow : auto;
text-align : justify;
font-family : Georgia;
font-size : 10px;
}
#tops {
width : 213px;
height : 182px;
padding : 5px;
border: 2px solid #4F030C;
border-top: 2px dotted #4F030C;
text-align : justify;
font-family : Georgia;
font-size : 10px;
}
#staff {
width : 213px;
height : 182px;
padding : 5px;
border: 2px solid #4F030C;
border-top: 2px dotted #4F030C;
text-align : center;
font-family : Georgia;
font-size : 10px;
}
.info {
position: relative;
z-index: 24;
text-decoration: none;
font-family : Georgia;
font-size : 10px;
}
d.info:hover {
z-index: 25;
}
d.info span {
display: none;
}
d.info:hover span {
display: block;
position: absolute;
top: -2em;
left: -2em;
width: 150px;
background-color: #DEB960;
color: #660E0E;
text-align: center;
font-weight: none;
border: 2px solid #4F030C;
font-family : Georgia;
font-size : 10px;
}
.imgwidget {
border-radius: 50%;
width: 65px;
height: 65px;
-moz-transition-duration: 1s;
-moz-transition-timing-function: linear;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-duration: 1s;
transition-timing-function: linear;
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.imgwidget:hover {
border-radius: 50%;
width: 65px;
height: 65px;
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.imgwidget2 {
border-radius: 50%;
width: 65px;
height: 65px;
-moz-transition-duration: 1s;
-moz-transition-timing-function: linear;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-duration: 1s;
transition-timing-function: linear;
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.imgwidget2:hover {
border-radius: 50%;
width: 65px;
height: 65px;
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.imgwidget3 {
border-radius: 50%;
width: 40px;
height: 40px;
-moz-transition-duration: 1s;
-moz-transition-timing-function: linear;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-duration: 1s;
transition-timing-function: linear;
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.imgwidget3:hover {
border-radius: 50%;
width: 40px;
height: 40px;
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
#fond_pa h3 {
text-align : center;
margin : 0 auto;
font-size : 12px;
color : #660E0E;
text-shadow : 1px 1px 0 #4F030C;
text-transform : uppercase;
font-family : Georgia;
}
#fond_pa h3:hover {
text-align : center;
margin : 0 auto;
font-size : 12px;
color : #7A6B54;
text-shadow : 1px 1px 0 #4F030C;
font-family : Georgia;
}
#amis {
width : 213px;
height : 182px;
padding : 5px;
border: 2px solid #4F030C;
border-top: 2px dotted #4F030C;
overflow : auto;
text-align : justify;
font-family : Georgia;
font-size : 10px;
}
#predefs {
width : 213px;
height : 182px;
padding : 5px;
border: 2px solid #4F030C;
border-top: 2px dotted #4F030C;
text-align : center;
font-family : Georgia;
font-size : 10px;
}
#credits {
width : 696px;
height : 22px;
padding : 5px;
border: 2px solid #4F030C;
border-top: 2px dotted #4F030C;
text-align : justify;
font-family : Georgia;
font-size : 10px;
}
.info2 {
position: relative;
z-index: 24;
text-decoration: none;
font-family : Georgia;
font-size : 10px;
}
d.info2:hover {
z-index: 25;
}
d.info2 span {
display: none;
}
d.info2:hover span {
display: block;
position: absolute;
top: 0em;
left: -7em;
width: 150px;
background-color: #DEB960;
color: #660E0E;
text-align: center;
font-weight: none;
border: 2px solid #4F030C;
font-family : Georgia;
font-size : 10px;
}
#fond_pa h4 {
text-align : center;
margin : 0 auto;
font-size : 15px;
color : #660E0E;
text-shadow : 1px 1px 0 #4F030C;
text-transform : uppercase;
font-family : Georgia;
border: 2px solid #4F030C;
border-radius: 25%;
}
#fond_pa h4:hover {
text-align : center;
margin : 0 auto;
font-size : 15px;
color : #7A6B54;
text-shadow : 1px 1px 0 #4F030C;
font-family : Georgia;
border: 2px solid #7A6B54;
border-radius: 50%;
}
/*modifier l'apparence des scrollbars de tout le forum*/
::-webkit-scrollbar {
width: 5px; /*largeur de la scrollbar verticale*/
height: 5px; /*hauteur de la scrollbar horizontale*/
background-color: #D9C59B;}
::-webkit-scrollbar-track {
background-color: #4F030C; /*couleur du fond de la scrollbar*/}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
background-color: #D9C59B /*couleur de l'ascenseur*/;}
</style>
</head>
<body>
<br /><br />
<div id="fond_pa">
<h1>
Bienvenue sur NOM DE VOTRE FORUM
</h1>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<h2>
Contexte
</h2>
<div id="contexte">
<iframe frameborder="0" src="LIEN DE LA VIDÉO SI VOUS POSSÉDEZ UNE VIDÉO" allowfullscreen="" style="width: 210px; height: 153px;"> </iframe><br />
INSCRIVEZ ICI VOTRE CONTEXTE<br>
LE CADRE EST EN OVERFLOW, N'AYEZ PAS PEUR D’ÉCRIRE!
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<h2>
Liens Utiles
</h2>
<div id="liens">
<div align="center">
<a rel="nofollow" target="_blank" class="postlink" href="VOTRE LIEN">>>>>> Guide du débutant <<<<<</a>
</div><br /> <a rel="nofollow" target="_blank" class="postlink" href="VOTRE LIEN">¤</a> Règlement<br /><a href="VOTRE LIEN" class="postlink" target="_blank" rel="nofollow">¤ </a>Contexte <br /><a href="VOTRE LIEN" class="postlink" target="_blank" rel="nofollow">¤</a> Célébrités sur les Avatars<br /><a href="VOTRE LIEN" class="postlink" target="_blank" rel="nofollow">¤</a> Postes<br /><a href="VOTRE LIEN" class="postlink" target="_blank" rel="nofollow">¤</a> Autre 1<br /><a href="VOTRE LIEN" class="postlink" target="_blank" rel="nofollow">¤</a> Autre 2<br><a href="VOTRE LIEN" class="postlink" target="_blank" rel="nofollow">¤</a> Autre 3 <br /><br />
SI VOUS NE POSSÉDEZ PAS D'AUTRES FORUMS COMME DANS MON EXEMPLE, SUPPRIMEZ LE CODE JUSQU’À MON MAGNIFIQUE "FIN DE LA SUPPRESSION".
<div align="center">
<strong>Nos écoles</strong><br /><a rel="nofollow" target="_blank" class="postlink" href="http://beauxbatonsandmagiev.forumactif.org/forum"><img src="http://img4.hostingpics.net/pics/432051Blasontransparent50x50.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://durmstrangandmagiev5.forumactif.org/forum"><img alt="" border="0" src="http://img15.hostingpics.net/pics/763505durmstrang50.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://poudlardandmagiev5.forumactif.org/forum"><img alt="" border="0" src="http://nsa14.casimages.com/img/2010/03/11/100311082054133328.png" /></a>
</div>
FIN DE LA SUPPRESSION
</div>
</td>
</tr>
<tr>
<td>
<h2>
Les News (7 Jours)
</h2>
<div id="news">
<span style="color: rgb(122, 107, 84);">¤ DATE -</span> Nouveauté 4<br>
<span style="color: rgb(122, 107, 84);">¤ DATE -</span> Nouveauté 3<br>
<span style="color: rgb(122, 107, 84);">¤ DATE -</span> Nouveauté 2<br>
<span style="color: rgb(122, 107, 84);">¤ DATE -</span> Nouveauté 1<br>
</div>
</td>
</tr>
<tr>
<td>
<h2>
Les Top-Sites
</h2>
<div id="tops">
Votez toutes les 2h pour faire connaître le site et qu'on soit encore plus de fifous! <br />ICI VOS TOP-SITES<br>
<a href="LIEN DU SUJET" target="_blank">Signalez votre vote !</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<h2>
Les Fous Suprêmes
</h2>
<div id="staff">
<d class="info"><img class="imgwidget" src="IMAGE 1" /><span>
<h3>
Pseudo
</h3><br />Rang dans l'Administration<br />Rôle sur le forum<br />Présence<br /><br /><a href="LIEN DU PROFIL" class="postlink" target="_blank" rel="nofollow">Profil</a> // <a href="LIEN DU MP" class="postlink" target="_blank" rel="nofollow">MP</a><br />SI LA PERSONNE POSSÈDE D'AUTRES COMPTES </span></d> <d class="info"><img class="imgwidget" src="IMAGE 1" /><span>
<h3>
Pseudo
</h3><br />Rang dans l'Administration<br />Rôle sur le forum<br />Présence<br /><br /><a href="LIEN DU PROFIL" class="postlink" target="_blank" rel="nofollow">Profil</a> // <a href="LIEN DU MP" class="postlink" target="_blank" rel="nofollow">MP</a><br />SI LA PERSONNE POSSÈDE D'AUTRES COMPTES </span></d> <d class="info"><img class="imgwidget" src="IMAGE 1" /><span>
<h3>
Pseudo
</h3><br />Rang dans l'Administration<br />Rôle sur le forum<br />Présence<br /><br /><a href="LIEN DU PROFIL" class="postlink" target="_blank" rel="nofollow">Profil</a> // <a href="LIEN DU MP" class="postlink" target="_blank" rel="nofollow">MP</a><br />SI LA PERSONNE POSSÈDE D'AUTRES COMPTES </span></d> <br /> <d class="info"><img class="imgwidget" src="IMAGE 1" /><span>
<h3>
Pseudo
</h3><br />Rang dans l'Administration<br />Rôle sur le forum<br />Présence<br /><br /><a href="LIEN DU PROFIL" class="postlink" target="_blank" rel="nofollow">Profil</a> // <a href="LIEN DU MP" class="postlink" target="_blank" rel="nofollow">MP</a><br />SI LA PERSONNE POSSÈDE D'AUTRES COMPTES </span></d> <d class="info"><img class="imgwidget" src="IMAGE 1" /><span>
<h3>
Pseudo
</h3><br />Rang dans l'Administration<br />Rôle sur le forum<br />Présence<br /><br /><a href="LIEN DU PROFIL" class="postlink" target="_blank" rel="nofollow">Profil</a> // <a href="LIEN DU MP" class="postlink" target="_blank" rel="nofollow">MP</a><br />SI LA PERSONNE POSSÈDE D'AUTRES COMPTES </span></d> <d class="info"><img class="imgwidget" src="IMAGE 1" /><span>
<h3>
Pseudo
</h3><br />Rang dans l'Administration<br />Rôle sur le forum<br />Présence<br /><br /><a href="LIEN DU PROFIL" class="postlink" target="_blank" rel="nofollow">Profil</a> // <a href="LIEN DU MP" class="postlink" target="_blank" rel="nofollow">MP</a><br />SI LA PERSONNE POSSÈDE D'AUTRES COMPTES </span></d> <br><br>
SI VOUS POSSÉDEZ DES MEMBRES DANS VOTRE STAFF MOINS IMPORTANT VOUS POUVEZ LES METTRE MAIS LEUR IMAGE SERA PLUS PETITE
<d class="info"><img class="imgwidget3" src="IMAGE 1" /><span>
<h3>
Pseudo
</h3><br />Rang dans l'Administration<br />Rôle sur le forum<br />Présence<br /><br /><a href="LIEN DU PROFIL" class="postlink" target="_blank" rel="nofollow">Profil</a> // <a href="LIEN DU MP" class="postlink" target="_blank" rel="nofollow">MP</a><br />SI LA PERSONNE POSSÈDE D'AUTRES COMPTES </span></d>
<d class="info"><img class="imgwidget3" src="IMAGE 1" /><span>
<h3>
Pseudo
</h3><br />Rang dans l'Administration<br />Rôle sur le forum<br />Présence<br /><br /><a href="LIEN DU PROFIL" class="postlink" target="_blank" rel="nofollow">Profil</a> // <a href="LIEN DU MP" class="postlink" target="_blank" rel="nofollow">MP</a><br />SI LA PERSONNE POSSÈDE D'AUTRES COMPTES </span></d>
<d class="info"><img class="imgwidget3" src="IMAGE 1" /><span>
<h3>
Pseudo
</h3><br />Rang dans l'Administration<br />Rôle sur le forum<br />Présence<br /><br /><a href="LIEN DU PROFIL" class="postlink" target="_blank" rel="nofollow">Profil</a> // <a href="LIEN DU MP" class="postlink" target="_blank" rel="nofollow">MP</a><br />SI LA PERSONNE POSSÈDE D'AUTRES COMPTES </span></d>
<d class="info"><img class="imgwidget3" src="IMAGE 1" /><span>
<h3>
Pseudo
</h3><br />Rang dans l'Administration<br />Rôle sur le forum<br />Présence<br /><br /><a href="LIEN DU PROFIL" class="postlink" target="_blank" rel="nofollow">Profil</a> // <a href="LIEN DU MP" class="postlink" target="_blank" rel="nofollow">MP</a><br />SI LA PERSONNE POSSÈDE D'AUTRES COMPTES </span></d>
</div>
</td>
</tr>
<tr>
<td>
<h2>
Nos Best-Friends
</h2>
<div id="amis">
<a href="LIEN DU FORUM AMI" class="postlink" target="_blank" rel="nofollow"><img src="BOUTON DU FORUM AMI EN 88X31" border="0" alt="" /></a>
♥ <a href="LIEN DU FORUM AMI" class="postlink" target="_blank" rel="nofollow"><img src="BOUTON DU FORUM AMI EN 88X31" border="0" alt="" /></a><br /><a href="LIEN DU FORUM AMI" class="postlink" target="_blank" rel="nofollow"><img src="BOUTON DU FORUM AMI EN 88X31" border="0" alt="" /></a> ♥ <a href="LIEN DU FORUM AMI" class="postlink" target="_blank" rel="nofollow"><img src="BOUTON DU FORUM AMI EN 88X31" border="0" alt="" /></a><br /><a href="LIEN DU FORUM AMI" class="postlink" target="_blank" rel="nofollow"><img src="BOUTON DU FORUM AMI EN 88X31" border="0" alt="" /></a> ♥ <a href="LIEN DU FORUM AMI" class="postlink" target="_blank" rel="nofollow"><img src="BOUTON DU FORUM AMI EN 88X31" border="0" alt="" /></a><br /><a href="LIEN DU FORUM AMI" class="postlink" target="_blank" rel="nofollow"><img src="BOUTON DU FORUM AMI EN 88X31" border="0" alt="" /></a> ♥ <a href="LIEN DU FORUM AMI" class="postlink" target="_blank" rel="nofollow"><img src="BOUTON DU FORUM AMI EN 88X31" border="0" alt="" /></a><br /><a href="LIEN DU FORUM AMI" class="postlink" target="_blank" rel="nofollow"><img src="BOUTON DU FORUM AMI EN 88X31" border="0" alt="" /></a> ♥ <a href="LIEN DU FORUM AMI" class="postlink" target="_blank" rel="nofollow"><img src="BOUTON DU FORUM AMI EN 88X31" border="0" alt="" /></a>
</div>
</td>
</tr>
<tr>
<td>
<h2>
On les recherche
</h2>
<div id="predefs">
<d class="info2"><h4>The Best Scénario</h4><span><h3>
PSEUDO DU MEILLEUR SCÉNARIO
</h3>
<br><img src="IMAGE EN 150x100 DU MEILLEUR SCÉNARIO">
<br />Âge - Sang<br />Ecole - Maison<br />Lien avec <a rel="nofollow" target="_blank" class="postlink" href="LIEN DE LA PERSONNE">NOM DE LA PERSONNE</a><br /><a rel="nofollow" target="_blank" class="postlink" href="LIEN VERS LA PRÉSENTATION DU MEILLEUR SCÉNARIO">En savoir plus</a></span></d>
<br /> <d class="info"><img class="imgwidget2" src="IMAGE EN 100x100" /><span>
<h3>
PSEUDO
</h3><br />Âge - Sang<br>Ecole - Maison<br>Lien avec <a href="LIEN DE LA PERSONNE" class="postlink" target="_blank" rel="nofollow">NOM DE LA PERSONNE</a><br><a href="LIEN VERS LA PRÉSENTATION DU SCÉNARIO" class="postlink" target="_blank" rel="nofollow">En savoir plus</a></span></d> <d class="info"><img class="imgwidget2" src="IMAGE EN 100x100" /><span>
<h3>
PSEUDO
</h3><br />Âge - Sang<br>Ecole - Maison<br>Lien avec <a href="LIEN DE LA PERSONNE" class="postlink" target="_blank" rel="nofollow">NOM DE LA PERSONNE</a><br><a href="LIEN VERS LA PRÉSENTATION DU SCÉNARIO" class="postlink" target="_blank" rel="nofollow">En savoir plus</a></span></d> <d class="info"><img class="imgwidget2" src="IMAGE EN 100x100" /><span>
<h3>
PSEUDO
</h3><br />Âge - Sang<br>Ecole - Maison<br>Lien avec <a href="LIEN DE LA PERSONNE" class="postlink" target="_blank" rel="nofollow">NOM DE LA PERSONNE</a><br><a href="LIEN VERS LA PRÉSENTATION DU SCÉNARIO" class="postlink" target="_blank" rel="nofollow">En savoir plus</a></span></d><br><d class="info"><img class="imgwidget2" src="IMAGE EN 100x100" /><span>
<h3>
PSEUDO
</h3><br />Âge - Sang<br>Ecole - Maison<br>Lien avec <a href="LIEN DE LA PERSONNE" class="postlink" target="_blank" rel="nofollow">NOM DE LA PERSONNE</a><br><a href="LIEN VERS LA PRÉSENTATION DU SCÉNARIO" class="postlink" target="_blank" rel="nofollow">En savoir plus</a></span></d> <d class="info"><img class="imgwidget2" src="IMAGE EN 100x100" /><span>
<h3>
PSEUDO
</h3><br />Âge - Sang<br>Ecole - Maison<br>Lien avec <a href="LIEN DE LA PERSONNE" class="postlink" target="_blank" rel="nofollow">NOM DE LA PERSONNE</a><br><a href="LIEN VERS LA PRÉSENTATION DU SCÉNARIO" class="postlink" target="_blank" rel="nofollow">En savoir plus</a></span></d> <d class="info"><img class="imgwidget2" src="IMAGE EN 100x100" /><span>
<h3>
PSEUDO
</h3><br />Âge - Sang<br>Ecole - Maison<br>Lien avec <a href="LIEN DE LA PERSONNE" class="postlink" target="_blank" rel="nofollow">NOM DE LA PERSONNE</a><br><a href="LIEN VERS LA PRÉSENTATION DU SCÉNARIO" class="postlink" target="_blank" rel="nofollow">En savoir plus</a></span></d><br><a href="LIEN VERS VOTRE LISTING DE SCÉNARIO" class="postlink" target="_blank" rel="nofollow">Découvrir plus de prédéfinis</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="margin:auto;text-align:center;width:100%">
<h2>
Météo
</h2>
<div id="credits">
INSCRIVEZ ICI LA MÉTÉO QU'IL Y A CHEZ VOUS, AINSI QUE LA DATE SI VOUS AVEZ UN AVANCEMENT RPG.
</div>
<h2>
Crédits
</h2>
<div id="credits">
Codage de la PA par <a href="http://mondeandmagiev5.forumactif.org/forum" class="postlink" target="_blank" rel="nofollow">Loukoum</a> sur <a href="http://www.never-utopia.com/" class="postlink" target="_blank" rel="nofollow">Never-Utopia</a>.
</div>
</div>
</div>
</body>
</html>
Code à mettre dans "Panneau d'Administration > Affichage > Généralité"
- Code:
<iframe src="LIEN DE VOTRE PAGE HTLM" frameborder="0" scrolling="no" style="width: 900px; height: 940px;"></iframe>