Bonjour à tous,
Rendez-vous sur votre panneau d'administration > modules > Gestion des pages HTML > Création en mode avancé. Donnez un titre a celle-ci : Pa-hivernale, par exemple, et collez-y le code ci-dessous :
Enregistrez. Ensuite, copiez quelque part l'adresse internet de cette page fraichement crée car nous en aurons besoin dans quelques instants.
Rendez-vous à l'emplacement de votre page d'accueil (PA>Affichage>Page d'accueil>Généralités) et collez-y ce code pour introduire une iframe...
Et donc, remplacez "HTTP://ADRESSE-DE-LA-PAGE-HTML-RECEMMENT-CREE" par l'adresse de la page html que vous avez créée, dont je vous ai dis de garder l'URL quelque part...
Voici un LS de PA style Attack on Titan hivernale.
Elle vous est proposée suite à la demande de Mikasa.
Elle vous est proposée suite à la demande de Mikasa.
Aperçus : normale - survol du staff - en ligne
Cette PA contient :
- Un espace groupes pour 5 groupes
- Un espace Staff + pseudo qui s'affiche au survol
- Un espace News qui défilent + arrêt au survol.
- Un espace Recrutement qui défilent + arrêt au survol.
- Un espace Contexte.
L'installation
Création de la page html
Rendez-vous sur votre panneau d'administration > modules > Gestion des pages HTML > Création en mode avancé. Donnez un titre a celle-ci : Pa-hivernale, par exemple, et collez-y le code ci-dessous :
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Pa - Mikasa</title>
<link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>
<style>
/* ici tous les textes avec la typo spéciale sont visés */
#liens-nav a, #blocs td h2, ul#staffs li span {
font-family: 'Rye', cursive;
}
/* pour ne pas devoir chercher tous les blocs qui ont la font */
#pa {
width: 800px; height: 400px;
margin: 0 auto;
background: url("http://i59.servimg.com/u/f59/18/77/81/63/pa_mod12.png") no-repeat;
background-position: -2px; /*Ajustement du fond pour positionnement des blasons*/
font-family: sans-serif;
font-size: 12px;
letter-spacing: .5px;
position: relative;
}
#pa a {
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
}
#liens-nav {
text-align: center;
}
@-webkit-keyframes jingle {
0% {-webkit-transform: rotate(-3deg);}
33% {-webkit-transform: rotate(-0deg);}
66% {-webkit-transform: rotate(3deg);}
100% {-webkit-transform: rotate(0deg);}
}
@-moz-keyframes jingle {
0% {-moz-transform: rotate(-3deg);}
33% {-moz-transform: rotate(-0deg);}
66% {-moz-transform: rotate(3deg);}
100% {-moz-transform: rotate(0deg);}
}
@-ms-keyframes jingle {
0% {-ms-transform: rotate(-3deg);}
33% {-ms-transform: rotate(-0deg);}
66% {-ms-transform: rotate(3deg);}
100% {-ms-transform: rotate(0deg);}
}
@keyframes jingle {
0% {transform: rotate(-3deg);}
33% {transform: rotate(-0deg);}
66% {transform: rotate(3deg);}
100% {transform: rotate(0deg);}
}
#liens-nav a {
font-size: 15px;
color: #416139;
text-decoration: none;
display: block;
padding-top: 70px; /* permet de faire croire que les blasons sont des liens */
font-weight: normal;
}
#liens-nav a:hover {
color: #811420;
-webkit-animation: jingle .35s linear infinite;
-moz-animation: jingle .35s linear infinite;
-ms-animation: jingle .35s linear infinite;
animation: jingle .35s linear infinite; }
#blocs {
position: relative;
bottom: -10px;
}
#blocs td {
vertical-align: top;
position: relative;
padding: 5px;
}
#blocs td h2 {
position: absolute;
top: -15px; right: 0;
margin: 0; padding: 0;
font-size: 18px;
font-weight: normal;
display: block;
width: 100%;
color: #7e161e;
}
#blocs td.news, #blocs td.need {
width: 150px; max-width: 150px;
height: 80px; max-height: 80px;
}
#blocs td.contexte {
width: 180px; max-width: 180px;
}
#blocs td.contexte, #blocs td.news, #blocs td.need {
background: #f2f2f2;
border-radius: 5px 0px 5px 5px;
border-bottom: 1px solid lightgray;
border-left: 1px solid lightgray;
}
#content-contexte {
height: 200px;
overflow-y: scroll;
padding-right: 10px;
}
h2.center {
max-width: 220px;
text-align: center;
bottom: 0px !important;
top: auto !important;
left: 0;
}
h2.right {
text-align: right;
padding-right: 5px !important;
}
.news a, .need a {
color: #000;
text-decoration: none;
}
.news a:hover, .need a:hover {
color: #7e161e;
}
.news p, .need p {
padding: 5px 0;
margin: 0;
border-bottom: 1px solid #416139;
}
.news p strong, .need p strong{
display: block;
}
ul#staffs {
position: absolute;
bottom: -16px;
left: -8px;
width: 225px;
height: 105px;
list-style-type: none;
padding:0; margin: 0;
text-align: center;
overflow-y: auto;
}
ul#staffs li {
width: 90px; height: 90px;
overflow: hidden;
background: orange;
padding:0; margin: 0px 5px 5px;
display: inline-block;
}
ul#staffs li span {
position: absolute;
top: -25px;
display: inline-block;
width: 90px;
padding: 5px 0px;
background: rgba(255,255,255,.7);
color: #7e161e;
-webkit-transition: top .2s ease-in-out;
-moz-transition: top .2s ease-in-out;
-ms-transition: top .2s ease-in-out;
transition: top .2s ease-in-out;
}
ul#staffs li:hover span {
position: absolute;
top: 0px;
display: inline-block;
width: 90px; height: 14px;
overflow: hidden;
padding: 5px 0px;
background: rgba(255,255,255,.7);
color: #7e161e;
}
#credits {
position: absolute;
bottom: -20px; right: 0;
text-align: right;
font-family: sans-serif;
font-size: 12px;
padding: 3px 0;
color: #99c6dd;
}
#credits a {
padding-left: 20px;
background: url("http://img4.hostingpics.net/pics/171045Ship.png") no-repeat left;
background-size: 14px 14px;
color: #7699ab !important;
text-decoration: none !important;
border: 0px !important;
}
#credits a:hover {
color: #536b78 !important;
background-position: 3px
}
</style>
</head>
<body>
<div id="pa">
<table align="center" width="710px" id="liens-nav">
<tr>
<td width="20%"><a href="1">Wall People</a></td>
<td width="20%"><a href="1">Garnison</a></td>
<td width="20%"><a href="1">Military Police</a></td>
<td width="20%"><a href="1">Survey Corps</a></td>
<td width="20%"><a href="1">Trainees squad</a></td>
</tr>
</table>
<table align="center" width="740px" height="247px" id="blocs" cellspacing="20px">
<tr>
<td>
<!-- Laisser vide = espace au dessus de staff -->
<h2 class="center">STAFF</h2>
<!-- Juste le titre va dans cette case, le contenu c'est plus loin ! -->
</td>
<td class="news">
<h2 class="right">News</h2>
<marquee behavior="scroll" direction="up" scrollamount="1" width="150px" height="80px" onmouseover="this.stop();" onmouseout="this.start();">
<!-- Pour rajouter des news, juste copier/coller une ligne ci-dessous -->
<p><a href=""><strong>Le titre</strong> l'info de la news?</a></p>
<p><a href=""><strong>Le titre :</strong> l'info de la news?</a></p>
</marquee>
</td>
<td class="contexte" rowspan="2">
<h2 class="right">Contexte</h2>
<div id="content-contexte">
<!-- Collez ici votre contexte : -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, atque, nulla, consequatur impedit sapiente nostrum nisi blanditiis illum et tempora molestias odio natus qui esse explicabo assumenda voluptatum sit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, rerum, ipsam dicta laborum dignissimos inventore sunt odit laudantium beatae reprehenderit itaque autem necessitatibus delectus iure magni soluta incidunt quidem consectetur?</p>
</div>
</td>
</tr>
<tr>
<td>
<!-- CONTENU DE LA CASE STAFF => ICI : -->
<ul id="staffs">
<li>
<span class="name">Henrykiki</span>
<img src="http://i59.servimg.com/u/f59/18/77/81/63/mikasa11.png" alt="STAFF"></li>
<li>
<span class="name">Name</span>
<img src="http://i59.servimg.com/u/f59/18/77/81/63/mikasa11.png" alt="STAFF">
</li>
<!-- <li>STAFF 3</li>
<li>STAFF 4</li> -->
</ul>
</td>
<td class="need">
<h2 class="right">We need</h2>
<marquee behavior="scroll" direction="up" scrollamount="1" width="150px" height="80px" onmouseover="this.stop();" onmouseout="this.start();">
<!-- Pour rajouter un poste, juste copier/coller une ligne ci-dessous -->
<p><a href=""><strong>Le poste :</strong> description ?</a></p>
<p><a href=""><strong>Le poste :</strong> description ?</a></p>
</marquee>
</td>
<!-- <td></td> -->
</tr>
</table>
<div id="credits">
PA réalisée sur <a href="http://www.never-utopia.com/t52279-henrikiyi-pa-style-attack-on-titan-fond-image-hivernale" target="_blank">Never-Utopia</a>.
</div>
</div>
</body>
</html>
Enregistrez. Ensuite, copiez quelque part l'adresse internet de cette page fraichement crée car nous en aurons besoin dans quelques instants.
Installation de la page d'accueil
Rendez-vous à l'emplacement de votre page d'accueil (PA>Affichage>Page d'accueil>Généralités) et collez-y ce code pour introduire une iframe...
- Code:
<iframe src="HTTP://ADRESSE-DE-LA-PAGE-HTML-RECEMMENT-CREE" frameborder="0" scrolling="no" style="width: 800px; height: 400px;"></iframe>
Et donc, remplacez "HTTP://ADRESSE-DE-LA-PAGE-HTML-RECEMMENT-CREE" par l'adresse de la page html que vous avez créée, dont je vous ai dis de garder l'URL quelque part...
Les images correspondant aux groupes sont intégrées dans le fond de la PA, et donc, dans l'image utilisée pour le background de #pa ! (voir l'image de fond)
Merci de conserver les crédits envers Never-Utopia
Merci de conserver les crédits envers Never-Utopia
Une question ? Un souci avec le code ?
Rendez-vous dans la zone appropriée : c'est par ici !
Dernière édition par Henrykiki le Jeu 15 Jan 2015 - 13:21, édité 1 fois
