La tambouille des râleuses
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-24%
Le deal à ne pas rater :
PC Portable Gaming 15.6″ Medion Erazer Deputy P40 (FHD 144Hz, RTX ...
759.99 € 999.99 €
Voir le deal

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Très peu présente en ce moment Sad
----
Idea Viens papoter avec nous sur le discord

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

En-tête 6 blocs : Contexte, news, navigation, prédéfinis, staff, recrutement Empty En-tête 6 blocs : Contexte, news, navigation, prédéfinis, staff, recrutement

Ven 26 Avr 2019 - 11:33

En-tête 6 blocs : Contexte, news, navigation, prédéfinis, staff, recrutement


Hello !

Ça c'est un long titre  hihi ! Mais difficile de décrire une PA... Alors j'ai fait un plus concret Smile
Bien entendu, les blocs peuvent changer d'utilité ! Voilà donc un aperçu :
En-tête 6 blocs : Contexte, news, navigation, prédéfinis, staff, recrutement Pa_6_b10
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.

Un autre rendu possible, avec une autre disposition :
Spoiler:

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

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 id="en_tete" class="d-flex">
      <div id="colonne_gauche">
         <div id="description">
            <div class="titre_case">Contexte</div>
            <div>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet elit magna. Vivamus tempor mi urna, et congue nisi scelerisque a. Donec vitae nisl tincidunt, sagittis libero ac, fermentum urna. Phasellus magna quam, posuere eu ante in, dignissim rhoncus ante. Fusce viverra nulla condimentum pretium iaculis. Cras placerat dictum turpis sed blandit. Proin sit amet aliquam lacus, pretium ullamcorper lorem. Vivamus tellus velit, mattis eu porttitor sodales, volutpat a felis. </p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet elit magna. Vivamus tempor mi urna, et congue nisi scelerisque a. Donec vitae nisl tincidunt, sagittis libero ac, fermentum urna. Phasellus magna quam, posuere eu ante in, dignissim rhoncus ante. Fusce viverra nulla condimentum pretium iaculis. Cras placerat dictum turpis sed blandit. Proin sit amet aliquam lacus, pretium ullamcorper lorem. Vivamus tellus velit, mattis eu porttitor sodales, volutpat a felis. </p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet elit magna. Vivamus tempor mi urna, et congue nisi scelerisque a. Donec vitae nisl tincidunt, sagittis libero ac, fermentum urna. Phasellus magna quam, posuere eu ante in, dignissim rhoncus ante. Fusce viverra nulla condimentum pretium iaculis. Cras placerat dictum turpis sed blandit. Proin sit amet aliquam lacus, pretium ullamcorper lorem. Vivamus tellus velit, mattis eu porttitor sodales, volutpat a felis. </p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet elit magna. Vivamus tempor mi urna, et congue nisi scelerisque a. Donec vitae nisl tincidunt, sagittis libero ac, fermentum urna. Phasellus magna quam, posuere eu ante in, dignissim rhoncus ante. Fusce viverra nulla condimentum pretium iaculis. Cras placerat dictum turpis sed blandit. Proin sit amet aliquam lacus, pretium ullamcorper lorem. Vivamus tellus velit, mattis eu porttitor sodales, volutpat a felis. </p>
            </div>
         </div>
      </div>
      <div id="colonne_droite">
         <div id="haut" class="d-flex">
            <div id="news" class="cell">
               <div class="titre_case">Les nouveautés</div>
               <div>
                  <ul>
  <!-- Partie à coller pour rajouter une news :
 <li>
                        <span class="mea">XX/XX/XX :
                        </span>
                        ici les nouvelles !
                     </li>
  -->
                     <li>
                        <span class="mea">XX/XX/XX :
                        </span>
                        ici les nouvelles !
                     </li>
                  </ul>
               </div>
            </div>
            <div id="link" class="cell">
               <div class="titre_case">Navigation</div>
               <div>
                  <ul>
                     <li><a href="#"> Lien</a></li>
                     <li><a href="#"> Lien</a></li>
                     <li><a href="#"> Lien</a></li>
                     <li><a href="#"> Lien</a></li>
                     <li><a href="#"> Lien</a></li>
                     <li><a href="#"> Lien</a></li>
                     <li><a href="#"> Lien</a></li>
                  </ul>
               </div>
            </div>
            <div id="predef" class="cell">
               <div class="titre_case">Prédéfinis</div>
               <div>
                  <p>
                     Quelques prédéfinis qui vous attendent
                  </p>
                  <div class="d-flex">
  <!-- Partie à coller pour rajouter un prédéfini :
 <div class="predefini">
                        <img src="Lien_de_l'avatar" alt="Pseudo" />
                        <p>Pseudo <br/> Autre information
                        </p>
                     </div>
  -->
                    <div class="predefini">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Autre information
                        </p>
                     </div>
                     <div class="predefini">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Autre information
                        </p>
                     </div>
                    <div class="predefini">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Autre information
                        </p>
                     </div>
                    <div class="predefini">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Autre information
                        </p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div id="bas" class="d-flex">
            <div id="staff_actuel" class="cell">
               <div class="titre_case">Personnes à contacter</div>
               <div>
                  <p>
                     Si tu as la moindre question, tu peux contacter un des membres du staff :
                  </p>
                  <div class="d-flex">
  <!-- Partie à coller pour rajouter un membre du staff :
 <div class="membre_staff">
                        <img src="LIEN DE L'AVATAR" alt="Pseudo" />
                        <p>Pseudo <br/> Groupe
                        </p>
                     </div>
  -->
                    
                     <div class="membre_staff">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Groupe
                        </p>
                     </div>
                    <div class="membre_staff">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Groupe
                        </p>
                     </div>
                    <div class="membre_staff">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Groupe
                        </p>
                     </div>
                     <div class="membre_staff">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Groupe
                        </p>
                     </div>
                     <div class="membre_staff">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Groupe
                        </p>
                     </div>
                  </div>
               </div>
            </div>
            <div id="staff" class="cell">
               <div class="titre_case">Nous recherchons...</div>
               <div>
                  <p>
                     Nous recherchons actuellement .... !
                  </p>
                  <p>
                     Pour en savoir plus et/ou postuler, <a href="#">rendez-vous par ici !</a>
                  </p>
               </div>
            </div>
         </div>
      </div>
   </div>
On enregistre et on récupère le lien de la page (chez moi http://tite-may-test.forumactif.org/h8-tambouille-pa-6-blocs ).

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 ***********/
   /**CSS générale**/
   #en_tete{
      background:#A7C553;
      height:350px;
      margin:auto;
      border:#1c2603 1px solid;
      width:98%;
      box-sizing:border-box;
      padding:0.5%;
      font-family:Verdana;
      font-size:12px;
   }
   #en_tete *{
      box-sizing:border-box;
   }
   .d-flex{
      display:flex; /** On met des divs les unes à coté des autres en évitant le float**/
      justify-content: space-around;
   }
   /**Mise en page des listes**/
   ul{
      margin:0;
      list-style: none;
      padding:0;
   }
   ul li:before {
      content: ":diamonds:";
      font-weight:bold;
      color:#4a5c1a;
   }
   /**mise en page des liens**/
   a{
      color:#232E05;
  text-decoration:none;
  font-family: 'Delius', cursive;
  font-size:13px;
 }
 /**Mise en page des textes**/
   p{
      padding:3px;
  margin:0;
   }
   .mea{
      text-indent:12px;
      color:#4a5c1a;
      margin:-2px 0;
      font-weight:bold;
   }
     /**Mise en page des titres de cases**/
   #en_tete .titre_case{
      font-family: 'Delius', cursive;
      font-size:19px;
      color:#43570f;
      padding:0;
      margin:0 0 -5px 10px;
      text-shadow: -1px 0 0 rgba(0,0 ,0, 0.5),1px 0 0 rgba(0,0 ,0, 0.5),0 -1px 0 rgba(0,0 ,0, 0.5),0 1px 0 rgba(0,0 ,0, 0.5);
   }
   /**Mise en page de chaque case**/
   #description div.titre_case+div,
   .cell div.titre_case+div{
      background:#cae385;
      border:1px #43570f solid;
      text-align:justify;
      padding:8px;
      overflow:auto;
   }
   #colonne_gauche{
      width:20%;
   }
   #colonne_droite{
      width:80%;
   }
   #news{
      width:35%;
   }
   #link{
      width:20%;
   }
   #predef{
      width:43.8%;
   }
   #staff,#staff_actuel{
      width:49.6%;
   }
   #haut, #bas{
      width:100%;
   }
   #haut div, #bas div{
      margin:0 0.2%;
   }
   #description div+div{
      height:300px;
   }
   #news div+div, #link div+div, #predef div+div{
      height:152px;
   }
   #staff_actuel div+div, #staff div+div{
      height:133px;
   }

 /** Effets avatars staff et prédéfinis **/
   .membre_staff,
   .predefini{
      position:relative;
   }
   .membre_staff, .membre_staff img,.membre_staff p{
      width:60px;
      height:60px !important;
      transition-duration: 2s;

   }
   .membre_staff p{
      position:absolute;
      top:0;
      left:0;
      opacity:0;
      text-align:center;
      line-height:15px;
      transition-duration: 2s;
      font-weight:bold;
   }
   .membre_staff:hover img{
      opacity:0.1;
      transition-duration: 2s;
   }
   .membre_staff:hover p,
   .predefini:hover p{
      opacity:1;
      transition-duration: 2s;
   }
   .predefini, .predefini img, .predefini p{
      width:70px;
      height:70px !important;
      transition-duration: 2s;
   }
   .predefini p{
      position:absolute;
      top:0;
      left:0;
      opacity:0;
      text-align:center;
      transition-duration: 2s;
      font-weight:bold;
   }
   .predefini:hover img{
      opacity:0.1;
      transform: rotate(360deg);
      transition-duration: 2s;
   }
    
     /*******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('/h8-');
});
Exclamation ATTENTION : Ici le /h8- 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

Etape Bonus : personnalisation des polices

Dans le visuel, on voit que j'ai une police personnalisée pour les liens et les titres : il faut aller l'ajouter.
Pour cela : PA > Général > Promotion du forum : Les moteurs de recherche et dans Balises supplémentaires ajouter "lier une feuille CSS" et coller  ceci (ou le lien de la police de ton choix) :

Code:
https://fonts.googleapis.com/css?family=Delius



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