Rappel du premier message :
Bonjour à vous tous !
Aujourd'hui je suis là pour vous proposer une petite PA toute gentille.
En action !
Pour installer votre Page d'Accueil, il vous faudra aller créer une page HTML. Faites Panneau d'administration > Modules > HTML & Javascript > Gestion des pages HTML > Création en mode avancé (HTML) et copiez le code qui va suivre. N'oubliez pas d'enregistrer votre page et d'y mettre un titre.
Ensuite dirigez vous dans Affichage > Page d'Accueil > Généralités. Copiez le code qui va suivre et ajoutez-y le lien de votre page HTML.
Vous n'êtes pas obligés de poster pour voir les codes, mais un petit "Merci" fait toujours plaisir :)
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.
En action !
Pour installer votre Page d'Accueil, il vous faudra aller créer une page HTML. Faites Panneau d'administration > Modules > HTML & Javascript > Gestion des pages HTML > Création en mode avancé (HTML) et copiez le code qui va suivre. N'oubliez pas d'enregistrer votre page et d'y mettre un titre.
- Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
<meta charset="utf-8" />
<base target="_blank" />
<title>Page d'accueil Café par Cheshire Cat</title>
<style type="text/css">
.corps{
position:relative;
width:720px;
height:400px;
margin:auto;
background: #D8B06C;
border:10px solid #C19249;
font-family:'Yanone Kaffeesatz', sans-serif;
}
.vote_1{
position:absolute;
left:20px;
bottom:130px;
display:block;
width:55px;
height:45px;
padding-top:23px;
padding-left:15px;
}
.vote_2{
position:absolute;
bottom:80px;
left:100px;
display:block;
width:100px;
height:35px;
padding-top:50px;
text-align:center;
}
.vote_3{
position:absolute;
bottom:130px;
left:220px;
display:block;
width:25px;
height:50px;
padding-top:25px;
padding-left:50px;
}
.vote{
border-radius:50%;
background:#A86D3F;
font-size:30px;
color:#F3D8AC;
text-decoration:none;
-webkit-transition:all linear 0.4s;
transition:all linear 0.4s;
}
.vote:hover{
color:#A86D3F;
background:#F3D8AC;
-webkit-transition:all linear 0.4s;
transition:all linear 0.4s;
}
.contexte{
position:absolute;
overflow:hidden;
top:20px;
left:20px;
width:250px;
height:250px;
border-radius:50%;
border:10px solid #F3D8AC;
}
.contexte img{
z-index:1;
width:250px;
border-radius:50%;
}
.contexte p{
position:absolute;
top:-13px;
left:0px;
width:170px;
height:170px;
border-radius:50%;
background:#C19249;
padding:40px;
overflow:auto;
text-align:justify;
color:#4D2D22;
font-size:13px;
font-family: 'PT Sans Narrow', sans-serif;
opacity:0;
visibility:hidden;
-webkit-transform:rotate(30deg) scale(0);
transform:rotate(30deg) scale(0);
-webkit-transition:all ease 0.6s;
transition:all ease 0.6s;
}
.contexte:hover p{
opacity:1;
visibility:visible;
-webkit-transform:rotate(0deg) scale(1);
transform:rotate(0deg) scale(1);
-webkit-transition:all ease 0.6s;
transition:all ease 0.6s;
}
.contexte a{
text-decoration:none;
color:#F3D8AC;
}
.staff{
position:absolute;
overflow:hidden;
top:10px;
right:35px;
}
.infobulle{
display:inline-block;
overflow:hidden;
width:100px;
height:100px;
margin-right:10px;
}
.infobulle img{
width:100px;
}
.contenu{
position:absolute;
bottom:0px;
width:100px;
height:74px;
line-height:24px;
font-size:15px;
background:#F3D8AC;
text-align:center;
color:#A86D3F;
font-family: 'PT Sans Narrow', sans-serif;
opacity:0;
-webkit-transform:translate(0px, 74px);
transform:translate(0px, 74px);
-webkit-transition:all ease 0.5s;
transition:all ease 0.5s;
}
.contenu a{
color:#4D2D22;
text-decoration:none;
}
.infobulle:hover .contenu{
opacity:1;
-webkit-transform:translate(0px, 0px);
transform:translate(0px, 0px);
-webkit-transition:all ease 0.5s;
transition:all ease 0.5s;
}
#barre{
position:absolute;
top:40px;
right:10px;
width:400px;
height:40px;
background:#F3D8AC;
}
.nav{
position:absolute;
right:208px;
bottom:35px;
padding:0px;
list-style-type:none;
}
.nav li a{
display:block;
width:165px;
margin-bottom:10px;
background:#A86D3F;
text-align:center;
letter-spacing:1px;
font-size:23px;
color:#F3D8AC;
text-decoration:none;
-webkit-transition:all linear 0.4s;
transition:all linear 0.4s;
}
.nav li a:hover{
color:#A86D3F;
background:#F3D8AC;
-webkit-transition:all linear 0.4s;
transition:all linear 0.4s;
}
.news{
position:absolute;
top:105px;
right:10px;
width:178px;
height:250px;
padding:0px;
background:#D8B06C;
border:10px solid #F3D8AC;
overflow:auto;
list-style-type:none;
}
.news li{
position:relative;
top:0px;
left:0px;
box-sizing:border-box;
padding-left:5px;
padding-right:5px;
color:#4D2D22;
font-size:15px;
font-family: 'PT Sans Narrow', sans-serif;
border-bottom:2px solid #A86D3F;
}
.partenaires{
position:absolute;
left:15px;
bottom:5px;
}
.partenaires img{
margin-right:5px;
width:40px;
height:40px;
}
</style>
</head>
<body>
<div class="corps">
<a href="#" class="vote vote_1">1</a>
<a href="#" class="vote vote_2">2</a>
<a href="#" class="vote vote_3">3</a>
<div class="contexte">
<img src="http://www.tshirtvortex.net/wp-content/uploads/Coffee-Time-A.gif" alt="image contexte"/>
<p class="texte">
Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus. <a href="#">Plus ?</a>
</p>
</div>
<div id="barre"></div>
<div class="staff">
<div class="infobulle">
<div class="contenu">
Pseudo<br />
Rôle<br />
<a href="#">Contacter</a> | <a href="#">Profil</a>
</div>
<img src="http://i64.tinypic.com/33mbw3c.png" alt="Membre du staff" />
</div>
<div class="infobulle">
<div class="contenu">
Pseudo<br />
Rôle<br />
<a href="#">Contacter</a> | <a href="#">Profil</a>
</div>
<img src="http://i64.tinypic.com/33mbw3c.png" alt="Membre du staff" />
</div>
<div class="infobulle">
<div class="contenu">
Pseudo<br />
Rôle<br />
<a href="#">Contacter</a> | <a href="#">Profil</a>
</div>
<img src="http://i64.tinypic.com/33mbw3c.png" alt="Membre du staff" />
</div>
</div>
<ul class="nav">
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
<ul class="news">
<li>Date: texte</li>
<li>Date: texte</li>
<li>Date: texte</li>
<li>Date: texte</li>
<li>Date: texte</li>
<li>Date: texte</li>
<li>Date: texte</li>
<li>Date: texte</li>
<li>Date: texte</li>
<li>Date: texte</li>
<li>Date: texte</li>
<li>Date: texte</li>
<li>Date: texte</li>
</ul>
<div class="partenaires">
<a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
<a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
<a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
<a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
<a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
<a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
<a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
<a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
<a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
<a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
</div>
</div>
</body>
</html>
Ensuite dirigez vous dans Affichage > Page d'Accueil > Généralités. Copiez le code qui va suivre et ajoutez-y le lien de votre page HTML.
- Code:
<iframe name="Page d'accueil par Cheshire Cat" src="URL DE LA PAGE HTML" frameborder="0" scrolling="no" style="width: 755px; height: 435px;"></iframe>
Vous n'êtes pas obligés de poster pour voir les codes, mais un petit "Merci" fait toujours plaisir :)
Dernière édition par Cheshire Cat le Dim 26 Aoû 2018 - 16:44, édité 11 fois
