Le Deal du moment : -37%
Ventilateur ultra silencieux Rowenta Turbo Silence ...
Voir le deal
75 €

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Présente quelques heures par semaine =)
----
Idea Viens papoter avec nous sur le discord

Messages : 3991
https://tambouille-raleuses.forumactif.com/

PA 6 blocs (contexte - news - staff - sujets importants - votes - partenaires) Empty PA 6 blocs (contexte - news - staff - sujets importants - votes - partenaires)

Dim 2 Juin 2019 - 10:14

En-tête 6 blocs (contexte - news - staff - sujets importants - votes - partenaires)


Hello !

Ça c'est un long titre  hihi ! Comme d'habitude quoi Smile
Bien entendu, les blocs peuvent changer d'utilité ! Voilà donc un aperçu :
PA 6 blocs (contexte - news - staff - sujets importants - votes - partenaires) Pa_fle10
Et pour voir les effets sur les avatars, tu peux te rendre ici : [il suffit de cliquer ]
Exclamation La largeur est en %, elle peut être mise en px si tu le souhaites.

Idea Il faut avoir accès aux templates pour l'installation, mais il n'y en a plus besoin pour mettre à jour la PA.

Exclamation  LS réalisé à partir de la commande de Fleur' (et avec son accord) pour Les écos Friends , n'hésites pas à aller y faire un tour.
Installation

L'installation va se faire en plusieurs étapes : on va créer une page HTML, modifier un template, ajouter un peu de javascript et modifier la CSS du forum.

Etape 1 : Créer notre page HTML

Dans le PA > Modules > Gestion des pages HTML > Créer une nouvelle page en mode avancé
On y met un titre, et on colle ce code :
Code:
<div class="en-tete">
 <div class="titre">
 Bienvenue sur <i>Nom du forum</i>
 </div>
 <div class="flex">
 <div class="bloc">
 <div class="titre-bloc">
 Le principe du forum
 </div>
 <div class="scroll">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac efficitur enim. Proin dictum malesuada arcu vitae efficitur. Sed a mi id mauris accumsan consectetur. Nullam vulputate dignissim nisl, at accumsan elit dignissim non. Vestibulum risus odio, porta et pellentesque eu, mollis id leo. Nunc id gravida elit. Ut ornare aliquet nunc sit amet dictum.
 </p>
 <p>
 Aenean eros ex, tempor sed neque eget, facilisis scelerisque massa. Morbi nec vestibulum sapien, nec consequat orci. Quisque iaculis erat at velit vehicula blandit. Etiam malesuada viverra porttitor. Etiam feugiat dui lorem, a vestibulum massa pellentesque et. Mauris sed faucibus urna, non sollicitudin metus. Vestibulum nisl magna, consectetur nec nulla vulputate, porta porttitor odio.
 </p>
 </div>

 <p class="center"><a href="#">En savoir plus</a></p>
 </div>
 <div class="bloc">
 <div class="titre-bloc">
 Le staff
 </div>
 <div class="flex wrap">
 <!--
 PARTIE A COPIER / COLLER OU SUPPRIMER POUR AJOUTER / SUPPRIMER UN AVATAR
 <div class="membre_staff">
 <a href="http://tambouille-raleuses.forumactif.com/u2">
 <img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="Fleur'" />
 <p>Pseudo <br/> Rang
 </p>
 </a>
 </div>
 -->
 <div class="membre_staff">
 <a href="http://tambouille-raleuses.forumactif.com/u2">
 <img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="Fleur'" />
 <p>Pseudo <br/> Rang
 </p>
 </a>
 </div>
 <div class="membre_staff">
 <a href="http://tambouille-raleuses.forumactif.com/u2">
 <img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="Fleur'" />
 <p>Pseudo <br/> Rang
 </p>
 </a>
 </div>
 <div class="membre_staff">
 <a href="http://tambouille-raleuses.forumactif.com/u2">
 <img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="Fleur'" />
 <p>Pseudo <br/> Rang
 </p>
 </a>
 </div>
 <div class="membre_staff">
 <a href="http://tambouille-raleuses.forumactif.com/u2">
 <img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="Fleur'" />
 <p>Pseudo <br/> Rang
 </p>
 </a>
 </div>
 <div class="membre_staff">
 <a href="http://tambouille-raleuses.forumactif.com/u2">
 <img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="Fleur'" />
 <p>Pseudo <br/> Rang
 </p>
 </a>
 </div>
 </div>
 </div>
 <div class="flex-c">
 <div class="bloc">
 <div class="titre-bloc">
 Les dernières news
 </div>
 <p>• News 1</p>
 <p>• News 2</p>
 <p>• News 3</p>
 </div>
 <div class="bloc">
 <div class="titre-bloc">
 Les sujets du mois
 </div>
 <p><a href="#">Lien</a></p>
 <p><a href="#">Lien</a></p>
 <p><a href="#">Lien</a></p>
 </div>
 </div>
 </div>
 <div class="flex">
 <div class="bloc">
 <div class="titre-bloc">
 Votez pour le forum !
 </div>
 <p class="center">
 <a href="#" class="postlink" target="_blank" rel="nofollow"><img src="//" border="0" alt="Image et lien de vote" /></a>
 </p>
 </div>
 <div class="bloc" id="partenaires">
 <div class="titre-bloc">Les partenaires du forum
 </div>
 <p class="center"><a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a> <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a> <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a> <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a></a>
 </div>
 </div>
  </div>
