[Commande codage]Commande d'un en-tête

J'ai besoin de votre aide les filles Je me lance enfin dans la confection de l'en tête de mon forum

Type de commande (modification de templates, en-tête, qeel, mise en page de messages, pub, autres) : En tête de forum
Pour quel forum : http://ecofriends.forumactif.com/
Maquette graphique/schéma/croquis : Je peux donner un lien d'un autre forum? Sinon en gros, je vois bien 3 colonnes
Un titre en tête "Bienvenue"

- Colonne 1 : un bloc descriptif du forum, un bloc vote
- Colonne 2 : un bloc avec le staff les un en dessous des autres
- Colonne 3 : un bloc pour informer des défis en cours, un bloc pour mettre les sujets du mois en avant

Et un bloc sous la colonne 2 et 3 pour poster le journal du forum.




Blocs avec deux coins arrondis et les autres moins (comme ça si c'est possible https://tambouille-raleuses.forumactif.com/t118-publicite-nombre-de-blocs-variable)et sans bordure  et les titres séparés des blocs par une ligne

Pour les photos des membres du staff, si c'est possible, les faire en rond

Informations utiles (couleurs, images, etc, …) :
Couleurs (possiblement modifiable en fonction du visuel, là comme ça je visualise mal) : Texte en noir, couleur du fond #9AC9C9, couleur des blocs #F0F9F9

Pour les titres des blogs, police Grand Hotel sur Google Font

Les avatars du staff avec leur nom et rôle

Spoiler:

Le code pour le lien du vote

Code:

<a style="" href="http://ecofriends.boosterforum.com/" class="postlink" target="_blank" rel="nofollow"><span style="color: rgb(0, 0, 0);"><img src="https://i.servimg.com/u/f95/19/79/03/92/coccin11.jpg" border="0" alt="" /></span></a>

Le code pourra-t-il être mis en libre service ensuite ? Oui

Bonje suppose qu'il doit manquer plein d'informations  
Merci par avance

Bonjour Fleur'

C'est vrai qu'on préfère avoir un schéma pour ne pas se tromper, donc avant de coder je vais te proposer un schéma savoir si j'ai bien comprit. Sauf si tu pense pouvoir en faire un via paint ou tofiltre si tu l'as ? On a pas besoin d'un truc très élaboré, juste un schéma qu'on ait un visuel Par exemple, tu veux que les 3 colonnes aient la même largeur ? Ou celle du milieu moins large ?
Tu peux montrer le lien si tu veux, même si on fera forcément un peu différent

Alors c'est un truc dans ce genre
http://esprit-zen.forumactif.com/

Je préfère que les colonnes aient la même largeur

Coucou !

OK je vois ce que tu attends du coup.
Je prends en charge ta commande et je pense te la rendre d'ici ce soir ou au pire demain

Bisous

Super, merci beaucoup
J'ai modifié mon premier message avec un modèle d'en tête que j'ai fait.

Coucou Fleur', enfin re-coucou

Il me reste le staff à faire, mais j'ai une petite question : tu veux quel effet pour le staff ? Le nom et rang qui apparait quand on passe sur l'avatar ?

Voilà ce que je te propose pour le moment : http://maven.forumactif.org/
Si tu as la moindre remarque n'hésites pas, je peux encore tout modifier

EDIT : le staff a été ajouter. Je te laisse me dire si tu souhaites modifier quelque chose

L'idée est là

C'est possible de mettre les membres du staff en colonne? Et les blocs aussi avec les bords arrondis, je crois que là je m'étais mal faite comprendre Et il y aurait possibilité de laisser un peu plus d'espace entre les différents blocs?

Merci

Coucou

Je n'avais pas compris pour les blocs

Toutes les modifications sont faites.
Pour le staff, ça ne fait pas super joli (je trouve) tu veux que je réduise la taille des avatars ? que je rétrécisse la colonne ?

Ah oui comme ca c'est bien

Pour le staff c'est vrai que c'a fait vide du coup. Tu peux réduire la colonne oui

J'ai essayé de réduire la colonne en largeur :



Et j'ai également essayé en fixant la hauteur des blocs et que ça passe sur 2 colonnes :


Qu'en penses-tu ? Une des solutions te convient ou tu veux tester autre chose ?

J'aime bien la première solution C'est possible de faire que le bloc pour voter soit de la même largeur que celui présentation, et le "journal" du coup les deux autres? Je ne sais pas si c'est très clair lol

Oui oui c'est clair =)
J'avais juste modifié pour tester les première colonnes =)
http://maven.forumactif.org/

C'est parfait comme ça

Super si ça te plait !

Voilà donc les codes et comment installer le tout.
Tout d'abord la page HTML :
PA > Modules > Gestion des pages HTML > Créer en mode avancé (c'est important le mode avancé )
Tu mets le titre que tu souhaites, puis tu colles ceci :

Code:

<div class="en-tete">
  <div class="titre">
    Bienvenue
  </div>
  <div class="flex">
    <div class="bloc">
      <div class="titre-bloc">
        Le principe du forum
      </div>
      <p>Ce forum s'adresse à quiconque s'intéresse un peu à l'écologie et la préservation de la nature.</p>

      <p>Même si vous ne vous estimez pas être de grands écolos dans l'âme, vous êtes les bienvenus parmi nous, après tout, chaque petit geste compte!</p>

      <p>Retrouvez donc des trucs et astuces pour améliorer le quotidien ainsi que des petits défis écolos :)</p>

      <p class="center"><a href="#">En savoir plus</a></p>
    </div>
    <div class="bloc staff">
      <div class="titre-bloc">
        Le staff
      </div>
      <div class="flex wrap">
        <div class="membre_staff">
          <img src="https://i.servimg.com/u/f52/19/29/10/59/2-3410.png" alt="Fleur'" />
          <p>Fleur' <br/> Admin
          </p>
        </div>
        <div class="membre_staff">
          <img src="https://i.servimg.com/u/f52/19/29/10/59/3-4210.jpg" alt="Marion" />
          <p>Marion <br/> Modératrice
          </p>
        </div>
        <div class="membre_staff">
          <img src="https://i.servimg.com/u/f52/19/29/10/59/9-5810.jpg" alt="Muscade" />
          <p>Muscade <br/> Animatrice
          </p>
        </div>
      </div>
    </div>
    <div class="flex-c">
      <div class="bloc">
        <div class="titre-bloc">
          Les sujets du mois
        </div>
        <p><a href="#">Faire son potager</a></p>
        <p><a href="#">Nos familles éco-friends</a></p>
        <p><a href="#">Recette de lessive maison</a></p>
      </div>
      <div class="bloc">
        <div class="titre-bloc">Éco-défis en cours
        </div>
        <p>Pas d'achat neuf - Mai</p>
        <p>Replanter les noyaux de fruits - De juin à août</p>
      </div>
    </div>     
  </div>
  <div class="flex">
    <div class="bloc">
      <div class="titre-bloc">
        Votez pour le forum !
      </div>
      <p class="center">
        <a style="" href="http://ecofriends.boosterforum.com/" class="postlink" target="_blank" rel="nofollow"><span style="color: rgb(0, 0, 0);"><img src="https://i.servimg.com/u/f95/19/79/03/92/coccin11.jpg" border="0" alt="" /></span></a>
      </p>
    </div>
    <div class="bloc" id="journal">
      <div class="titre-bloc">Le journal du forum
      </div>
      <p>
        Le contenu du bloc
      </p>
    </div>
  </div>
</div>

Et tu valides.
Dans la liste des pages HTML tu vas avoir besoin de l'url de ta page, plus particulièrement ce qu'il y a au niveau du /HX. Par exemple moi ton code est ici :
http://maven.forumactif.org/h5-en-tete-fleur

Ensuite on ajoute la CSS : PA > Affichage > Couleurs > Feuille de style CSS :

Code:

/**CSS POUR L'EN TETE**/
    .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;
    }
    .en-tete .titre{
      width:100%;
      text-align:center;
      font-size:38px;
      font-weight:bold;
      border-bottom:1px black solid;
    }
    .en-tete .flex{
      display:flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items:stretch;
      width:100%;
    }
    .en-tete .flex > div {
      flex:2;
    }
    .en-tete .bloc{
      background:#F0F9F9;
      margin:8px;
      padding:3px;
      border-top-left-radius: 30px;
      border-bottom-right-radius: 30px;
    }
    .en-tete .titre-bloc{
      font-size:20px;
      text-align:center;
      color:#9AC9C9;
      font-weight:bold;
    }

    .en-tete p{
      margin:0;
      padding:0.5%;
      text-align:justify;
    }
    .en-tete a{
      color: #0869a1;
      text-decoration:none;
    }
    .en-tete #journal{
      flex:3;
    }
    .en-tete .center{
      text-align:center !important;
    }
    .en-tete .flex-c{
      display:flex;
      flex-direction:column;
      justify-content: space-between;
      align-items:stretch;
    }
    .en-tete .flex-c > div{
      flex:1;
    }
    .en-tete .wrap{
      flex-wrap:wrap;
      margin:auto;
      flex-direction:column;
      align-items:center;
    }
    .en-tete .staff{
    flex:1 !important;
    }
  /** Effets avatars staff **/
  .en-tete .membre_staff{
    position:relative;
  }
  .en-tete .membre_staff, .en-tete .membre_staff img,.en-tete .membre_staff p{
    width:100px;
    height:100px ;
    transition-duration: 2s;
    border-radius: 100px;
  }
  .en-tete .membre_staff p{
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    text-align:center;
    line-height:15px;
    transition-duration: 2s;
    font-weight:bold;
  }
  .en-tete .membre_staff:hover img{
    opacity:0.1;
    transition-duration: 2s;
    transform: rotate(360deg);
  }
  .en-tete .membre_staff:hover p{
    opacity:1;
    transition-duration: 2s;
    top:40%;
  }
