Modules Pages HTML

Pour installer la PA il faut
1. Aller dans le panneau d'admin Modules > Pages HTML
2. Créer une nouvelle page HTML
3. coller ça :

Code:

<style>
:root{
  --fond-pa:url('https://images.pexels.com/photos/1407305/pexels-photo-1407305.jpeg');
  --main-color:#95B46A;
  --second-color:#fff;
  --third-color:#000;
  --seven-color:#3E5622;
  --grisgris:#e7e6e6;
 
}
  
  .pa-wrap img{
    -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
  }
  
  a{
  text-decoration:none;
  color:var(--main-color);
      font-family: Oswald, sans-serif;
      font-weight: 500;
    font-size: 17px;
    letter-spacing: 3px;
  }
  
  a:hover{
  color:var(--six-color);
  }
  
  .pa-wrap{
width:877px;
  font-family:Verdana;
  font-size:12px;
  line-height:16px;
}
  
  .pa-wrap *{
  box-sizing:border-box;
  }

.pa-wrap h1{
  background-image:var(--fond-pa);
  background-attachment:fixed;
  background-size:130%;
  padding:30px 0px;
  text-align:center;
    color: #fff;
    font-family: Oswald, sans-serif;
    font-size: 35px;
    text-transform: uppercase;
    letter-spacing: 4px;
  margin:0px 0px -10px 0px !important;
}
  
  .pa-wrap h2{
  font-size:16px;
  line-height:18px;
  color:var(--seven-color) !important;
  border-bottom:var(--seven-color) 2px solid;
  padding-bottom:3px;
  text-transform:uppercase;
  letter-spacing:3px;
        font-family: Oswald, sans-serif;
  margin-bottom:5px;
  transition:500ms;
  display:block;
}
  
  /**** FAIRE LE FLEX ****/
  
  .pa-1, .pa-2, .pa-3{
  display:flex;
padding: 0px 15px;
  }
  
  .pa-1{
      padding: 10px 15px;
  }
  
  .bloc{
  background-color:var(--grisgris);
  padding:10px;
  overflow:auto;
  text-align:justify;
  position:relative;
  z-index:13;
  }
  
  .purple{
  background-color:var(--main-color);
  }
  
  /**** PARTIE 1 *****/

  .contxt{
    width: 380px;
    height: 150px;
    font-size: 11px;
    line-height: 15px;
  }
  
  .contxt a{
  text-align:center;
  display:block;
  margin-top:10px;
  }
  
  .purple.link-utiles{
width: 150px;
    height: 212px;
    padding: 10px;
    -moz-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
    z-index: 7;
    position: relative;
  }
  
  .link-utiles a{
  color:#fff !important;
  margin:7px 0px;
  text-align:center;
  letter-spacing:0px;
  display:block;
  font-size:17px;
  -moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
  }
  
  .link-utiles a:hover{
  color:var(--seven-color) !important;
  }
  
  .infoevent{
  width:360px;
  }
  
  .infoevent .event{
  height:80px;
  overflow:auto;
  }
  
  .infoevent h2{
  text-align:right;
  }
  
  .infoevent .infos{
  height:150px;
  }
  
  /****Partie 2 ***/
  
  .pa-2{
  justify-content:space-around; align-items:center; position:relative; top:-20px;
  }
  
  .pa-wrap .staff{
  width:270px;
  }
  
