Bonjour à vous tous !
Aujourd'hui je suis là pour vous proposer une petite PA toute gentille.
Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.
- Rendu en image:
Optimisé pour tous les navigateurs - Toutes versions
Pour installer votre Page d'Accueil, il vous faudra aller créer une page HTML. Faites Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS et copiez le code qui va suivre dans votre feuille de style
- Code:
/* Commande de Page d'accueil par Cheshire Cat */
.inline{
display:inline-block;
vertical-align:top;
}
.PA{
background-color:#f1ead6;
width:800px;
margin:20px auto;
padding:10px 20px 20px 20px;
box-sizing:border-box;
box-shadow:1px 1px 3px #b1a9a9;
border-radius:30px;
font-family:calibri;
font-size:13px;
color:#674b4b;
}
.PA a{
color:#de8585;
transition:all 400ms;
}
.PA a:hover{
color:#8a4c4c;
}
.PA h1{
margin:0 -20px 10px;
padding-bottom:10px;
text-align:center;
font-weight:normal;
font-size:40px;
border-bottom:2px solid #b79f9f;
font-family:'Montez';
}
.PA h2{
margin:0 20px 10px;
text-align:center;
font-weight:normal;
font-size:30px;
border-bottom:2px solid #b79f9f;
font-family:'Montez';
}
.PA-Gauche{
width:250px;
}
.contexte{
height:240px;
margin-bottom:20px;
padding:10px;
background-color:#f9f7f7;
box-shadow:1px 1px 3px #b1a9a9;
border-radius:20px;
overflow:auto;
text-align:justify;
line-height:16px;
}
.PA-Droite{
width:480px;
margin-left:20px;
}
.staff-votes{
width:235px;
margin-right:20px;
}
.staff{
padding:0 10px;
margin-bottom:10px;
}
.infobulle{
position:relative;
width:100px;
height:100px;
overflow:hidden;
border-radius:10px;
background-color:#EFEFEF;
box-shadow:1px 1px 3px #b1a9a9;
}
.infobulle:first-of-type{
margin-right:10px;
}
.infobulle > img{
width:100%;
}
.infobulle div{
position:absolute;
top:100px;
left:0;
width:100px;
height:100px;
padding:10px;
box-sizing:border-box;
background-color:#fbf7f7;
text-align:center;
font-size:15px;
line-height:25px;
opacity:0;
transition:all 600ms;
}
.infobulle:hover div{
top:0;
opacity:0.9;
}
.votes{
text-align:center;
font-size:0;
}
.votes img{
margin:0 3px;
}
.nouveautes{
width:200px;
height:190px;
margin-bottom:10px;
padding:10px;
overflow:auto;
background-color:#f9f7f7;
box-shadow:1px 1px 3px #b1a9a9;
border-radius:20px;
text-align:justify;
line-height:20px;
}
.partenaires{
padding:10px;
background-color:#f9f7f7;
box-shadow:1px 1px 3px #b1a9a9;
border-radius:20px;
text-align:center;
line-height:17px;
}
#boxe_defil {
position:relative;
height:31px;
overflow:hidden;
}
#defile {
position:absolute;
margin-top:1px;
background-color:transparent;
}
.credits{
font-size:10px;
padding:0 20px;
}
Ensuite dirigez vous dans Affichage > Page d'Accueil > Généralités. Copiez le code qui va suivre et collez-le dans la zone.
- Code:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montez" />
<div class="PA">
<h1>
Namaste {USERNAME}
</h1>
<div class="inline PA-Gauche">
<h2>
Contexte
</h2>
<div class="contexte">
En se réveillant un matin après des rêves agités, Gregor Samsa se retrouva, dans son lit, métamorphosé en un monstrueux insecte. Il était sur le dos, un dos aussi dur qu’une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu’à peine. Ses nombreuses pattes, lamentablement grêles par comparaison avec la corpulence qu’il avait par ailleurs, grouillaient désespérément sous ses yeux. « Qu’est-ce qui m’est arrivé ? » pensa-t-il. Ce n’était pas un rêve.
</div>
<div class="credits">
PA codée par Cheshire Cat de <a href="http://epicode.bbactif.com/">Epicode</a> et <a href="http://www.never-utopia.com">N-U</a><br />
</div>
</div>
<div class="inline PA-Droite">
<div class="inline staff-votes">
<h2>
Staff
</h2>
<div class="staff">
<div class="infobulle inline">
<img alt="Pseudo" src="https://i37.servimg.com/u/f37/19/61/08/98/avamoi10.jpg" />
<div>
Alrun<br /> Fondatrice<br /> <a href="#">Profil</a> - <a href="#">MP</a>
</div>
</div>
<div class="infobulle inline">
<img alt="Pseudo" src="http://img11.hostingpics.net/pics/675085toto.png" />
<div>
Tomgoku<br /> Fondateur<br /> <a href="#">Profil</a> - <a href="#">MP</a>
</div>
</div>
</div>
<h2>
Top-sites
</h2>
<div class="votes">
<a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a> <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a> <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a> <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>
</div>
</div>
<div class="inline">
<h2 class="">
Nouveautés
</h2>
<div class="nouveautes">
00/00/0000 - Texte descriptif ou lien<br /> 00/00/0000 - Texte descriptif ou lien<br /> 00/00/0000 - Texte descriptif ou lien<br /> 00/00/0000 - Texte descriptif ou lien<br /> 00/00/0000 - Texte descriptif ou lien<br /> 00/00/0000 - Texte descriptif ou lien<br />
</div>
</div>
<h2>
Partenaires
</h2>
<div class="partenaires">
<div id="boxe_defil">
<div id="defile">
<a href="http://feminin-pluriel.discutland.net/"><img title="Féminin Pluriel" alt="Féminin Pluriel" src="http://img110.xooimage.com/files/d/b/6/logo-5185e32.gif" /></a> <a href="http://www.ouaf-ouaf-pub.com/"><img title="Ouaf Ouaf Pub" alt="Ouaf Ouaf Pub" src="http://image.noelshack.com/fichiers/2016/42/1476784253-oop-kit88.gif" /></a> <a href="http://voyances-ombeline.forumgratuit.be/"><img title="Au delà des voyances" alt="Au delà des voyances" src="http://i18.servimg.com/u/f18/11/27/81/85/logo_811.png" /></a> <a href="http://dream-pub.forumactif.fr/"><img title="Dream Pub" alt="Dream Pub" src="http://i68.tinypic.com/2n9hnrc.jpg" /></a> <a href="http://lecture-publicites.forumactif.com/"><img title="Lecture et publicités" alt="Lecture et publicités" src="https://i37.servimg.com/u/f37/19/58/81/65/logo_810.png" /></a>
</div>
</div>
<script type="text/javascript">
var defile;// l'element a deplacer
var psinit = 480; // position horizontale de depart
var pscrnt = psinit;
function texteDefile() {
if (!defile) defile = document.getElementById('defile');
if (defile) {
if(pscrnt < ( - defile.offsetWidth) ){
pscrnt = psinit;
} else {
pscrnt+= -1; // pixel par deplacement
}
defile.style.left = pscrnt+"px";
}
}
window.setInterval("texteDefile()",20); // delai de deplacement
</script>
</div>
</div>
</div>
Vous avez le droit de poster pour dire un p'tit "merci", ça fait toujours plaisir !
