Pour installer le HTML, rendez vous dans panneau d'administration > Affichage > Généralité, puis copiez/coller ceci :

Code:

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />  <link rel="stylesheet" href="https://solrainha.github.io/saturnicons/saturnicons.css" />  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" />
<div class="hl_pa_welcome">
                                                                      ⊰ welcome to (nom du forum) {USERNAME}                                                                  
</div>
  
<div class="hl_pa">
                                                                                                                                             
   <div class="hl_pa_left">
                                                                                                                                                  
      <div class="hl_pa_title">
                                                                            qui contacter ?                                                                  
      </div>
                                                                                                                                                  
      <div id="London" class="tabcontent">
                                                                                                                                                       
         <div class="staff_img">
                                                                               <img src="https://via.placeholder.com/60x80" />                                                                  
         </div>
                                                                                                                                                       
         <div class="staff_inf">
                                                                                         <d>NOM DU STAFFEUX</d><br />          <em>rang - pseudo</em><br />          <a href="/">profil</a> ⊰ <a href="/">contacter</a>                                                                          
         </div>
                                                                                                                                                     
      </div>
                                                                                                                                                  
      <div id="Paris" class="tabcontent">
                                                                                                                                                   
         <div class="staff_img">
                                                                               <img src="https://via.placeholder.com/60x80" />                                                                  
         </div>
                                                                                                                                                       
         <div class="staff_inf">
                                                                                         <d>NOM DU STAFFEUX</d><br />          <em>rang - pseudo</em><br />          <a href="/">profil</a> ⊰ <a href="/">contacter</a>                                                                          
         </div>
                                                                                                                                           
      </div>
                                                                                                                                                  
      <div id="Tokyo" class="tabcontent">
                                                                                                                                                   
         <div class="staff_img">
                                                                               <img src="https://via.placeholder.com/60x80" />                                                                  
         </div>
                                                                                                                                                       
         <div class="staff_inf">
                                                                                         <d>NOM DU STAFFEUX</d><br />          <em>rang - pseudo</em><br />          <a href="/">profil</a> ⊰ <a href="/">contacter</a>                                                                          
         </div>
                                                                                                                                               
      </div>
                                                                                                                                      
      <div id="Sidney" class="tabcontent">
                                                                                                                                                   
         <div class="staff_img">
                                                                               <img src="https://via.placeholder.com/60x80" />                                                                  
         </div>
                                                                                                                                                       
         <div class="staff_inf">
                                                                                         <d>NOM DU STAFFEUX</d><br />          <em>rang - pseudo</em><br />          <a href="/">profil</a> ⊰ <a href="/">contacter</a>                                                                          
         </div>
                                                                                                                                               
      </div>
                                                                                                                                      
      <div id="Lux" class="tabcontent">
                                                                                                                                                   
         <div class="staff_img">
                                                                               <img src="https://via.placeholder.com/60x80" />                                                                  
         </div>
                                                                                                                                                       
         <div class="staff_inf">
                                                                                         <d>NOM DU STAFFEUX</d><br />          <em>rang - pseudo</em><br />          <a href="/">profil</a> ⊰ <a href="/">contacter</a>                                                                          
         </div>
                                                                                                                                               
      </div>
                                                                                                                                                  
      <div class="tab">
                                                                                                                                                       
         <button class="tablinks" onmouseover="openCity(event, 'London')" id="defaultOpen">
                                                                                                                                          
         </button>
                                                                                                                                                       
         <button class="tablinks" onmouseover="openCity(event, 'Paris')">
                                                                                                                                          
         </button>
                                                                                                                                                       
         <button class="tablinks" onmouseover="openCity(event, 'Tokyo')">
                                                                                                                                          
         </button>
                                                                                                                                         
         <button class="tablinks" onmouseover="openCity(event, 'Sidney')">
                                                                                                                                          
         </button>
                                                                                                                                         
         <button class="tablinks" onmouseover="openCity(event, 'Lux')">
                                                                                                                                          
         </button>
                                                                                                                                                     
      </div>
                                                                                                                                                  
      <div class="clearfix">
                                                                                                                                             
      </div>
                                                                                <script>
        document.getElementById("defaultOpen").click();
      </script>                                                                          
      <div class="hl_pa_news">
                                                                  <span>xx.xx.2023 </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent maximus risus eget sem pulvinar, quis congue diam malesuada. Etiam tempus volutpat dolor, at facilisis ipsum auctor quis. Praesent accumsan, ipsum consequat interdum venenatis, orci mi bibendum elit, eu pretium diam sem sit amet ligula. Praesent arcu justo, accumsan ac odio non, ultricies malesuada ante. Sed finibus laoreet tellus ac faucibus. Donec non nulla neque. Nam suscipit ullamcorper mollis. Integer et lacinia ante, eu finibus felis. Maecenas vel ipsum nec sapien lacinia lobortis at sed sapien. Nulla id orci sed nisi iaculis ornare non non ipsum. Vestibulum cursus quis nulla at rhoncus. Cras at arcu rhoncus, luctus quam non, lacinia mauris. Ut et vehicula elit. Curabitur in dolor magna. Sed eu porttitor tortor. Fusce rutrum et ex nec maximus.
      </div>
                                                                                                                                                
   </div>
                                                                                                                                             
   <div class="hl_pa_middle">
                                                                                                                                                  
      <div class="hl_pa_cont_ext">
                                                                                                                                                       
         <div class="hl_pa_cont_int">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent maximus risus eget sem pulvinar, quis congue diam malesuada. Etiam tempus volutpat dolor, at facilisis ipsum auctor quis. Praesent accumsan, ipsum consequat interdum venenatis, orci mi bibendum elit, eu pretium diam sem sit amet ligula. Praesent arcu justo, accumsan ac odio non, ultricies malesuada ante. Sed finibus laoreet tellus ac faucibus. Donec non nulla neque. Nam suscipit ullamcorper mollis. Integer et lacinia ante, eu finibus felis. Maecenas vel ipsum nec sapien lacinia lobortis at sed sapien. Nulla id orci sed nisi iaculis ornare non non ipsum. Vestibulum cursus quis nulla at rhoncus. Cras at arcu rhoncus, luctus quam non, lacinia mauris. Ut et vehicula elit. Curabitur in dolor magna. Sed eu porttitor tortor. Fusce rutrum et ex nec maximus.
         </div>
                                                                                                                                                     
      </div><select onchange="location = this.value" class="hl_prts"><option selected="selected">Nos principales alliances</option> <option value="/">nom du forum</option>    <option value="/">nom du forum</option>    <option value="/">nom du forum</option>    <option value="/">nom du forum</option>    <option value="/">nom du forum</option></select>                                                                      
   </div>
                                                                                                                                             
   <div class="hl_pa_left">
                                                                                                                                                  
      <div class="hl_pa_title">
                                                                            most wanted                                                                  
      </div>
                                                                                                                                                  
      <div class="hl_pa_predef">
                                                                    <a target="_blank" href="/"><img src="https://via.placeholder.com/50x50" /></a> <a target="_blank" href="/"><img src="https://via.placeholder.com/50x50" /></a><a target="_blank" href="/"><img src="https://via.placeholder.com/50x50" /></a><a target="_blank" href="/"><img src="https://via.placeholder.com/50x50" /></a><a target="_blank" href="/"><img src="https://via.placeholder.com/50x50" /></a>                                                                        
      </div>
                                                                                                                                                  
      <div class="hl_pa_title" style="margin-top:10px;">
                                                                            accio vote                                                                  
      </div>
                                                                                                                                                  
      <div class="hl_pa_vote">
                                                                            <a target="_blank" href="/"><span class="material-icons">auto_awesome</span></a><a target="_blank" href="/"><span class="material-icons">auto_awesome</span></a><a target="_blank" href="/"><span class="material-icons">auto_awesome</span></a>    <a target="_blank" href="/"><span class="material-icons">auto_awesome</span></a><a target="_blank" href="/"><span class="material-icons">auto_awesome</span></a><a target="_blank" href="/"><span class="material-icons">auto_awesome</span></a>                                                              
      </div>
                                                                                                                                                  
      <div class="hl_pa_cred">
         Page d'accueil réalisée par <a target="_blank" href="https://epsilon-ls.forumactif.com/">EPSILON</a>.
      </div>
                                                                                                                                                
   </div>
                                                                                                                                           
