Créditez-moi quelque part sur votre forum si vous utilisez ce code
Codes et explications
Pour installer votre page d'accueil, je vous conseille de créer une iframe et de l'installer dans l'emplacement réservé aux pages d'accueil.
Dans votre panneau d'administration, Modules > HTML & Javascript > Gestion des pages HTML. Cliquez sur le bouton "CRÉATION EN MODE AVANCÉ (HTML)" puis copiez et collez le code suivant dans le contenu de la page :
- Code:
<head>
<meta charset="utf-8">
<title>PA</title>
<link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:900|Cousine" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<style>
body {
margin: 0;
padding: 0;
}
#pa {
width: 825px;
box-sizing: border-box;
padding: 5px;
display: flex;
font-family: 'Roboto', sans-serif;
flex-wrap: wrap;
}
#pa a {
text-decoration: none!important;
}
.pa-liens {
flex: 100%;
display: flex;
margin-bottom: 10px;
flex-wrap: wrap;
}
.pa-liens a {
height: 20px;
background: #C3A7CC;
border: 1px solid #b28eb9;
margin-bottom: 5px;
text-align: center;
text-transform: uppercase;
line-height: 20px;
color: #fff;
margin-right: 5px;
box-sizing: border-box;
text-shadow: 1px 0px 0px #b28eb9, -1px 0px 0px #b28eb9, 0px 1px 0px #b28eb9, 0px -1px 0px #b28eb9;
font-family: 'Cousine', monospace;
font-size: 8px;
letter-spacing: 1px;
flex: 1;
transition: background 0.3s;
}
.pa-liens a:hover {
background: #DDBDE7;
}
.pa-liens a:last-child {
margin-right: 0px;
}
#pa > div:nth-child(2) {
height: 258px;
width: 420px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
#pa h1 {
margin: 0;
font-family: 'Montserrat', sans-serif;
color: #fff;
width: 200px;
font-size: 30px;
line-height: 1;
text-shadow: 1px 1px 0px #b28eb9;
}
#pa h2 {
margin: 0 0 10px;
font-family: 'Cousine', Monospace;
color: #000;
font-size: 8px;
text-shadow: 1px 0px 0px #fff, -1px 0px 0px #fff, 0px 1px 0px #fff, 0px -1px 0px #fff;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: normal;
border-bottom: 1px solid #ccc;
padding-bottom: 3px;
}
.contexte {
flex: 1;
background: #f9f9f9;
box-sizing: border-box;
border: 15px solid #f9f9f9;
border-right: 5px solid #f9f9f9;
}
#pa > div:nth-child(2) .contexte {
height: 198px;
}
.contexte > div {
height: 100%;
overflow: auto;
text-align: justify;
padding-right: 10px;
box-sizing: border-box;
font-size: 11px;
line-height: 14px;
}
#pa > div:nth-child(3) {
width: 200px;
margin: 0 10px;
display: flex;
flex-direction: column;
}
.pa-staff {
margin: 10px 0px 0px;
display: flex;
justify-content: space-between;
flex: 100%;
}
.pa-staff > div {
height: 50px;
width: 100px;
position: relative;
overflow:hidden;
}
.pa-staff > div > div {
height: 100%;
width: 100%;
background: #f9f9f9;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 9px;
text-align: center;
text-transform: uppercase;
transform: translate(0,0);
transition: all 0.3s;
}
.pa-staff > div > div a {
color: #b28eb9;
transition: color 0.3s;
}
.pa-staff > div > div a:hover {
color: #C3A7CC;
}
.pa-staff > div > div b {
font-family: 'Montserrat', sans-serif;
font-size: 8px;
}
.pa-staff > div:hover > div {
transform: translate(0,-50px);
}
.pa-staff .statut {
color: green;
font-family: 'Cousine', monospace;
font-size: 8px;
letter-spacing: 1px;
}
.pa-staff .statut.absent {
color: red;
}
#pa > div:nth-child(3) .contexte {
height: 234px;
}
date {
display: block;
height: 15px;
line-height: 15px;
background: #C3A7CC;
border: 1px solid #b28eb9;
margin-bottom: 3px;
text-transform: uppercase;
color: #fff;
text-shadow: 1px 0px 0px #b28eb9, -1px 0px 0px #b28eb9, 0px 1px 0px #b28eb9, 0px -1px 0px #b28eb9;
font-family: 'Cousine', monospace;
font-size: 8px;
letter-spacing: 1px;
padding-left: 10px;
border-radius: 2px;
}
.pa-partenaires {
align-content: flex-start;
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.pa-partenaires > div:first-of-type {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
min-height: 170px;
align-content: space-between;
}
.pa-partenaires > div:first-of-type a {
height: 50px;
width: 50px;
}
.pa-partenaires > a {
flex: 1;
text-transform: uppercase;
color: #000;
background: #f7f7f7;
margin-top: 10px;
box-sizing: border-box;
border: 1px solid #e1e1e1;
display: flex;
flex-direction: column;
justify-content: center;
text-shadow: 1px 0px 0px #fff, -1px 0px 0px #fff, 0px 1px 0px #fff, 0px -1px 0px #fff;
font-family: 'Cousine', monospace;
font-size: 8px;
letter-spacing: 1px;
position: relative;
padding-left: 40px;
}
.pa-partenaires > a::before {
content:"\f005";
font-family: "Font Awesome 5 Free";
font-weight: 900;
height: 100%;
width: 30px;
position: absolute;
top: -1px;
left: -1px;
background: #C3A7CC;
border: 1px solid #b28eb9;
text-align: center;
color: #fff;
text-shadow: 1px 0px 0px #b28eb9, -1px 0px 0px #b28eb9, 0px 1px 0px #b28eb9, 0px -1px 0px #b28eb9;
font-size: 8px;
letter-spacing: 1px;
display: flex;
flex-direction: column;
justify-content: center;
transition: background 0.3s;
}
.pa-partenaires > a:hover::before {
background: #DDBDE7;
}
</style>
</head>
<body>
<div id="pa">
<!-- BLOC LIENS -->
<div class="pa-liens">
<a href="#">Un lien</a>
<a href="#">Un lien</a>
<a href="#">Un lien</a>
<a href="#">Un lien</a>
<a href="#">Un lien</a>
<a href="#">Un lien</a>
</div>
<div>
<!-- TITRE DE LA PA -->
<h1>Bienvenue sur les chroniques de Meitha</h1>
<!-- BLOC CONTEXTE -->
<div class="contexte">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie condimentum tortor, a porttitor tellus mollis at. Ut gravida ex mi, id vehicula lorem pharetra vitae. In hac habitasse platea dictumst. Morbi et nulla tempor, tristique
libero vel, volutpat sem. Nam vel purus ultricies, pellentesque arcu nec, ullamcorper velit. Suspendisse pulvinar orci sed ipsum tincidunt, sit amet cursus felis interdum.
</div>
</div>
<!-- STAFF -->
<div class="pa-staff">
<div>
<img src="http://via.placeholder.com/100x50" />
<div>
<b>Pseudo</b>
<div><a href="#" target="_blank">Profil</a> & <a href="#" target="_blank">MP</a></div>
<div class="statut">Présent</div>
</div>
</div>
<div>
<img src="http://via.placeholder.com/100x50" />
<div>
<b>Pseudo</b>
<div><a href="#" target="_blank">Profil</a> & <a href="#" target="_blank">MP</a></div>
<div class="statut">Présent</div>
</div>
</div>
<div>
<img src="http://via.placeholder.com/100x50" />
<div>
<b>Pseudo</b>
<div><a href="#" target="_blank">Profil</a> & <a href="#" target="_blank">MP</a></div>
<div class="statut">Présent</div>
</div>
</div>
<div>
<img src="http://via.placeholder.com/100x50" />
<div>
<b>Pseudo</b>
<div><a href="#" target="_blank">Profil</a> & <a href="#" target="_blank">MP</a></div>
<div class="statut absent">Absent</div>
</div>
</div>
</div>
</div>
<!-- BLOC ANNONCES -->
<div>
<h2>Annonces</h2>
<div class="contexte">
<div>
<div>
<date>24 juin 2018</date>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</div>
<!-- PARTENAIRES -->
<div class="pa-partenaires">
<h2>Partenaires</h2>
<div>
<a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
<a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
<a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
<a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
<a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
<a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
<a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
<a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
<a href="#" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
</div>
<a href="#" target="_blank">Devenir partenaire ?</a>
</div>
</div>
</body>
Puis dans Affichage > Page d'accueil > Généralités, collez le code suivant :
- Code:
<iframe frameborder="0" src="VOTRE URL" scrolling="no" style="width: 825px; height: 307px;"></iframe>
|
|
|