Hey ! Voici une petite fiche de pub sympathique aux couleurs estivales. Il y'a des animations sur la partie staff, qui dévoile le nom du staff. La voici: (vous n'aurez pas les images dans le code, à vous de les mettre, mais je vous expliquerais où)
Ce livre nécessite une page html, une page qui sera hébergée sur un forum donc. Mais ne vous en faites pas, ce n'est vraiment pas sorcier
Le code de la page html et ses explications
Donc dans modules -> gestion des pages html -> créer en mode avancé, vous mettez ceci :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Fiche de pub pour refresh</title>
<base target="_blank" />
<style type="text/css">
.page{
width: 550px;
height: 900px;
background: lightblue;
background-image: url('LIEN');
background-repeat: no-repeat;
}
a {
text-decoration:none;
color: white !important;
}
.titre {
color : #fb6920;
font-size: 24px;
font-weight: ;
letter-spacing: px;
font-family: 'Indie Flower';
float: right;
position: relative;
margin-right: 20px;
margin-top: 257px;
text-shadow: 2px 2px 0px white, -1px -1px 0px white;
}
.contexte{
width: 350px;
height: 310px;
background: white;
position: absolute;
top: 300px;
overflow: auto;
margin-left: 25px;
font-size: 15px;
padding: 7px;
text-align:justify;
color: chocolate;
}
.contexte:first-letter {
font-size:290%;
float:left;
background: #fb6920;
color: white;
padding-left: 6px;
padding-right: 5px;
margin-right: 3px;
}
.staff1{
width: 100px;
height: 100px;
background: white;
position: absolute;
top: 300px;
left: 420px;
background: white;
color: chocolate;
}
.imagestaff1 {
height: 100%;
width: 100%;
position:absolute;
top:0;
left:0;
background-image: url('LIEN');
background-size: contain;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.staff1:hover > .imagestaff1 {
filter:alpha(opacity=0);
opacity:0;
visibility:hidden;
}
.staff2 {
width: 100px;
height: 100px;
background: white;
position: absolute;
top: 410px;
left: 420px;
background: white;
color: chocolate;
}
.imagestaff2 {
height: 100%;
width: 100%;
position:absolute;
top:0;
left:0;
background-image: url('LIEN');
background-size: contain;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.staff2:hover > .imagestaff2 {
opacity:0;
filter:alpha(opacity=0);
visibility:hidden;
}
.staff3{
width: 100px;
height: 100px;
background: white;
position: absolute;
top: 520px;
left: 420px;
background: white;
color: chocolate;
}
.imagestaff3 {
height: 100%;
width: 100%;
position:absolute;
top:0;
left:0;
background-image: url('LIEN');
background-size: contain;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.staff3:hover > .imagestaff3 {
opacity:0;
filter:alpha(opacity=0);
visibility:hidden;
}
.blocliens{
width: 550px;
height: 36px;
position: absolute;
top: 650px;
vertical-align: middle;
}
.lien1{
width: 109px;
height: 35px;
background: #fb6920;
color: white !important;
display: inline-block ;
position: relative;
top: 0px;
float:left;
text-align:center;
line-height:30px;
}
.lien1:hover{
width: 109px;
height: 35px;
background: #b92b2a;
color: white;
display: inline-block ;
position: relative;
top: 0px;
float:left;
text-align:center;
line-height:30px;
}
.lien2{
width: 111px;
height: 35px;
background: gold;
color: white;
display: inline-block ;
position: relative;
top: 0px;
float: left;
text-align:center;
line-height:30px;
}
.lien2:hover{
width: 111px;
height: 35px;
background: #b92b2a;
color: white;
display: inline-block ;
position: relative;
top: 0px;
float: left;
text-align:center;
line-height:30px;
}
.blocinfo{
width: 400px;
background: white;
position: absolute;
top: 710px;
overflow: auto;
margin-left: 50px;
font-size: 15px;
padding: 15px;
text-align:justify;
color: chocolate;
border-radius: 20px;
}
.boutonphrase {
color : #fb6920;
font-size: 20px;
font-family: 'Indie Flower';
text-shadow: 2px 2px 0px white, -1px -1px 0px white;
width: 190px;
margin: auto;
}
.bouton {
width: 100px;
margin: auto;
margin-top: -17px;
}
.crédit {
font-size: 10px;
position: absolute;
top: 875px;
margin-left: 200Px;
color: grey;
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower" >
</head>
<body>
<div class="page">
<div class="titre">
Si tu devais partir en voyage, où irais-tu?
</div>
<div class="contexte">
LE CONTEXTE BLABLABLA, ces balises -> <br /> <br /> Correspondent à un saut de ligne si vous souhaitez les utiliser. A la suite un petit lien vers le contexte en entier, vous pouvez le retirer: <a target="_blank" href="LIENde_la_suite_de_votre_contexte"><span style="color: rgb(185, 43, 42);">La suite...</span></a>
</div>
<div class="staff1">
<div style="height: 100px; display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
NOM STAFF
</div>
<div class="imagestaff1">
</div>
</div>
<div class="staff2">
<div style="height: 100px; display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
NOM STAFF
</div>
<div class="imagestaff2">
</div>
</div>
<div class="staff3">
<div style="height: 100px; display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
NOM STAFF
</div>
<div class="imagestaff3">
</div>
</div>
<div class="blocliens">
<div class="lien1">
<a href="LIEN" target="_blank"> Règlement </a>
</div>
<div class="lien2">
<a href="LIEN" target="_blank"> Base de données </a>
</div>
<div class="lien1">
<a href="LIEN" target="_blank"> Fruits du démon </a>
</div>
<div class="lien2">
<a href="LIEN" target="_blank"> Questions </a>
</div>
<div class="lien1">
<a href="LIEN" target="_blank"> Staff </a>
</div>
</div>
<div class="blocinfo">
Date d'ouverture: <br /> Membres enregistrés: <br />Nombre de messages postés : <br /> <br />
<div class="boutonphrase">
Venez nous rejoindre !
</div><br />
<div class="bouton">
<a title="OnePieceRefresh" href="LIEN_Forum"><img src="Image_bouton_partenariat" alt="logo partenaire" /></a>
</div>
</div>
<div class="crédit">
@Youp sur <a target="_blank" href="http://www.never-utopia.com/"> <span style="color: rgb(185, 43, 42);">Never Utopia</span> </a>
</div>
</div>
</body>
</html>
Ensuite, à chaque fois que vous voulez modifier votre code, vous devrez utiliser le mode avancé, soit l'engrenage sur lequel il est écrit "html". Sinon, cela va cause des bugs.
- Code:
.page{
width: 550px;
height: 900px;
background: lightblue;
background-image: url('LIEN');
background-repeat: no-repeat;
}
Ce lien correspond à l'image en haut de la fiche, l'image ici fait 550 de largeur (width) et 275 de hauteur (height). Si vous désirez changer les proportions, il vous faudra changer certains placements comme celui du titre par exemple (modifier simplement la valeur top ).Modifier aussi le lien des images de imagestaff1, 2 et 3 ainsi que le nom qui s'affiche en dessous (j'ai noté NOM STAFF). Les images font 100x100px.
- Code:
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower" />
N'oubliez pas de modifier aussi tout les LIEN (donc pour la navigation rapide, ex règlement, staff etc..., sur le bouton de partenariat aussi), et l'image du bouton de partenariat.
Utiliser dans un message: mettre une iframe :
Hop hop, maintenant pour l'utiliser, il suffit d'utiliser une iframe sous cette forme:
- Code:
<iframe src="Le_lien_de_ta_page_html" frameborder="0" scrolling="no" style="margin:auto; width: 550px; height: 900px;"></iframe>
Voili voilou, j'espère que le rendu vous plaît et si vous avez un problème avec la modification du code, n'hésitez pas à passer dans "personnalisations" ou "problème avec mon code". N'enlevez pas le crédit bien sûr (surtout celui qui amène vers N-U, mais sur ce point je vous fait confiance ^^
Dernière édition par Youp le Lun 7 Mar 2016 - 18:22, édité 1 fois
