KoalaVolant
Mer 5 Juin 2024 - 16:16
Crédit : KoalaVolant
Crédits images : Gifs de Kogitsunemaru (Touken Ranbu) && Ken Ryuguji / Draken (Tokyo Revengers) par KoalaVolant
Icons de Baldur's Gate 3 && Beelzebub && Matantei Loki Ragnarok par KoalaVolant
Polices : Inknut Antiqua && Inria Sans
Largeur : 1024px
Version ModernBB
Crédits images : Gifs de Kogitsunemaru (Touken Ranbu) && Ken Ryuguji / Draken (Tokyo Revengers) par KoalaVolant
Icons de Baldur's Gate 3 && Beelzebub && Matantei Loki Ragnarok par KoalaVolant
Polices : Inknut Antiqua && Inria Sans
Largeur : 1024px
Version ModernBB
HTML
Allez dans Panneau d'administration > Affichage > Templates > overall_header (Haut de page)
Cherchez le < div id="wrap">
Et copiez coller ça à l'intérieur :
- Code:
<!-- PANNEAU D'AFFICHAGE --><link href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300;400;500;600;700;800;900&family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="pan-pink">
<!-- HAUT DU PANNEAU --><div class="ppink-haut">
<!-- DISCORD ET TOP SITES --><div class="ppink-top">
<a href="" target="_blank"><i class="fa-brands fa-discord"></i></a>
<a href="" target="_blank">1</a>
<a href="" target="_blank">2</a>
<a href="" target="_blank">3</a>
<a href="" target="_blank">4</a>
<!-- FIN DISCORD ET TOP SITES --></div>
<!-- INFOS --><div class="ppink-infos">
Infos blabla sur le forum pour son thème, ses avatars, son minimum de ligne et tout le trululu
<!-- FIN INFOS--></div>
<!-- FIN DU HAUT DU PANNEAU --></div>
<!-- DISPLAY FLEX --><div class="ppink-flex">
<!-- GAUCHE --><div class="ppink-left">
<!-- TITRE EVENT -->
<div class="ppink-title"><span>Event à découvrir</span></div>
<!-- IMAGE(S) EVENT -->
<div class="ppink-eventimgs">
<img src="https://i.imgur.com/w56XYy1.gif"/>
<img src="https://i.imgur.com/eEhGBGe.gif"/>
</div>
<!-- TEXTE EVENT -->
<div class="ppink-eventtxt">
<span>Infos sur l'event blablabla infos sur l'event, tout savoir sur l'event pourquoi il va être trop bien pourquoi il faut aller le voir wouhouhou en quelques mots courts yolo</span>
<!-- LIEN EVENT -->
<a href="" target="_blank" class="ppink-eventlien">Venez participer</a>
</div>
<!-- FIN GAUCHE --></div>
<!-- MILIEU --><div class="ppink-middle">
<!-- Première new sera droite, seconde un peu penché, troisième penché dans l'autre sens etc, et une bordure orange pour les impairs et pair bordure rose -->
<div class="ppink-newswrap">
<div class="ppink-new">
<div class="ppink-newdate">00/00/00</div>
<div class="ppink-newtxt">
<div>Blablabla nouvelle update 3</div>
</div>
</div>
<div class="ppink-new">
<div class="ppink-newdate">00/00/00</div>
<div class="ppink-newtxt">
<div>Blablabla nouvelle update 3</div>
</div>
</div>
<div class="ppink-new">
<div class="ppink-newdate">00/00/00</div>
<div class="ppink-newtxt">
<div>Blablabla nouvelle update 3</div>
</div>
</div>
<div class="ppink-new">
<div class="ppink-newdate">00/00/00</div>
<div class="ppink-newtxt">
<div>Blablabla nouvelle update 3</div>
</div>
</div>
</div>
<!-- TITRE NEW --><div class="ppink-title"><span>On a aussi des updates !</span></div>
<!-- FIN MILIEU --></div>
<!-- DROITE --><div class="ppink-right">
<div class="ppink-title"><span>Pour trouver des rps</span></div>
<!-- LIENS UTILES OU TROUVER DES RPS --><div class="ppink-links">
<a href="" target="_blank">Loterie de rp</a>
<a href="" target="_blank">Demande de rp</a>
<a href="" target="_blank">Bidule cherche un rp</a>
<a href="" target="_blank">Système de points</a>
<!-- FIN LIENS --></div>
<!-- PREDEFINIS SCENARIOS TRUCS QUI SONT CHERCHES -->
<div class="ppink-recherch">
<div class="ppink-sstitre">Et nos recherchés!</div>
<a href="" target="_blank"><img src="https://i.goopics.net/uyv62w.jpg"/><span>Gale</span></a>
<a href="" target="_blank"><img src="https://i.imgur.com/o1gCnAV.jpg"/><span>Hildegarde</span></a>
<a href="" target="_blank"><img src="https://i.goopics.net/pb6vrh.png"/><span>Loki</span></a>
</div>
<!-- FIN DROITE --></div>
<!-- FIN DISPLAY FLEX --></div>
<!-- FIN PANNEAU D'AFFICHAGE --></div>
CSS
- Code:
:root{
--ppink-font-txt:Inria Sans;
--ppink-font-title:Inknut Antiqua;
--ppink-deg:radial-gradient(circle, rgba(247,246,246,1) 2%, rgba(221,131,2,1) 27%, rgba(176,53,127,1) 77%, rgba(177,55,123,1) 84%, rgba(171,45,121,1) 100%);
--ppink-deg2:linear-gradient(60deg, rgba(232,183,123,1) 2%, rgba(198,96,89,1) 100%);
--ppink-color1:#F2DBBD;
--ppink-color2:#fff;
--ppink-color3:rgba(176,53,127,1);
--ppink-color3hover:rgb(116,30,82);
--ppink-border1:rgb(214,62,147);
--ppink-border2:rgba(221,131,2,1);
--ppink-border2-o:rgba(221,131,2,0.7);
--ppink-imgfnd:url('https://i.servimg.com/u/f62/20/49/83/54/alexan10.jpg');
--ppink-gris1:#f0f0f0;
--ppink-txt1:#222;
}
.pan-pink, .pan-pink *{ box-sizing:border-box; }
.pan-pink img{ object-fit:cover; }
.pan-pink .ppink-haut, .pan-pink .ppink-flex{ display:flex; }
.pan-pink .ppink-flex{ justify-content:space-between; }
.pan-pink{ width:1024px; }
.pan-pink .ppink-haut{ background:var(--ppink-deg);
padding:10px; justify-content:space-between; align-items:center; }
.pan-pink .ppink-top{ width:35%; display:flex;
justify-content:space-between; align-items:center;
}
.pan-pink .ppink-top a{ width:19%;
background:var(--ppink-color1); font-size:21px;
line-height:15px;
font-family:var(--ppink-font-title); height:40px;
display:flex; align-items:center;
justify-content:center; padding-bottom:10px;}
.pan-pink .ppink-top a:nth-child(1){ padding-bottom:0px;}
.pan-pink .ppink-top a:nth-child(2),
.pan-pink .ppink-top a:nth-child(3){ padding-bottom:5px; }
.pan-pink .ppink-top a:nth-child(3){ font-size:24px;}
.pan-pink .ppink-top a:hover{
background:var(--ppink-color2); color:var(--ppink-txt1); }
.pan-pink .ppink-infos{ width:64%; border-radius:10px;
background:rgba(255,255,255,0.5); height:40px;
padding:5px; overflow:auto; color:var(--ppink-txt1);
font-family:var(--ppink-font-txt); text-align:justify;}
/* TITRE */
.pan-pink .ppink-title{ font-family:var(--ppink-font-title);
text-transform:uppercase; font-weight:800; position:relative;
display:inline-block; }
.pan-pink .ppink-title:before{ content:' '; width:100%; height:10px;
background:var(--ppink-deg); position:absolute; bottom:-5px; left:5px;
transform:rotate(-2deg); z-index:20;}
.pan-pink .ppink-title span{ z-index:30; position:relative; }
/* EVENTS */
.pan-pink .ppink-left{ padding:15px; width:24%; }
.pan-pink .ppink-left .ppink-title{ float:right; }
.pan-pink .ppink-eventimgs{ display:flex; transform:rotate(-4deg);
justify-content:space-between; width:100%; z-index:10; position:relative;}
.pan-pink .ppink-eventimgs img{ width:49%;}
.pan-pink .ppink-eventtxt{ background:var(--ppink-gris1); padding:10px;
padding-top:25px; position:relative; top:-10px; z-index:9;
font-family:var(--ppink-font-txt); text-align:justify; color:var(--ppink-txt1);
font-size:13px; line-height:13px;}
.pan-pink .ppink-eventtxt span{ display:block; height:80px; overflow:auto;}
.pan-pink .ppink-eventtxt a{ display:block; margin-top:5px; text-align:center;
background:var(--ppink-deg2); font-family:var(--ppink-font-title);
text-transform:uppercase; color:var(--ppink-color2); line-height:14px;
transition:500ms;}
.pan-pink .ppink-eventtxt a:hover{ background-size:300%; transition:500ms;
background-position:center;}
/* UPDATES */
.pan-pink .ppink-middle{ width:43%; position:relative;
background:var(--ppink-imgfnd); background-size:cover;
background-position:bottom; height:218px;
display:flex; flex-direction:column;
justify-content:center;}
.pan-pink .ppink-middle:before{ content:' '; position:absolute; top:0; left:0;
width:100%; height:100%; background:var(--ppink-deg2); opacity:0.5;}
.ppink-newswrap {
position:relative; width: 400px;
overflow-x: auto; display: flex; margin:0 20px; padding-bottom:20px;
box-sizing: border-box;
}
.ppink-new {
flex: 0 0 auto; /* Permet aux éléments de conserver leur largeur définie */
width: 125px; /* (500px - (4 * 10px)) / 4 = 122px, avec 10px pour la marge entre chaque élément */
margin-right: 5px;
box-sizing: border-box;position:relative;
}
.ppink-newdate {
font-family:var(--ppink-font-title); color:var(--ppink-color2);
}
.ppink-newtxt {
background:var(--ppink-color2); padding:8px; width:100%;
font-size:13px; font-family:var(--ppink-font-txt);
line-height:1.2em; height:80px; overflow:auto;
}
.ppink-newtxt:after{ content:' '; position:absolute; width:98%; height:75px;
border:1px solid; bottom:2px; left:2px; transform:rotate(3deg);}
.ppink-new:nth-child(odd) .ppink-newtxt:after {
border-color:var(--ppink-border1); }
.ppink-new:nth-child(even) .ppink-newtxt:after {
border-color:var(--ppink-border2); transform:rotate(-3deg);}
.ppink-middle .ppink-title{ width:60%; display:inline-block; margin-left:15px;
color:var(--ppink-color2);}
/* LIENS RECHERCHES */
.pan-pink .ppink-right{ width:33%; padding:15px;}
.pan-pink .ppink-links{ display:block; margin-top:15px; height:100px; overflow:auto;}
.pan-pink .ppink-links a{ display:block; margin-left:10px; text-transform:uppercase;
font-family:var(--ppink-font-txt); color:var(--ppink-color3);
font-size:14px; }
.pan-pink .ppink-links a:hover{ color:var(--ppink-color3hover); text-decoration:underline; }
.pan-pink .ppink-links a:before{ content:'•'; margin-right:5px; }
.pan-pink .ppink-recherch{ display:flex; align-items:center; justify-content:space-between; }
.pan-pink .ppink-recherch .ppink-sstitre{ font-size:11px; width:23%;
transform:rotate(-3deg); font-family:var(--ppink-font-title); }
.pan-pink .ppink-recherch a{position:relative; display:block; width:24%; height:50px; }
.pan-pink .ppink-recherch a img{ width:100%; height:100%;}
.ppink-recherch a:after {
content:' '; position:absolute; width:98%; height:45px;
border:1px solid; bottom:2px; left:2px; z-index:9; transform:rotate(3deg);
}
.ppink-recherch:nth-child(odd) a:after {
border-color: var(--ppink-border1); }
.ppink-recherch a span{ color:var(--ppink-color2); position:absolute;
top:50%; left:50%; display:block; transition:500ms;
transform:translate(-50%, -50%) scale(0);
font-family:var(--ppink-font-txt); font-weight:bold; z-index:10; }
.ppink-recherch a:hover:after{ background:var(--ppink-border2-o); border-color:var(--ppink-border2);
transform:rotate(-3deg); transition:500ms;}
.ppink-recherch a:hover span{ transition:500ms; transform:translate(-50%, -50%) scale(1); }
Modifier les couleurs
Pour modifier les couleurs, il faut modifier tout ce qu'il y a dans le :root. Il y a aussi l'image de fond des updates.
C'est ici :
Si jamais vous changer le nom des variables dans le code CSS, il faudra aussi le changer dans le root.
|
|