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.