On enregistre et on récupère le lien de la page (chez moi http://maven.forumactif.org/h9-tambouille-pa-6-blocs-contexte-news-staff-sujets-importants-votes-partenaires ).

Etape 2 : on applique la CSS

Maintenant, dans la CSS de ton forum (PA > Affichage > Couleurs > Feuille de style CSS), on va coller la CSS de notre PA :
Code:
 /********* En tête CSS ***********/
  .en-tete, .en-tete *{
 box-sizing:border-box;
  }
  .en-tete{
 width:100%;
 background-color: #9AC9C9;
 color:#000;
 margin:auto;
 border:#689090 5px solid;
   border-top-left-radius: 30px;
 border-bottom-right-radius: 30px;
   padding:15px;
  }
  .titre{
 width:100%;
 text-align:center;
 font-size:38px;
 font-weight:bold;
 border-bottom:1px black solid;
  }
  .flex{
 display:flex;
 flex-wrap: nowrap;
 justify-content: space-between;
 align-items:stretch;
 width:100%;
  }
  .flex > div {
 flex:1;
  }
  .bloc{
 background:#F0F9F9;
 margin:3px;
 padding:3px;
  }
  .titre-bloc{
 font-size:20px;
 text-align:center;
 color:#9AC9C9;
 font-weight:bold;
  }

  .en-tete p{
 margin:0;
 padding:0.5%;
 text-align:justify;
  }
  .scroll{
 max-height:200px;
 overflow:auto;
   }
  .en-tete a{
 color: #0869a1;
 text-decoration:none;
  }
  #partenaires{
 flex:2;
  }
  .center{
 text-align:center !important;
  }
  .flex-c{
 display:flex;
 flex-direction:column;
 justify-content: space-between;
 align-items:stretch;
  }
  .flex-c > div{
 flex:1;
  }
  
  /** Effets avatars staff et prédéfinis **/
   .membre_staff{
      position:relative;
   }
   .membre_staff, .membre_staff img,.membre_staff p{
      width:100px;
      height:100px ;
      transition-duration: 2s;
  border-radius: 100px;
  text-align:center;
   }
   .membre_staff p{
      position:absolute;
      top:0;
      left:0;
      opacity:0;
      text-align:center;
      line-height:15px;
      transition-duration: 2s;
      font-weight:bold;
  width:100%;
   }
   .membre_staff:hover img{
      opacity:0.1;
      transition-duration: 2s;
  transform: rotate(360deg);
   }
   .membre_staff:hover p{
      opacity:1;
      transition-duration: 2s;
  top:40%;
   }
   .wrap{
 flex-wrap:wrap;
 margin:auto;
   }
     /*******FIN DE LA PA******/

Jusque là, on a pas un visuel terrible, et surtout, ça ne s'affiche nul part... On passe à l'étape 3 !

Etape 3 : on met en place la PA

Eh oui, il faut bien mettre en place tout ça ! Pour cela, on va se servir du tutoriel de Miettes pour éviter les iframes que l'on va adapter un peu.
Dans le template index-body, on va rechercher ceci au tout début :
Code:
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- BEGIN message_admin_titre -->
 <tr>
 <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
 </tr>
 <!-- END message_admin_titre -->
 <!-- BEGIN message_admin_txt -->
 <tr>
 <td class="row1" rowspan="3" align="center" valign="middle">
 <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
 </td>
 </tr>
 <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->
Et on va purement et simplement le supprimer. On va y mettre à la place ceci :
Code:
<div id="page-accueil"> </div>

On enregistre, et on publie.
Ensuite on va aller ajouter un javascript (PA> Modules > Gestion des codes javascript)
On vérifie que la "gestion des codes javascripts" est bien activée. Puis on crée un javascript dans lequel on va écrire :
Code:
$(document).ready(function(){
  $('#page-accueil').load('/h9-');
});
Exclamation ATTENTION : Ici le /h9- est à remplacer parce que tu as TOI dans le lien de ta page HTML.

On enregistre.
Eh voilà, on a notre visuel qui est bon !
Il n'y a plus qu'à personnaliser la CSS et le HTML Smile



Et voilà le travail Smile Si tu as un problème avec le code, que ça soit pour l'installation ou la personnalisation, n'hésites pas à demander !


Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses