Le Deal du moment : -67%
Carte Fnac+ à 4,99€ au lieu de 14,99€ ...
Voir le deal
4.99 €

KoalaVolant
KoalaVolant

Panneau d'affichage n°2 Empty Panneau d'affichage n°2

Sam 9 Juil 2022 - 19:27


Mode d'utilisation



- Les couleurs sont modifiables dans le "root"
- Tout d'ailleurs est modifiable sauf la structure (sinon, demander une personnalisation)
- Pour mettre ce panneau d'affichage il vous faudra être fondateur.

Modules > Pages HTML



Aller dans l'endroit indiqué dans le panneau d'admin
Puis créer une nouvelle page, et C/C du code :

Code:
<style>:root{
  --main-txt:#222;
  --degrade:linear-gradient(135deg, #9796f0 10%, #FBC7D4 100%);
  --degrade2:linear-gradient(135deg, #667eea 10%, #764ba2 100%);
  --color-titre:#fff;
  
  --color-event:#FAF0F6;
  --color-animation:#F1EEFB;
  --lienhover:#CBAFE0;
  
  --white:#fff;
  --grey:#f0f0f0;
  
  --font-titre:'Lobster', cursive;
  --font-txt:'Questrial', sans-serif;
  
  }
  
  .pann1ls, .pann1ls *{  box-sizing:border-box;   }
  .pann1ls{   width:100%;
  display:flex;   justify-content:space-between;
  color:var(--main-txt);   font-family:var(--font-txt);   }
  
  .pann1ls .encemoment1, .pann1ls .infosutiles1{   width:36%;  }
  .pann1ls .liensimp1{   width:25%;   }  
  
  .pann1ls h2{
   background:var(--degrade);
  color:var(--color-titre);
  font-family:var(--font-titre);
  text-align:center;
  padding:5px; margin:0px; margin-bottom:5px; font-size:18px; border-radius:5px;
  }
  
  /* en ce moment */
  
  .encemoment1 a{ width:100%; margin:3px 0px; padding:8px; font-size:0.90em; background:#dedede; display:block; color:var(--main-txt); text-decoration:none; border-radius:20px; }
  .encemoment1 span{ display:block; overflow:auto; height:135px; }
  .encemoment1 a:hover{ background:var(--lienhover); transition:500ms; color:var(--white); }
  .encemoment1 .event1{ background:var(--color-event); }
  .encemoment1 .animation1{ background:var(--color-animation); }
  
  /* liens */
  
  .liensimp1{ display:flex; align-items:center; flex-wrap:wrap;  }
  .liensimp1 a{ width:100%; background:var(--degrade2); display:block; padding:5px; margin:3px 0px; margin-top:0px; font-family:var(--font-titre); text-align:center; text-decoration:none; color:var(--white); }
  .liensimp1 a:hover{ background:var(--lienhover); }
  
  /* nos infos utiles */
  
  .infosutiles1 span{ display:block; background:var(--grey); padding:10px; height:135px; overflow:auto; border-radius:20px;}
  
  
</style>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Questrial&display=swap" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><div class="pann1ls">
  <div class="encemoment1">
    <h2>En ce moment</h2>
    <span><a target=_"blank" href="" class="event1">Intrigue importante, blabla, venez voir !</a>
    <a target=_"blank" href="" class="animation1">Animation rigolote à base de trucs rigolos n'hésitez pas à venir vous amuser</a>
    <a target=_"blank" href="" class="event1">Intrigue importante, blabla, venez voir !</a>
    <a target=_"blank" href="" class="animation1">Animation rigolote à base de trucs rigolos n'hésitez pas à venir vous amuser</a>
    </span>
  </div>
  <div class="liensimp1">
    <a target=_"blank" href="">Lien 1</a>
    <a target=_"blank" href="">Lien 1 mais plus long</a>
    <a target=_"blank" href="">Lien 1</a>
    <a target=_"blank" href="">Lien 1 mais plus long</a>
  </div>
  <div class="infosutiles1"><h2>Nos informations utiles :</h2>
    <span>      Avatar à telle taille<br>
      Chronologie qui est ça<br>
      Météo magnifique
      </span>
      </div>
      </div>

Changement de template



Juste avant
(sur PHPBB2 en tout cas), dans overall_header
Et mettez ça :

Code:
<center><iframe scrolling="no" frameborder="0" marginheight="0" style="width: 850px; height: 300px;" src="LIEN DE VOTRE PAGE"></iframe></center>
            

Pour "LIENDEVOTREPAGE", c'est le lien de votre page HTML que vous avez crée.
Revenir en haut

Partenaires footer

RPG-Chevalier Logo WyvArtem Image hébergée gratuitement chez Image hébergée gratuitement chez