Aller en bas
Fleur'
Messages : 144
Voir le profil de l'utilisateurhttp://ecofriends.forumactif.com/

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

le Ven 17 Mai - 21:46
J'ai besoin de votre aide les filles Very Happy 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.

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


Blocs avec deux coins arrondis et les autres moins (comme ça si c'est possible http://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:

Fleur - Admin
[Commande codage]Commande d'un en-tête 2-3410

Marion - Modératrice
[Commande codage]Commande d'un en-tête 3-4210

Muscade - Animatrice
[Commande codage]Commande d'un en-tête 9-5810

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  hihi
Merci par avance Very Happy


Dernière édition par Fleur' le Sam 18 Mai - 14:47, édité 1 fois
Mäven
Informations : Absente du 5 au 8 juillet

Idea Viens papoter avec nous sur le discord

Messages : 627
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com/

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

le Ven 17 Mai - 21:53
Bonjour Fleur' Smile

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

Fleur'
Messages : 144
Voir le profil de l'utilisateurhttp://ecofriends.forumactif.com/

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

le Sam 18 Mai - 13:33
Alors c'est un truc dans ce genre Smile
http://esprit-zen.forumactif.com/

Je préfère que les colonnes aient la même largeur
Mäven
Informations : Absente du 5 au 8 juillet

Idea Viens papoter avec nous sur le discord

Messages : 627
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com/

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

le Sam 18 Mai - 13:43
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 Smile

Bisous
Fleur'
Messages : 144
Voir le profil de l'utilisateurhttp://ecofriends.forumactif.com/

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

le Sam 18 Mai - 14:48
Super, merci beaucoup Very Happy
J'ai modifié mon premier message avec un modèle d'en tête que j'ai fait.
Mäven
Informations : Absente du 5 au 8 juillet

Idea Viens papoter avec nous sur le discord

Messages : 627
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com/

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

le Sam 18 Mai - 17:48
Coucou Fleur', enfin re-coucou Smile

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 Smile

EDIT : le staff a été ajouter. Je te laisse me dire si tu souhaites modifier quelque chose Smile
Fleur'
Messages : 144
Voir le profil de l'utilisateurhttp://ecofriends.forumactif.com/

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

le Dim 19 Mai - 12:49
L'idée est là Smile

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 hihi Et il y aurait possibilité de laisser un peu plus d'espace entre les différents blocs?

Merci Calin
Mäven
Informations : Absente du 5 au 8 juillet

Idea Viens papoter avec nous sur le discord

Messages : 627
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com/

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

le Dim 19 Mai - 13:02
Coucou Smile

Je n'avais pas compris pour les blocs Embarassed

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 ?
Fleur'
Messages : 144
Voir le profil de l'utilisateurhttp://ecofriends.forumactif.com/

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

le Dim 19 Mai - 13:10
Ah oui comme ca c'est bien applause

Pour le staff c'est vrai que c'a fait vide du coup. Tu peux réduire la colonne oui
Mäven
Informations : Absente du 5 au 8 juillet

Idea Viens papoter avec nous sur le discord

Messages : 627
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com/

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

le Dim 19 Mai - 13:14
J'ai essayé de réduire la colonne en largeur :

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

Et j'ai également essayé en fixant la hauteur des blocs et que ça passe sur 2 colonnes :
[Commande codage]Commande d'un en-tête Propo210

Qu'en penses-tu ? Une des solutions te convient ou tu veux tester autre chose ?
Fleur'
Messages : 144
Voir le profil de l'utilisateurhttp://ecofriends.forumactif.com/

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

le Dim 19 Mai - 13:21
J'aime bien la première solution Smile 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
Mäven
Informations : Absente du 5 au 8 juillet

Idea Viens papoter avec nous sur le discord

Messages : 627
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com/

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

le Dim 19 Mai - 13:25
Oui oui c'est clair =)
J'avais juste modifié pour tester les première colonnes =)
http://maven.forumactif.org/
Fleur'
Messages : 144
Voir le profil de l'utilisateurhttp://ecofriends.forumactif.com/

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

le Dim 19 Mai - 13:28
C'est parfait comme ça Very Happy

Mäven
Informations : Absente du 5 au 8 juillet

Idea Viens papoter avec nous sur le discord

Messages : 627
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com/

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

le Dim 19 Mai - 17:19
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é Smile )
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 Smile
Tu enregistre et ça devrait être tout bon =)

Si tu as le moindre souci n'hésite pas
Fleur'
Messages : 144
Voir le profil de l'utilisateurhttp://ecofriends.forumactif.com/

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

le Lun 20 Mai - 9:44
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 scratch
Miettes
Râleuse
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord

Messages : 814
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com

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

le Lun 20 Mai - 9:49
Coucou Smile

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 -->
Embarassed
Fleur'
Messages : 144
Voir le profil de l'utilisateurhttp://ecofriends.forumactif.com/

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

le Lun 20 Mai - 12:27
Je vais réessayer ca alors Smile

Ca marche Very Happy Merci encore!!
Mäven
Informations : Absente du 5 au 8 juillet

Idea Viens papoter avec nous sur le discord

Messages : 627
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com/

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

le Lun 20 Mai - 12:36
Ah oui c'était juste le début qu'il fallait supprimer Razz

Des questions pour la remplir ? Besoin d'aide ? Smile
Fleur'
Messages : 144
Voir le profil de l'utilisateurhttp://ecofriends.forumactif.com/

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

le Lun 20 Mai - 12:58
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 Smile
Mäven
Informations : Absente du 5 au 8 juillet

Idea Viens papoter avec nous sur le discord

Messages : 627
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com/

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

le Lun 20 Mai - 18:04
OK super Smile
Je peux archiver du coup ?
Fleur'
Messages : 144
Voir le profil de l'utilisateurhttp://ecofriends.forumactif.com/

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

le Lun 20 Mai - 19:34
Oui Smile Merci!
Mäven
Informations : Absente du 5 au 8 juillet

Idea Viens papoter avec nous sur le discord

Messages : 627
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com/

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

le Lun 20 Mai - 19:35
Merci à toi pour ta confiance =)

Je classe
Contenu sponsorisé

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

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@connectes_forum@Membres connectés :
@membres_connectes$, @