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{
  --main-color:#054769;
  --second-color:#fff;
  --third-color:#000;
  --four-color:#B7C9CC;
  --seven-color:#608186;
  }
  
  .pubip{
  padding:20px;
  width:530px;
  margin:0 auto;
  }
  
  .fopub{
  background-color:#fff;
  padding:15px;
    border:3px solid var(--four-color);
  }
  
  .fopub img{
  width:500px;
  margin:0 auto;
  }
  
  .fopub a:link, .fopub a:visited, .fopub a:hover, .fopub a{
  text-decoration:none;
  color:var(--main-color);
  }
  
  .cxtpub{
  text-align:justify;
  font-family:Verdana;
  color:var(--six-color);
  font-size:12px;
  line-height:14px;
  width:450px;
  height:350px;
  overflow:auto;
  margin:0 auto;
  }
  
  .cxtpub a{ font-weight:bold; background:var(--four-color); padding:5px; border-radius:5px; margin:5px 0px; display:block;}
  
  .cxtpub img{
  float:left;
  width:100px; height:100px;
  object-fit:cover;
  border:var(--main-color) 4px solid;
  -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
 
}
  
  .lienspub{
  text-align:center;
      text-align: center;
    display: flex;
    flex-wrap: wrap;
  width:175px;
  margin-left:15px;
  }
  
  .lienspub a{
        font-family: Oswald, sans-serif;
  text-align:center;
  font-size:17px;
  text-transform:uppercase;
  border-radius:5px;
  font-weight:bold;
      margin: 5px 0px;
  background:var(--four-color);
  color:var(--main-color); transition:500ms;
  width:100%;
  padding:5px; position:relative;
  }
  
  .lienspub a:hover{ background:#CFDBDD; transition:500ms; }
  
    .infopub{
  float:left;
  width:200px;
  font-family:Verdana;
  color:#5B3943;
  font-size:12px;
  line-height:14px;
  }
  
  .staffpub h2, .inlipub h1{
      font-family: Oswald, sans-serif;
  color:var(--main-color);
  font-weight:normal;
  text-align:center;
  border-bottom:var(--four-color) 2px dotted;
  padding-bottom:3px;
  font-size:22px;
  }
 
  
  .inlipub{
  width:450px;
  display:flex;
  justify-content:center;
  margin:0 auto;
  padding-top:25px;
      align-items: center;
  }
  
  .inlipub img{
  width:190px;
  border:var(--main-color) 4px solid;
  height:90px;
  object-fit:cover;
  }
  
    
  .staffpub{
  width:480px;
  margin:0 auto;
  clear:both;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  }
  
  .staffpub div{
  float:left;
  margin-left:5px;
  }
  
  .staffpub h2{
  width:100%;
  }
  
  .staffpub img{
  width:130px;
  }
  
    .staffpub h1:hover{
  background-color:var(--seven-color);
  }
  
    .staffpub h1{
  background-color:var(--main-color);
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
  color:#fff;
  padding:5px;
  width:120px;
  font-family:Verdana;
  text-align:center;
  font-size:10px;
  font-weight:normal;
  line-height:11px;
  margin:0px;
  }
  
  .rejoindre{
        font-family: Oswald, sans-serif;
  color:var(--main-color);
  font-weight:normal;
  text-align:center;
  border-bottom:var(--four-color) 2px dotted;
  padding-bottom:3px;
  font-size:25px;
  text-transform:uppercase;
  }

.koala{display:flex; justify-content:center; font-size:8px; letter-spacing:5px; }
  
</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" />
<link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC" rel="stylesheet"> <div class="pubip"><div class="fopub"><a target="blank" href="#"><img src="https://zupimages.net/up/22/18/qsta.png"></a><br>
 <br><div class="cxtpub"><img src="https://i.ibb.co/KGLMt7L/Neil-Newbon12.gif">Create spaces to explore whatâ€:tm:s next. Looks great, can we try it a different way.
   Game plan we need to build it so that it scales, we should have a meeting to discuss the details of the next meeting. Optics sacred cow. No scraps hit the floor let's pressure test this. Action item pushback high-level, so one-sheet, for what are the expectations.
   Draft policy ppml proposal low hanging fruit for please submit the sop and uat files by next monday and deliverables reach out. UI. Peel the onion future-proof,
   for product management breakout fastworks but sacred cow, yet horsehead offer. Screw the pooch. It's a simple lift and shift job. Code what's our go to market strategy? <br><br>
   let's pressure test this, for throughput or draw a line in the sand circle back and high performance keywords. Circle back form without content style without meaning for can we parallel path.
   Idea shower prairie dogging, and cc me on that. Make sure to include in your wheelhouse circle back around. Regroup the right info at the right time to the right people we have put the apim bol,
   temporarily so that we can later put the monitors on, but we just need to put these last issues to bed touch base. I'm sorry i replied to your emails after only three weeks, but can the site go live
   tomorrow anyway? out of scope highlights turn the ship. Optimize for search collaboration through advanced technlogy. Flesh that out level the playing field, on-brand but completeley fresh
   marginalised key performance indicators or c-suite drop-dead date. <br /><a target="_blank" href="https://welcometodd.forumactif.com/t4-contexte-de-dawn-dale">Contexte complet</a> </div>
  <div class="inlipub">
    <div class="infopub"><h1>Informations (ou event)</h1><img src="https://media0.giphy.com/media/1zrFLK1pUix1K/source.gif">
  <br><br>• Avatar réel et irréels possibles, pour un format de 200*320<br>
• Avatar réel et irréels possibles, pour un format de 200*320<br>
• Avatar réel et irréels possibles, pour un format de 200*320<br>
• Avatar réel et irréels possibles, pour un format de 200*320<br>
    • Avatar réel et irréels possibles, pour un format de 200*320
            </div>
    <div class="lienspub">
  <br><a target="_blank" href="hhttps://welcometodd.forumactif.com/t7-reglement-du-forum">• Réglement</a>
  <a target="_blank" href="https://welcometodd.forumactif.com/t13-groupes">• Groupes</a>
  <a target="_blank" href="https://welcometodd.forumactif.com/f40-listings">• Listings</a>
  <a target="_blank" href="https://welcometodd.forumactif.com/t14-creatures-etres-uniques">• Créatures</a>
  <a target="_blank" href="https://welcometodd.forumactif.com/t11-dawn-dale">• Dawn Dale</a>
  <a target="_blank" href="https://welcometodd.forumactif.com/f10-le-portail-des-invites">• Invités</a>
   </div>
</div><br><div class="staffpub"><h2>Le staff (ou prédéfinis, au choix)</h2>
    <div><img src="https://i.ibb.co/nkhJ7YX/Neil-Newbon11.gif"><h1><b>Pseudo du perso</b><br>Fonda</h1></div>
       <div><img src="https://i.ibb.co/nkhJ7YX/Neil-Newbon11.gif"><h1><b>Pseudo du perso</b><br>Fonda</h1></div>
          <div><img src="https://i.ibb.co/nkhJ7YX/Neil-Newbon11.gif"><h1><b>Pseudo du perso</b><br>Fonda</h1></div>
</div>
    <div><h1 class="rejoindre">N'hésitez pas à nous rejoindre !</h1></div>
    </div>
</div><a href="https://pisrale.forumactif.com/" class="koala">KoalaVolant</a>

Fiche de partenariat

Et enfin il faut copier ça pour avoir la fiche de partenariat :
(le lien c'est le lien de la page HTML )

Puis copier ça

Code:

<iframe src="https://welcometodd.forumactif.com/h2-fichedepub-dawn" style="width: 570px; height: 1245px;" marginheight="0" frameborder="0" scrolling="no"></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