Ah au fait je rajoute juste bon courage pour ton déménagement
et pas de souci pour le temps de réponse ^^ Contente que la PA te plaise
Alors voici le code et les explications pour l'installation :
Va sur
le Panneau d'Administration => Onglet Modules => Menu HTML & Javascript (tout en bas de la liste) => Gestion des Pages HTMLSur la page, tu cliques sur :
Création en mode avancé (HTML)Tu arriveras sur un panneau d'édition. Donne un titre descriptif (par exemple PA) et ne touche pas aux boutons. Enlève le
- Code:
<br />
dans le cadre et copie-colle l'intégralité de ce code :
- Code:
<!DOCTYPE html>
<!-- PA pour Ciaran réalisée par Elenthil -->
<html lang="fr">
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
<style type='text/css'>
body{
margin: 0;
}
/**** Fond *****/
.corps_pa{
width: 898px;
background: rgba(242, 237, 225, 1) url("http://i86.servimg.com/u/f86/19/45/46/99/motif10.png") repeat fixed left;
height: 592px;
border: 1px #A39984 solid;
}
/****** Mise en forme des textes *******/
.corps_pa h1{
text-align: center;
font-family: 'Fauna One', serif;
border-top: 1px #A39984 solid;
border-bottom: 1px #A39984 solid;
color: #665D4A;
font-size: 31px;
}
.corps_pa p, .corps_pa p a{
text-align: left;
font-size: 12px;
margin-top: 3px;
line-height: 15px;
margin: 5px;
font-family: Helvetica;
color: #665D4A;
}
.corps_pa p a{
font-weight: bold;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
}
.corps_pa p a:hover{
text-shadow: 1px 1px 2px black;
font-style: italic;
}
.corps_pa .texte_credit{
font-size: 9px;
text-align: center;
line-height: normal;
font-family: Helvetica;
color: #665D4A;
}
/******* Navigation des liens utiles *******/
.liens_utiles{
width: 900px;
height: 30px;
margin-bottom: 22px;
border-top: 1px #A39984 solid;
border-bottom: 1px #A39984 solid;
}
.liens_utiles ul{
text-align: center;
padding: 0px;
margin-top: 5px;
}
.liens_utiles li{
display: inline-block;
margin: auto auto auto 13px;
}
.liens_utiles li a{
color: #665D4A;
font-family: Helvetica;
text-decoration: none;
text-transform: uppercase;
font-size: 13px;
}
.liens_utiles li a:hover {
font-style: italic;
text-shadow: 1px 1px 2px black;
}
/******* Mise en forme Blocs Contexte - Scenars *****/
.bloc_gauche{
width: 500px;
height: 330px;
display: inline-block;
vertical-align: top;
}
.bloc_contexte{
width: 443px;
height: 160px;
background-color: #f7f4ec;
display: inline-block;
border: 1px #A39984 solid;
margin: 0px 10px 5px 29px;
overflow: hidden;
}
.bloc_scenar{
width: 443px;
height: 160px;
background-color: #f7f4ec;
display: inline-block;
border: 1px #A39984 solid;
margin: 0px 10px 5px 29px;
}
.img_scenar{
width: 358px;
height: 160px;
margin: auto;
}
.image{
display: inline-block;
width: 85px;
height: 150px;
margin-top: 5px;
background-color: blue;
position: relative;
overflow: visible;
}
/****** Mise en forme des infobulles Scenars *****/
.image .infobulle_scenar{
position: absolute;
top: 106px;
width: 85px;
height: 37px;
background-color: rgba(228, 223, 213, 0.74);
opacity: 0;
visibility: hidden;
transition: all ease 1s;
}
.image .infobulle_scenar p{
text-align: center;
}
/******** Mise en forme des Blocs Staff - Partenaires - Tops Sites *******/
.bloc_droit{
width: 392px;
height: 330px;
display: inline-block;
}
.bloc_staff{
width: 332px;
height: 160px;
background-color: #f7f4ec;
display: inline-block;
border: 1px #A39984 solid;
margin: 0px 10px 5px 26px;
}
.fond_staff{
width: 323px;
height: 160px;
margin: auto;
}
.rond_staff{
display: inline-block;
width: 90px;
height: 90px;
margin-top: 32px;
margin-left: 10px;
border-radius: 50px;
border: 1px solid #A39984;
position: relative;
overflow: visible;
}
.corps_pa .rond_staff img{
display: inline-block;
width: 90px;
height: 90px;
border-radius: 50px;
border: 1px solid #A39984;
position: relative;
overflow: visible;
margin-left: -1px;
margin-top: -1px;
}
/******** Mise en forme des infobulles Staff ******/
.rond_staff .infobulle{
position: absolute;
top: 80px;
left: 20px;
width: 110px;
background-color: #F2EDE1;
border: 1px #A39984 solid;
opacity: 0;
visibility: hidden;
transition: all ease 1s;
}
.rond_staff:hover .infobulle, .image:hover .infobulle_scenar{
opacity: 1;
visibility: visible;
z-index: 999;
transition: all ease 1s;
}
.rond_staff .infobulle p{
text-align: center;
}
/***** Mise en place des blocs partenaires - tops sites *******/
.bloc_partenaires{
width: 332px;
height: 21px;
background-color: #f7f4ec;
display: inline-block;
margin: 0px 10px 5px 27px;
}
.liste_deroulante{
width: 332px;
background-color: #f7f4ec;
font-family: Helvetica;
color: #665D4A;
border: 1px #A39984 solid;
text-align: center;
}
.bloc_top{
width: 332px;
height: 134px;
background-color: #f7f4ec;
display: inline-block;
border: 1px #A39984 solid;
margin: 0px 10px 5px 26px;
}
.bouton_top{
display: inline-block;
width: 85px;
height: 40px;
background-color: #665D4A;
overflow: hidden;
margin-left: 5px;
}
.conteneur_top_1{
width: 180px;
height: 50px;
margin: auto;
position: relative;
top: 24px;
}
.conteneur_top_2{
width: 90px;
height: 50px;
margin: auto;
position: relative;
top: 29px;
}
/****** Mise en place des Blocs Membre du mois - Gif - Couple du Mois *****/
.bloc_footer{
width: 900px;
height: 85px;
margin-top: 17px;
}
.bloc_membreup{
width: 100px;
height: 80px;
background-color: #f7f4ec;
display: inline-block;
border: 1px #A39984 solid;
margin: 0px 0px 5px 29px;
vertical-align: top;
overflow: hidden;
}
.titre_membreup{
width: 133px;
height: 80px;
display: inline-block;
text-align: center;
font-size: 19px;
margin-top: 5px;
position: relative;
left: 20px;
}
.corps_pa .titre_membre{
font-family: 'Fauna One', serif;
text-align: center;
font-size: 19px;
line-height: 23px;
}
.nomdumembre{
font-size: 12px;
font-weight: bold;
font-family: Helvetica;
position: relative;
top: 4px;
}
.bloc_gif{
width: 240px;
height: 80px;
background-color: #f7f4ec;
display: inline-block;
border: 1px #A39984 solid;
margin: 0px 56px 0px 54px;
vertical-align: top;
overflow: hidden;
}
.titre_coupleup{
width: 130px;
height: 80px;
display: inline-block;
position: relative;
right: 30px;
}
.bloc_coupleup{
width: 100px;
height: 80px;
background-color: #f7f4ec;
display: inline-block;
border: 1px #A39984 solid;
vertical-align: top;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Début de la PA -->
<div class="corps_pa">
<h1>Nom du Forum</h1>
<!-- Liens de Navigation / Remplacer # par le lien de la page à cibler -->
<div class="liens_utiles">
<ul>
<li><a href="#" target="_blank">Règlement</a></li>
<li><a href="#" target="_blank">Contexte</a></li>
<li><a href="#" target="_blank">Bottin</a></li>
<li><a href="#" target="_blank">Scénarios</a></li>
<li><a href="#" target="_blank">Annexes</a></li>
<li><a href="#" target="_blank">Partenariats</a></li>
<li><a href="#" target="_blank">Les Familles</a></li>
</ul>
</div>
<div class="bloc_gauche">
<!-- Bloc Ecriture Contexte / Remplacer # par le lien amenant au contexte -->
<div class="bloc_contexte">
<p>Constituendi autem sunt qui sint in amicitia fines et quasi termini diligendi. De quibus tres video sententias ferri,
quarum nullam probo, unam, ut eodem modo erga amicum adfecti simus, quo erga nosmet ipsos, alteram, ut nostra in amicos
benevolentia illorum erga nos benevolentiae pariter aequaliterque respondeat, tertiam, ut, quanti quisque se ipse facit,
tanti fiat ab amicis.<br />
Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris,
non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia
omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro. <a href="#" target="_blank">[Suite]</a>
</p>
</div>
<!-- Bloc des Scenarios / Dimensions des images : 85px x 150px / Insérer lien du scénar à la place de # -->
<div class="bloc_scenar">
<div class="img_scenar">
<div class="image"><a href="#" target="_blank"><img src="http://i86.servimg.com/u/f86/19/45/46/99/img_sc10.jpg" alt="img scenar" /></a><div class="infobulle_scenar"><p>Prénom <br />Nom</p></div></div>
<div class="image"><a href="#" target="_blank"><img src="http://i86.servimg.com/u/f86/19/45/46/99/img_sc10.jpg" alt="img scenar" /></a><div class="infobulle_scenar"><p>Prénom <br />Nom</p></div></div>
<div class="image"><a href="#" target="_blank"><img src="http://i86.servimg.com/u/f86/19/45/46/99/img_sc10.jpg" alt="img scenar" /></a><div class="infobulle_scenar"><p>Prénom <br />Nom</p></div></div>
<div class="image"><a href="#" target="_blank"><img src="http://i86.servimg.com/u/f86/19/45/46/99/img_sc10.jpg" alt="img scenar" /></a><div class="infobulle_scenar"><p>Prénom <br />Nom</p></div></div>
</div>
</div>
</div>
<div class="bloc_droit">
<!-- Bloc des icônes du Staff / Dimensions des images : 90px x 90px -->
<div class="bloc_staff">
<div class="fond_staff">
<div class="rond_staff" style="background-image: url(http://i86.servimg.com/u/f86/19/45/46/99/staff_10.jpg);"> <!-- Insérez image staff ici à la place de l'url -->
<div class="infobulle">
<p>Pseudo <br />
<a href="#" target="_blank">MP</a><br /> <!-- Insérez lien MP à la place de # -->
~ Présent(e) ~<br />
</p>
</div>
</div>
<div class="rond_staff" style="background-image: url(http://i86.servimg.com/u/f86/19/45/46/99/staff_10.jpg);"> <!-- Insérez image staff ici à la place de l'url -->
<div class="infobulle">
<p>Pseudo <br />
<a href="#" target="_blank">MP</a><br /> <!-- Insérez lien MP à la place de # -->
~ Absent(e) ~ <br />
</p>
</div>
</div>
<div class="rond_staff" style="background-image: url(http://i86.servimg.com/u/f86/19/45/46/99/staff_10.jpg);"><!-- Insérez image staff ici à la place de l'url -->
<div class="infobulle">
<p>Pseudo <br />
<a href="#" target="_blank">MP</a><br /> <!-- Insérez lien MP à la place de # -->
~ Ralenti(e) ~ <br />
</p>
</div>
</div>
</div>
</div>
<!-- Bloc Partenaires -->
<div class="bloc_partenaires">
<select onchange="location = this.options [this.selectedIndex].value" class="liste_deroulante">
<option selected="selected">Partenaires</option>
<option value="http://google.fr">Partenaire 1</option> <!-- Insérez lien du forum à la place du lien google -->
<option value="http://google.fr">Partenaire 2</option>
<option value="http://google.fr">Partenaire 3</option>
<option value="http://google.fr">Partenaire 4</option>
<option value="http://google.fr">Partenaire 5</option>
</select>
</div>
<!-- Bloc Top-Site / Dimensions : 85px x 40px / Mettre lien du top site à la place du # -->
<div class="bloc_top">
<div class="conteneur_top_1"><a href="#" target="_blank"><div class="bouton_top"><img src="http://i86.servimg.com/u/f86/19/45/46/99/bouton11.jpg" alt="img topsite" /></div></a><a href="#" target="_blank"><div class="bouton_top"><img src="http://i86.servimg.com/u/f86/19/45/46/99/bouton11.jpg" alt="img topsite" /></div></a></div>
<div class="conteneur_top_2"><a href="#" target="_blank"><div class="bouton_top"><img src="http://i86.servimg.com/u/f86/19/45/46/99/bouton11.jpg" alt="img topsite" /></div></a></div>
</div>
</div>
<div class="bloc_footer">
<!-- Bloc Membre du mois / Dimensions de l'image : 130px x 80px / Insérez lien du membre à la place de # -->
<div class="bloc_membreup">
<a href="#" target="_blank"><img src="http://i86.servimg.com/u/f86/19/45/46/99/membre10.jpg" alt="img membre du mois"/></a>
</div>
<div class="titre_membreup">
<p class="titre_membre">Membre <br />
du Mois<br />
<span class="nomdumembre">Prénom Nom</span></p> <!-- Insérez nom et prénom du membre ici -->
</div>
<!-- Bloc GIF / Dimensions de l'image : 240px x 80px -->
<div class="bloc_gif">
<img src="http://i86.servimg.com/u/f86/19/45/46/99/fontai10.gif" alt="img gif"/>
</div>
<!-- Bloc Couple du mois / Dimensions de l'image : 130px x 80px / Insérez lien du membre à la place de # -->
<div class="titre_coupleup">
<p class="titre_membre">Couple <br />
du Mois<br />
<span class="nomdumembre">Prénom x Prénom</span></p> <!-- Insérez Prénoms des membres ici pour couple-->
</div>
<div class="bloc_coupleup">
<a href="#" target="_blank"><img src="http://i86.servimg.com/u/f86/19/45/46/99/couple10.jpg" alt="img scenar" /></a>
</div>
</div>
<p class="texte_credit"> PA codée par Elenthil ★ Never-Utopia</p>
</div>
</body>
</html>
Une fois que c'est fait, tu cliques sur "Valider".
Va ensuite dans
l'onglet Affichage => Menu Page d'accueil => GénéralitésDans le bloc du contenu, copie/colle uniquement ce bout de code :
- Code:
<iframe style="width: 900px; height: 594px;" src="LIEN DE L'URL" scrolling="no" frameborder="0"></iframe>
Tu trouveras le lien de l'url de ta PA dans le menu précédent (donc modules => HTML & Javascript => Gestion des pages HTML)
Valide et c'est tout bon ta PA est installée
N'hésite pas à me dire si tu as un souci pour l'installation, je reformulerais ou bien je te guiderais plus en détail
Je suis contente qu'elle te plaise 