</div>
 <script>function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").onmouseover();
</script>

Si vous souhaitez utiliser les polices d'écritures ainsi que les liens d'hébergement des icônes (Material Icons pour n'en citer qu'un), rendez-vous dans Affichage > Templates > Général > Overall_header, juste après la balise {CSS} qui est presque au tout début du template. Copiez/collez simplement ce code à l'endroit désigné et ainsi vous pourrez les utiliser partout sur le forum.

Code:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://solrainha.github.io/saturnicons/saturnicons.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" />

Ensuite, il faut ajouter le CSS, notre point décoration. Pour cela, allez dans Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS puis copiez collez le code suivant :

Code:

:root {
  --lavender: #e9e2d7;
  --pink: #e8d1cd;
  --sage: #e3e8cf;
  --thyme: #d6e6cf;
  --laurel: #d0e7e2;
  --whazel: #d99283;
  --darkgrey: #1e3d42;
  --blue: #f1cec4;
  --purple: #d66754;
  --line: #0c1f23;
  --shadow: #606060;
  --linku: #d2d2d2;
  --rank: #888;
  --color-delete: #e74c3c;
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}
.hl_pa * {
  scrollbar-width: thin;
  scrollbar-color: #d66754 #2a2a2a;
}
.hl_pa_welcome {
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  background-image: linear-gradient(-225deg, #f1cec4 0%, #d66754 100%);
  color: var(--darkgrey);
  text-transform: uppercase;
  padding: 2px;
  border-radius: 6px;
  font: 15px Playfair Display;
  letter-spacing: 2px;
  width:810px;
  margin:0px auto 10px auto;
}
.hl_pa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width:810px;
  margin:0px auto;
  border-radius: 6px;
  background: var(--darkgrey);
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  word-break: initial;
}
.hl_pa_left {
  width: 255px;
  border-radius: 6px;
}
.hl_pa_title {
  text-align: center;
  background: -webkit-linear-gradient(-225deg, #f1cec4 0%, #d66754 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font: 20px Montserrat;
  border-bottom: 1px solid #d66754;
  margin-bottom: 10px;
  text-transform: uppercase;
  padding-bottom: 2px;
  letter-spacing: 2px;
}
.hl_pa_news {
  border:solid 1px var(--shadow);
  border-radius;6px;
  padding:10px;
  color:var(--linku);
  font:11px Montserrat;
  text-align:justify;
  border-radius: 6px;
  height:126px;
  overflow:auto;
}
.hl_pa_news span {
  background: -webkit-linear-gradient(-225deg, #f1cec4 0%, #d66754 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tab {
  text-align: center;
  width: 170px;
  margin: -26px 0px 20px 70px;
}
.tab button {
  background: var(--linku);
  padding: 5px;
  border-radius: 100%;
}
.tab button.active {
  background-color: var(--purple);
}
.tabcontent {
  background-color: var(--line);
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  border-radius: 6px;
  height: 100px;
}
.staff_img {
  width: 60px;
  height:80px;
  overflow:hidden;
  display: inline-block;
  vertical-align: top;
  border-radius:6px;
}
.staff_img img {
  width:100%;
  filter:grayscale(100%);
}
.staff_inf {
  color: var(--linku);
  font: 11px Montserrat;
  padding: 10px 0px 10px 0px;
  text-align: center;
  width: 165px;
  display: inline-block;
  vertical-align: top;
}
.staff_inf em {
  font-size:10px;
}
.staff_inf a {
  color: var(--blue);
  border-bottom: 2px dotted var(--blue);
}
.hl_pa_middle {
  width: 230px;
  border-radius: 6px;
}
.hl_pa_cont_ext {
  width: 100%;
  border-radius: 6px;
  padding: 10px;
  background-image: url(https://via.placeholder.com/239x230);
  background-size: 100%;
  transition: all 800ms;
  height: 239px;
  margin-bottom: 10px;
}
.hl_pa_cont_int {
  transition: all 800ms;
  text-align: justify;
  padding: 10px;
  background: var(--line);
  border-radius: 6px;
  color: var(--linku);
  font: 11px Montserrat;
  height: 219px;
  overflow: auto;
  opacity: 0;
  transform: scale(0);
}
.hl_pa_cont_ext:hover .hl_pa_cont_int {
  transform: scale(1);
  opacity: 1;
  transition: all 800ms;
}
.hl_prts {
  width:100%;
  padding:5px;
  border-radius:6px;
  background:var(--line);
  color:var(--linku);
  font:12px Playfair Display;
}
.hl_pa_predef {
  text-align:center;
  border-radius:6px;
}
.hl_pa_predef img {
  width: 39px;
  height: 39px;
  margin: 0px 4px;
  border-radius: 6px;
  object-fit: cover;
}
.hl_pa_vote {
  text-align: center;
}
.hl_pa_vote span {
  margin: 0px 5px;
  font-size: 30px;
  background: -webkit-linear-gradient(-225deg, #f1cec4 0%, #d66754 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hl_pa_cred {
  padding: 10px;
  margin-top: 10px;
  border: solid 1px var(--shadow);
  color: var(--linku);
  text-align: justify;
  border-radius: 6px;
  font: 9.5px Playfair Display;
  overflow: auto;
  height: 103px;
}

Ici, vous avez tout un pannel de base de couleur renseignés dans le "root", utilisable partout dans le code. Le "root" permet de centraliser des couleurs sous un nom (exemple, ici notre couleur "purple" est en réalité un vert, surprise !). N'héstiez pas en abuser car, au moment d'une mise à jour des couleurs, il n'y aura que les valeurs dans le root à changer et ça fera le travail tout seul.

Enjoy !