KoalaVolant
Ven 22 Déc 2023 - 14:20
La fiche fait 670px de largeur
Crédits : KoalaVolant & Flickity (metafizzyco)
Header venant de Eden Memories
Avatar de SuperGirl venant de Eden Memories
Crédits : KoalaVolant & Flickity (metafizzyco)
Header venant de Eden Memories
Avatar de SuperGirl venant de Eden Memories
!
HTML & CSS
Pour installer la fiche il faut :
1. Aller dans le panneau d'admin Modules > Pages HTML
2. Créer une nouvelle page HTML
3. coller ça :
- Code:
<style>
/* Fiche de partenariat */
:root{
--bg-fiche:#F0F0F0;
--bg-fond2: #E1E1E1;
--bg-fond3:#C7C7C7;
--color-main: rgba(151, 144, 103, 1);
--color-main-opacity:rgba(151, 144, 103, 0.5);
--color-second:#4C5200;
--color-white:#fff;
--font-title:'Metamorphous', serif;
--font-text:'Nanum Gothic', sans-serif;
}
.fichepartatd, .fichepartatd *{ box-sizing:border-box; }
.fichepartatd{ margin:0 auto; width:650px; }
.fichepartatd br{ display:none; }
.fichepartatd img{ object-fit:cover; }
.fichepartatd a{ text-decoration:none; }
.contexteatd span br{
content: " ";
display: inline-block;
line-height:11px !important; }
.fichepartatd{ background:var(--bg-fiche); border-radius:20px; padding:15px; font-family:var(--font-text); }
.atdfirstflex{ display:flex; justify-content:space-between; margin-bottom:20px;}
.atdfirstflex a{ width:45%; }
.atdfirstflex a img{ width:100%; height:100%; }
.fichepartatd .titleatd{ font-family:var(--font-title); color:var(--color-main); }
.atdfirstflex .atdfirst2{ width:52%; }
.atdfirstflex .titleatd{ font-family:var(--font-title);
font-size:35px; color:var(--color-main); }
.contexteatd span{ display:block; max-height:300px; overflow:auto;
font-size:13px; line-height:18px; text-align:justify; padding-right:10px; margin-bottom:15px; }
.contexteatd a{ border:1px solid var(--color-main); padding:5px; margin:10px 0; border-radius:10px;
color:var(--color-main); font-size:13px; font-family:var(--font-title); transition:500ms; }
.contexteatd a:hover{ background:var(--color-main); color:var(--color-white); letter-spacing:1px; transition:500ms; }
.liensatd{ display:flex; justify-content:space-between; background:var(--bg-fond2); padding:5px; border-radius:5px;}
.liensatd a{ font-family:var(--font-title); transition:500ms; color:var(--color-main); padding:5px; border-radius:5px; }
.liensatd a:hover{ background:var(--bg-fond3); color:var(--color-second); transition:500ms;}
.scenarioatd{ margin-top:20px; margin-bottom:50px;}
.scenarioatd .titleatd{ margin-bottom:10px; }
.rejoindreatd{ background:var(--bg-fond2); padding:10px; border-radius:10px; text-align:justify;
font-size:14px; line-height:18px; }
.titleatd.right{ text-align:right; }
.btnatd{ display:flex; justify-content:center; border:1px solid var(--color-main); padding:5px; margin:10px 0; border-radius:10px;
color:var(--color-main); font-size:19px; font-family:var(--font-title); transition:500ms; margin-top:20px; }
.btnatd:hover{ background:var(--color-main); color:var(--color-white); letter-spacing:1px; transition:500ms; }
.gallery {
margin-bottom:36px;
}
.gallery-cell {
width: 26%;
height: 100px;
margin-right: 10px;
background: #8C8;
counter-increment: gallery-cell;
}
.gallery-cell img{ width:100%; height:120px; object-fit:cover;}
.flickity-prev-next-button{
width:20px !important; height:20px !important;
}
.flickity-page-dots .dot{
background:var(--color-second) !important;
}
.flickity-page-dots .dot.is-selected{
background:var(--color-main);
}
.gallery-cell a{ position:relative; height:100px; display:block; overflow:hidden;}
.gallery-cell a:hover span{ left:0; transition:500ms;}
.gallery-cell a span{ position:absolute; transition:500ms;
top:0; left:-100%; background:var(--color-main-opacity); width:100%; height:100%; display:flex;
align-items:center; justify-content:center; color:#fff;
}</style>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Metamorphous&family=Nanum+Gothic&display=swap" rel="stylesheet">
</head>
<div class="fichepartatd">
<!-- Header et contexte -->
<div class="atdfirstflex">
<a href="#" target="_blank"><img src="https://images2.imgbox.com/e4/30/OyXdrL9H_o.png" class="atdHead"/></a>
<div class="atdfirst2">
<div class="titleatd title1">Titre du forum</div>
<div class="contexteatd">
<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula urna eu nunc interdum pellentesque. Maecenas efficitur ante in mauris rutrum, vel molestie elit iaculis. Sed mollis rutrum nibh vitae blandit. Aliquam eu molestie felis. Aliquam vitae sodales ipsum. Etiam risus neque, iaculis sit amet lectus vitae, porta facilisis orci. Vestibulum facilisis arcu id urna porttitor, vitae varius leo molestie. Nam quis consectetur risus, nec suscipit turpis. Curabitur in turpis at ipsum rhoncus feugiat. In ut sapien nisl. Fusce elementum sapien diam, at pellentesque erat lobortis eu.
<br><br>
Sed auctor porta purus, a volutpat purus suscipit sed. Nam in dui sit amet lacus dapibus euismod at nec enim. Mauris fermentum non diam in luctus. Cras efficitur maximus fringilla. Morbi convallis ante eu nibh accumsan, quis efficitur magna sodales. Vivamus tincidunt ex ipsum, nec tempor sem tempus ut. Sed id augue elit. Donec dictum finibus pharetra. Nulla semper lacus non neque laoreet volutpat. </span>
<a target="_blank" href="#">Venir découvrir la suite</a>
</div></div>
<!-- Fin header et contexte -->
</div>
<!-- Liens utiles -->
<div class="liensatd">
<a href="#" target="_blank">Règlement</a>
<a href="#" target="_blank">Groupes</a>
<a href="#" target="_blank">Registres</a>
<a href="#" target="_blank">F.A.Q</a>
<a href="#" target="_blank">Invités</a>
<a href="#" target="_blank">Partenariats</a>
</div>
<!-- On les attends -->
<div class="scenarioatd">
<div class="titleatd title2">On les attends !</div>
<!-- Flickity HTML init --><div class="gallery js-flickity"
data-flickity-options='{ "wrapAround": true }'>
<div class="gallery-cell"> <a target="_blank" href="#"><img src="https://images2.imgbox.com/1b/66/9g4svATA_o.png"/><span>Nom du scénario</a></div>
<div class="gallery-cell"> <a target="_blank" href="#"><img src="https://images2.imgbox.com/1b/66/9g4svATA_o.png"/><span>Nom du scénario</a></div>
<div class="gallery-cell"> <a target="_blank" href="#"><img src="https://images2.imgbox.com/1b/66/9g4svATA_o.png"/><span>Nom du scénario</a></div>
<div class="gallery-cell"> <a target="_blank" href="#"><img src="https://images2.imgbox.com/1b/66/9g4svATA_o.png"/><span>Nom du scénario</a></div>
<div class="gallery-cell"> <a target="_blank" href="#"><img src="https://images2.imgbox.com/1b/66/9g4svATA_o.png"/><span>Nom du scénario</a></div>
<div class="gallery-cell"> <a target="_blank" href="#"><img src="https://images2.imgbox.com/1b/66/9g4svATA_o.png"/><span>Nom du scénario</a></div>
<div class="gallery-cell"> <a target="_blank" href="#"><img src="https://images2.imgbox.com/1b/66/9g4svATA_o.png"/><span>Nom du scénario</a></div>
<div class="gallery-cell"> <a target="_blank" href="#"><img src="https://images2.imgbox.com/1b/66/9g4svATA_o.png"/><span>Nom du scénario</a></div>
</div><!-- Fin Flickity -->
<!-- Fin On les attends -->
</div>
<!-- Pourquoi nous rejoindre --><div class="titleatd title2 right">Pourquoi nous rejoindre ?</div><div class="rejoindreatd">Parce qu’on est mignons, gentils parce qu’on a pleins de qualités, parce qu’on soutiens tout le monde, parce qu’on est chill on sens les anciens forums, parce qu’on se prend pas la tête, parce que la vie c’est bien, parce qu’on a un bon rythme de rp, parce qu’on cherche des scénarios trop choupinous tout doux et parce qu’on a le meilleur lorem ipsum de l’univers.</div>
<!-- Bouton -->
<a href="#" class="btnatd" target="_blank">Viens t'amuser sur titre du forum!</a>
<!-- Fin fiche pub -->
</div>
Garder le lien de la page HTML
Installation de la fiche de partenariat
Et enfin il faut copier ça pour avoir la fiche de partenariat :
(le lien c'est le lien de la page HTML
)Puis copier ça
- Code:
<center><iframe src="VOTREURL" style="width: 670px; height: 840px;" marginheight="0" frameborder="0" scrolling="no"></iframe></center>
Modifier les couleurs
Pour modifier les couleurs, aller dans la page HTML et repérer tout ce qu'il y a entre ":root".
Ici se trouve toutes vos couleurs.
Si vous voulez changer de couleur, modifier le hexa comme #123456
Si vous voulez changer de "variable de couleur" (le "var(--)") changer son nom du genre var(--banane) et créer une variable dans le root en écrivant :
--banane:#123456;
Si besoin : la personnalisation de forum vous est dispo
|
|
|