/** FIN CSS POUR L'EN TETE**/

Puis tu enregistres.

Ensuite dans le template index_body (PA > Affichage > Templates > Général > Indexbody
au tout départ tu as ceci :

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 -->

il faut le supprimer complètement et le remplacer par ceci :

Code:

<div id="bloc-en-tete"></div>

Tu enregistres, et tu publies le template =)

Et enfin, on appelle la PA là où on l'a prévue : PA > Modules > Gestion des codes javascripts
Ici vérifie que la gestion des codes javascript est bien sur "oui". Puis tu crées un code javascript. Tu lui mets un nom (peu importe lequel) et tu colles ceci :

Code:

$(document).ready(function(){
  $('#bloc-en-tete').load('/h5-');
});

En remplaçant le /h5- par ce que tu as sur ta page HTML à toi
Tu enregistre et ça devrait être tout bon =)

Si tu as le moindre souci n'hésite pas

Merci!

Alors, ça marche bien, par contre, en supprimant tout le code du Templates, je n'ai que la PA qui s'affiche et plus le forum, même en cliquant sur les liens des sujets

Coucou

Je me permets d'intervenir en vitesse ici. Il ne fallait pas supprimer tout le template, mais uniquement ce qui se trouvait entre

Code:

<!-- BEGIN message_admin_index -->

et

Code:

<!-- END message_admin_index -->

Je vais réessayer ca alors

Ca marche Merci encore!!

Ah oui c'était juste le début qu'il fallait supprimer

Des questions pour la remplir ? Besoin d'aide ?

Pour le moment c'est bon (et puis le panneau d'administration bug donc je ne peux pas continuer lol) Mais je pense que le remplissage, ça devrait être bon

OK super
Je peux archiver du coup ?

Oui Merci!

Merci à toi pour ta confiance =)

Je classe