Tablette 11″ Xiaomi- Mi Pad 6 global version ...

Page d'accueil n°4

Pisrale :: Codages :: Apparence du forum :: Haut du forum

KoalaVolant

Sam 5 Déc 2020 - 23:44

Faites spécialement pour mon forum, je vous la lègue gracieusement.
A savoir que j'attends tout de même un crédit pour ça.
Et à savoir aussi que bien sûr, les couleurs et les images sont modifiables.
L'image d'exemple est celle de mon forum.

Alors, pour l'installer c'est tout simple

Créer la page HTML

Vous allez dans Modules > Pages HTML et vous créez une nouvelle page HTML dans lequel vous mettez tout ça :

Code:: <style>/* Page d'accueil par KoalaVolant */ /* Couleurs */ :root{ --white:#fff; --grey1:#dedede; --grey2:#555; --grey3:#999; --grey4:#EAEAEA; --main-color:#547387; --snd-color:#847467; --four-color:#FDB508; --font1:'Pacifico', cursive; --font2:'Montserrat', sans-serif; --font3:Verdana; --imagefond1:url('https://nsm09.casimages.com/img/2020/11/19//sbRFKb-fondfiche.jpg'); --imagefond2:url('https://nsm09.casimages.com/img/2020/11/19//ubRFKb-HeaderSansFond.jpg'); } .pakwrap{ background-color:var(--grey4); } .paklink a{ background-color:var(--main-color); color:var(--white); transition:600ms; } .paklink a:hover{ background-color:var(--snd-color); color:var(--white); } .pak-contexte div, .pak-event div{ background-color:#fff; border:1px solid var(--main-color); } .pakhover a img{ border:2px solid #fff; } .pakhover a span{ background-color:var(--snd-color); color:var(--white); } .pakhover.pak-staff a span{ background-color:var(--main-color); } .pak-contexte a{ background-color:var(--snd-color); color:var(--white); padding:3px; transition:600ms; } .pak-contexte a:hover{ background-color:var(--main-color); } .pak-staff .staff{ background-color:#fff; } .scenlink a{ background-color:#fff; color:var(--main-color); } .scenlink a:hover{ color:var(--snd-color); } .pakwrap h2{ background-color:var(--snd-color); color:#fff; } .parti a{ background-color:var(--main-color); color:#fff; } .parti a:hover{ background-color:var(--white); color:var(--main-color); } .pak-event a{ color:var(--snd-color); } /* Structure */ .pakwrap{ width:785px; font-family:var(--font3); padding:5px; } .pakwrap *{box-sizing:border-box; } .pakwrap a, .pakwrap a:hover{ text-decoration:none; } /* Titres */ .pakwrap h2{ font-size:14px; padding:10px; font-family:var(--font2); text-align:center; font-weight:normal; margin: 5px 0px;} /* Flex */ .pakwrap{ display:flex; justify-content:space-around; font-size:12px; line-height:14px; } .paklink{ width:144px; margin-right:5px;} .pak-left{ width:424px; margin: 0px 5px; } .pak-right{ width:232px; } /* Links */ .paklink{ display:flex; flex-wrap:wrap; flex-direction:column;} .paklink a{ display:block; width:100%; font-family:var(--font3); font-size:13px; letter-spacing:2px; text-transform:uppercase; padding:9px; margin:3px 0px; } /* Contexte */ .pak-contexte div{ height:96px; overflow:auto; padding:10px; text-align:justify;} .pak-contexte a{ display:block; margin:5px 0px; font-family:var(--font2); } /* Event */ .pak-event{ display:flex; justify-content:space-between; flex-wrap:wrap; } .pak-event div{ width:68%; height:86px; overflow:auto; padding:10px; margin-left:5px; text-align:justify; } .pak-event img{ max-width:30%; height:86px; object-fit:cover; } /* survol Scenario & Staff */ .pakhover a{ overflow:hidden; position:relative; display:flex: justify-content:space-between;} .pakhover a img{ object-fit:cover; position:relative; z-index:7;} .pakhover a span{ display:block; position:absolute; z-index:13; padding:5px; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); transition:600ms; } .pakhover a:hover span{ -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* Scenario */ .pak-scenar{ margin-top:10px; margin-bottom:10px;} .pak-scenar div a, .pak-scenar img{ width:63px; height:49px; } .pak-scenar div a span{ top:-25px; left:0; width: 100%; text-align: center;} .scenlink{ display:flex; justify-content:between; } .scenlink a{ display:block; padding:5px; width: 33%; margin: 0px 2px; text-align:center; font-size:13px; text-align:center; font-family:var(--font2); } /* Staff */ .pak-staff{ display: flex; flex-wrap: wrap; justify-content: center; } .pak-staff a, .pak-staff img{ width:50px; height:50px; } .pak-staff a span{ width:214px; height:38px; top:17px; left:0; text-align:center; } .cast span{ left:-54px !important; } .panda span{ left:-108px !important; } .maureen span{ left:-163px !important; } .pak-staff .staff{ display:block; width:214px; height:38px; padding:5px; text-align:center; line-height:28px; font-family:var(--font2); font-size:13px; margin-top:2px; } /* Tops Sites */ .pak-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:3px;} .pak-top h2{ text-align:center; } .pak-top img, .pak-top a{ width:30px; height:30px; margin:0px 2px; } /* Partenaires */ .pak-partenaires{ margin-top:5px; } .pak-partenaires div, .pak-partenaires{ display:flex; flex-wrap:wrap; justify-content:center; } .pak-partenaires h2{ width:95%; } .pak-partenaires div{ max-height:50px; overflow:auto; } .pak-partenaires div a{ display:block; margin:2px; } .pak-partenaires img{ width:60px; height:21px; object-fit:cover; } .parti a{ padding:5px; font-family:var(--font2); display:inline-block; margin:0px 3px; margin-top:5px; } </style><link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Pacifico&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&family=Noto+Serif&display=swap" rel="stylesheet"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <div class="pakwrap"> <div class="paklink"> <a href="#" target="_blank" style="margin-top:0px;">Lien</a> <a href="#" target="_blank" style="margin-top:0px;">Lien</a> <a href="#" target="_blank" style="margin-top:0px;">Lien</a> <a href="#" target="_blank" style="margin-top:0px;">Lien</a> <a href="#" target="_blank" style="margin-top:0px;">Lien</a> <a href="#" target="_blank" style="margin-top:0px;">Lien</a> <a href="#" target="_blank" style="margin-top:0px;">Lien</a> <a href="#" target="_blank" style="margin-top:0px;">Lien</a> </div> <div class="pak-left"> <div class="pak-contexte"> <div>Insérez le contexte ici</div> <a href="#" target="_blank">Le contexte complet</a> </div> <div class="pak-event"> <img src="http://1.bp.blogspot.com/-EgjWFeD2mpQ/VBnbzg2m6qI/AAAAAAAABcM/o_GfSRP5nTw/s1600/scotla.gif" /> <div><b>Insérer votre event ici <a target="_blank" href="#">Plus d'informations</a></div> </div> <div class="pak-scenar pakhover"> <div> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/kindof10.jpg" /><span>Groupe</span></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/kindof10.jpg" /><span>Groupe</span></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/kindof10.jpg" /><span>Groupe</span></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/kindof10.jpg" /><span>Groupe</span></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/kindof10.jpg" /><span>Groupe</span></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/kindof10.jpg"><span>Groupe</span></a> </div> <span class="scenlink"><a href="#" target="_blank" style="margin-left:0px;">Prédéfinis</a> <a href="#" target="_blank">Scénarios</a> <a href="#" target="_blank">Préliens</a></span> </div> </div> <div class="pak-right"> <div class="pak-staff pakhover"> <div> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/kindof10.jpg" /><span>Pseudo - <em>Rang</em><br><strong>Persos</strong></span></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/kindof10.jpg" /><span>Pseudo - <em>Rang</em><br><strong>Persos</strong></span></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/kindof10.jpg" /><span>Pseudo - <em>Rang</em><br><strong>Persos</strong></span></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/kindof10.jpg" /><span>Pseudo - <em>Rang</em><br><strong>Persos</strong></span></a> </div> <span class="staff">Survolez votre staff</span> </div> <div class="pak-top"><h2>Votez toutes les deux heures !</h2> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/spark10.png"/></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/spark10.png"/></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/spark10.png"/></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/spark10.png"/></a> <a href="https://kindofmagic.forumactif.com/t158-top-sites-votez-toutes-les-deux-heures#417" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/gvotzo10.jpg"/></a> </div> <div class="pak-partenaires"><h2>Nos amis</h2> <div> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/akindo11.jpg"/></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/akindo11.jpg"/></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/akindo11.jpg"/></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/akindo11.jpg"/></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/akindo11.jpg"/></a> <a href="#" target="_blank"><img src="https://i.servimg.com/u/f30/19/45/51/53/akindo11.jpg"/></a> </div> <span class="parti"><a href="#" target="_blank">Plus</a><a href="#" target="_blank">Vous</a></span> </div> </div> </div>

Page d'accueil

Une fois cela fait vous allez dans Général > Page d'accueil

Et vous pouvez installer l'iframe qui relie votre page HTML à la page d'accueil (ça permet d'éviter les bugs forumactif)