.staff-content{
  display:flex;
  }
  
  .staff-content img{
  width:85px; height:85px; object-fit:cover;
  }
  
  .staff-content div{
  margin-right:10px;
  }
  
  .staff-content span{
  background-color:#E8E8E8;
  padding:5px;
    text-align:center;
  display:block;
  width:85px;
  min-height: 91px;
  height:91px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  
  .staff-content h3{
  font-size:15px;
  color:var(--main-color);
  font-weight:normal;
  text-transform:uppercase;
  margin:0;
          font-family: Oswald, sans-serif;
  margin-bottom:5px;
  }
  
  .staff-content strong, .staff-content em{
  font-size:11px;
  line-height:12px;
  }
  
  .pv, .tops-sites{
  width:195px;
  }
  
  .pv h2{
  text-align:center;
  }
  
  .pv div{
  display:flex;
  flex-wrap:wrap;
  }
  
  .pv div a{
  display:block;
  margin:5px;
  }
  
  .pv a span{
  display:block;
  width:55px; height:50px;
  background-color:#E8E8E8;
  padding:5px;
    text-align:center;
  margin-top:-50px;
  font-size:12px;
  letter-spacing:0;
  line-height:30px;
  position:relative; z-index:13;
  -moz-transform: scale(0) rotate(180deg);
-webkit-transform: scale(0) rotate(180deg);
-o-transform: scale(0) rotate(180deg);
-ms-transform: scale(0) rotate(180deg);
transform: scale(0) rotate(180deg);
  transition:500ms;
  }
  
  .pv a:hover span{
  -moz-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
  }
  
    
  .pv img{
  width:55px; height:50px; object-fit:cover; position:relative; z-index:7;   }
  
  .pv .lien-pv{
text-align:center;
  margin-top:10px;
  display:block;
  }

  .tops-sites{
  height:146px;
  -moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
  }
  
  .tops-sites h2{
  color:#fff !important;
  border:none;
  text-align:center;
  -moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
  }
  
  .tops-sites div{
  display:flex;
  }
  
  .tops-sites img{
  width:44px;
  }
  
  .tops-sites a{
  display:block;
  margin:5px;
  }
  
  .toplink{ color:#fff !important; text-align:center;}
  /******* PARTIE 3 *********/
  
  .pa-3{
  justify-content:space-around;
  }
  
  .pa-3 .part{
  width:30%;
  }
  
  .pa-3 .news{
  width:62%;
  }
  

  .pa-3 .part img{
    width: 35px;
    height: 35px;
  object-fit:cover;
  }
  
  .part span{
  display:block;
  text-align:center;
  margin-top:10px;
  }
  
  .pa-3 .list-news{
    height: 123px;
  font-size:11px;
  overflow:auto;
  }

</style><link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre|Oswald&display=swap" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><div class="pa-wrap">
  <h1>Bienvenue à FORUM</h1>
  <div class="pa-1">
    <div class="bloc-ct"><h2>Notre Histoire</h2>
    <div class="bloc contxt">"Ship of the imagination network of wormholes cosmos across the centuries concept of the number one a still more glorious dawn awaits.
      The sky calls to us at the edge of forever laws of physics the sky calls to us something incredible is waiting to be known inconspicuous motes of rock and gas?
      Made in the interiors of collapsing stars hydrogen atoms a mote of dust suspended in a sunbeam invent the universe a mote of dust suspended in a sunbeam kindling the energy hidden in matter
      and billions upon billions upon billions upon billions upon billions upon billions upon billions."<br><br>
      Ship of the imagination network of wormholes cosmos across the centuries concept of the number one a still more glorious dawn awaits.
      The sky calls to us at the edge of forever laws of physics the sky calls to us something incredible is waiting to be known inconspicuous motes of rock and gas?
      Made in the interiors of collapsing stars hydrogen atoms a mote of dust suspended in a sunbeam invent the universe a mote of dust suspended in a sunbeam kindling the energy hidden in matter
      and billions upon billions upon billions upon billions upon billions upon billions upon billions.
          <a target="_blank" href="https://welcometodd.forumactif.com/t4-contexte-de-dawn-dale" >En savoir plus</a>
          </div>
        </div>
        
          <div class="purple link-utiles">
            <a target="_blank" href="#">Lien</a>
                        <a target="_blank" href="#">Lien</a>
                        <a target="_blank" href="#">Lien</a>
                        <a target="_blank" href="#">Lien</a>
                        <a target="_blank" href="#">Lien</a>
                        <a target="_blank" href="#">Lien</a>
                        <a target="_blank" href="#">Lien</a>
                        <a target="_blank" href="#">Lien</a>
          </div>
          
          <div class="infoevent">
            <h2>Informations supplémentaires</h2>
            <div class="bloc infos">- I know this is the final release but can we add more features? <br>
              - could you do an actual logo instead of a font, for can it be more retro I really think this could go viral, we are a big name to have in your portfolio, <br>
              - nor we are your relatives, but can we make it shorter?. I really think this could go viral. Can we barter services?. <br>
              </div>
            </div>
          </div>      
          <div class="pa-2">
            <div class="staff"><h2>Notre équipe</h2>
              <div class="staff-content">
                <div><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"><span><h3>Pseudo</h3><strong>Pseudo<br>Fonda</strong></span></div>
                  <div><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"><span><h3>Pseudo</h3><strong>Pseudo<br>Rôle</strong></span></div>
                    <div><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"><span><h3>Pseudo</h3><strong>Pseudo<br>Rôle</strong></span></div>
            </div>
                  </div>
                  
                  <div class="pv"><h2>Nos persos à prendre</h2>
                    <div><a target="_blank" href="#"><img src="https://66.media.tumblr.com/844a3af90a57eb115d005b50d5780716/tumblr_pl6rkv5vAK1xpjiuvo7_250.png"><span>Perso</span></a>
                      <a target="_blank" href="#"><img src="https://66.media.tumblr.com/844a3af90a57eb115d005b50d5780716/tumblr_pl6rkv5vAK1xpjiuvo7_250.png"><span>Perso</span></a>
                        <a target="_blank" href="#"><img src="https://66.media.tumblr.com/844a3af90a57eb115d005b50d5780716/tumblr_pl6rkv5vAK1xpjiuvo7_250.png"><span>Perso</span></a>
                          <a target="_blank" href="#"><img src="https://66.media.tumblr.com/844a3af90a57eb115d005b50d5780716/tumblr_pl6rkv5vAK1xpjiuvo7_250.png"><span>Perso</span></a>
                            <a target="_blank" href="#"><img src="https://66.media.tumblr.com/844a3af90a57eb115d005b50d5780716/tumblr_pl6rkv5vAK1xpjiuvo7_250.png"><span>Perso</span></a>
                              <a target="_blank" href="#"><img src="https://66.media.tumblr.com/844a3af90a57eb115d005b50d5780716/tumblr_pl6rkv5vAK1xpjiuvo7_250.png"><span>Perso</span></a>
            
                                  </div>
                                  <span class="lien-pv"><a target="_blank" href="https://welcometodd.forumactif.com/f18-predefinis">Prédéfinis</a> - <a target="_blank" href="https://welcometodd.forumactif.com/f17-scenarios">Scénarios</a></span>
                                </div>
                                
                                <div class="tops-sites purple"><h2>Votez !</h2>
                                  <div><a target="_blank" href="http://www.root-top.com/topsite/pubrpgdesign/in.php?ID=2210"><img src="https://i.servimg.com/u/f30/19/45/51/53/topsit10.png"></a>
                                    <a target="_blank" href="http://www.root-top.com/topsite/cda2/in.php?ID=532"><img src="https://i.servimg.com/u/f30/19/45/51/53/topsit10.png"></a>
                                      <a target="_blank" href="http://www.root-top.com/topsite/loukoum/in.php?ID=984"><img src="https://i.servimg.com/u/f30/19/45/51/53/topsit10.png"></a></div>
                                      <a class="toplink" href="https://welcometodd.forumactif.com/t55-voter-sur-les-tops-sites" target="_blank">Et récupérez vos points</a>
                                      </div>
                                    </div>
                                    
                                    <div class="pa-3"><div class="part"><h2>Partenaires</h2>
                                      <div class="bloc list-part">
                                            <a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"></a>
                                            <a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"></a>
                                            <a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"></a>
<a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"></a>
                                            <a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"></a>
                                            <a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"></a>
  <a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"></a>
                                            <a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"></a>
                                            <a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"></a>
     <a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"></a>
                                            <a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"></a>
                                            <a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/icon-f11.jpg"></a>                                        
                                                              
                                      </div>
                                      <span class="lien-part"><a target="_blank" href="https://welcometodd.forumactif.com/t33-demander-a-etre-notre-ami">Vous ?</a> - <a target="_blank" href="https://welcometodd.forumactif.com/t96-listing-des-partenaires">Plus</a></span>
                                                </div>
                                                
                                                <div class="news"><h2>News</h2>
                                                  <div class="bloc list-news">
                                                    <strong>16/08/2019</strong> Ouverture officielle du forum !<br>
                                                    <strong>30/07/2019</strong> Pré-Ouverture du forum, wouhou ! Merci d'avoir suivi le projet :3
                                                  </div>
                                                </div>
          </div>

Page d'accueil

Pour mettre la page d'accueil, il faut récupérer le lien de votre page HTML où il y a la PA et aller dans Affichage > Page d'accueil > Généralités

Puis copier ça

Code:

<iframe scrolling="no" frameborder="0" marginheight="0" style="width: 880px; height: 680px;" src="   URLDELAPAGE"></iframe>

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