[PHPBB3] Personnaliser nouveau bouton J'aime

Tu as bien créé des icônes de messages avec les liens suivants?:



Annonce:
https://i.servimg.com/u/f20/20/11/87/27/annonc10.png

Annonce globale:
https://i.servimg.com/u/f20/20/11/87/27/annonc11.png

Notes:
https://i.servimg.com/u/f20/20/11/87/27/note10.png

Chaque image étant différente, tu ne dois pas avoir de soucis.


Merci pour le script, c'est parfait, je voulais juste voir un truc pour une condition afin qu'elle soit bien dans une autre condition.

Je reviens de ton fofo Serge et il vaut mieux partir avec ceci dans ton template et modifier le script:

Code:

<span class="M14_type_topic">{postrow.displayed.ICON}</span>

J'ai les icônes au dessus du titre qui son décalés, même avec span.

Pour les icônes de messages, je les ai bien crées et il me semble comme indiqué. Je vais revérifier.
Mais là je n'y vois plus clair.

J'y retournerai dans la soirée.


à demain Philippe. Bonne soirée.
Bonne soirée.

Re Phil,

J'en ai bavé pour comprendre. Il a fallu que je me forme sur l'utilisation des icônes de message que je ne connaissais pas.
Alors pour les 3 images, elles étaient bien configurées comme il faut.
Mais s'agissant de l'annonce globale, il fallait éditer le message pour lui mettre son icône.
Sur les annonces et notes j'avais coché pour qu'elles se mettent automatiquement ici:

Spoiler:

Chose que l'on ne peut pas faire pour les annonces globales.

Avec l'ajout du span dans le template sur cette ligne:

Code:

   <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>

Je ne m'en suis pas sorti. Le titre apparait plus gros et impossible de positionner l'icône du message à gauche du titre comme je voulais. J'ai donc laissé ainsi.
Et ajouté pour positionner tout comme je voulais, ce CSS:

Code:


h2.topic-title img{
 float: left;
 margin: -6px 5px !important;
}

Donc en l'état, tout est bon et je n'ai plus d'icône en double grâce à ton script sur les sous-forums.

Par contre et c'est là que j'ai pété un câble, FA a complété le template de la fonction des like.
https://forum.forumactif.com/t403420-l-arrivee-du-nouveau-systeme-de-j-aime-et-je-n-aime-pas-sur-forumactif#3365638

Et là ça n'allait plus du tout car les boutons n'étaient plus à leur place précédente; il y en avait un sous l'avatar et l'autre (le noms des membres) sous le message.
J'ai enfin réussi à les remettre en place en ajoutant ça au css:

Code:

.fa_like_div {margin-left: 0;}

Je n'ai pas essayé d’installer les modifs de FA car je crois que tu étais intervenu sur le précédent code du template et j'avoue être saturé ce soir.

A demain Philippe.

Hello Serge,

ah, tu ne connaissais pas ce système, c'est bien sympa...

Alors pour l’icône de message "Annonce Globale",
et ne rien cocher , ensuite il faudra éditer l' Annonce Globale par contre.


Avec l'intervention de Forumactif, cela concerne que les invités il me semble.

Dans le script, recherches ceci:

Code:

       
 if (_userdata["user_id"] < (0))
 {
$(this).find('.fa_like_div').wrap('<a href="/login" title="Merci de vous connecter ou de vous enregistrer"></a>');
}
 

Soit tu le supprimes ou alors tu ajoutes une infobulle:

Code:

   
if (_userdata["user_id"] < (0))
{
$(this).find('.fa_like_div').attr('title','Merci de vous connecter ou de vous enregistrer');
}


Ensuite afin que tout le style soit aligné sur les boutons likes.
Ces 2 lignes:

Code:

    /*SI NON CLIQUE ON AFFICHE UN MOINS*/
        button.rep-button.fa_like:before{content:'Ajouter un';color:green;}


Code:

   
/*SI SI CLIQUE ON AFFICHE UN PLUS*/
        button.rep-button.fa_liked:before{content:'Retirer votre';color:red;}

Peuvent recevoir un style supplémentaire:

Code:

top: -10px;position: relative;left: -10px;

Et cette ligne:

Code:

  .rep-nb {
      line-height: 25px;
      margin-left: 10px;
      padding-left: 5px;
      }


Ajouter ceci:

Code:

 
position: relative;
top: -12px;


Et ajouter ceci pour aligner l'image :

Code:

.fa_like_div .rep-button span img{top: 4px;position: relative;}

Bonjour Philippe,

Avec le css ajouté hier soir tout fonctionne correctement et je n'ose plus y toucher. J'allais même passer en Résolu ce matin.

Tout ce que tu m'as écrit ci-dessus est à faire après avoir mis en place les modifications de FA dans le template?

Quand j'ai essayé de mettre ce qu'ils disent ici dans le te template overall-header:
https://forum.forumactif.com/t403420-l-arrivee-du-nouveau-systeme-de-j-aime-et-je-n-aime-pas-sur-forumactif#3365637
j'ai ce message "La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte."

Actuellement je n'ai donc pas touché aux templates et j'ai cela dans le template viewtopic_body incluant tes modifs normalement:

Code:


    <!-- BEGIN switch_likes_active -->
             <div class="fa_like_div" style="display:none;">
                <!-- BEGIN switch_like_list -->
    {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
                <!-- END switch_like_list -->
                <!-- BEGIN switch_dislike_list -->
    {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
                <!-- END switch_dislike_list -->
                <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
                   <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
    <span>   Best</span> {postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
                </button>
                <!-- BEGIN switch_dislike_button -->
                <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
                   <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
                   <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
                </button>
                <!-- END switch_dislike_button -->
             </div>
             <!-- END switch_likes_active -->

Re Serge,

alors pour ce qui est du rajout dans le template overall_header, c'est ceci:

Code:

   <!-- BEGIN switch_like_popup -->
    <div id="like_popup" style="z-index: 10000 !important;">
       <div class="h3">{SITENAME}</div>
       {LIKE_POPUP_MSG}
       <div id="like_popup_buttons">
          <form action="{S_LOGIN_ACTION}" method="get">
             <input type="submit" class="button1" value="{L_LOGIN}"/>
             <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
             <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
          </form>
       </div>
    </div>
    <!-- END switch_login_popup -->

Juste après:

Code:

<!-- END switch_login_popup -->

Tu as du mal sélectionner le code html.

Tout ce que tu m'as écrit ci-dessus est à faire après avoir mis en place les modifications de FA dans le template?

Oui effectivement car j'ai moi même ajouté le code html, ce n'est juste qu'une popup pour les invités Serge.

Hum, tu as supprimé l'image dans le template alors:


J'ai donc revu toute la css Serge pour un alignement total:

Code:

   /*Nouveau sytème de Best*/
        /*ON MASQUE LE POUCE*/
        button.rep-button.fa_like path, button.rep-button.fa_liked path{display: none;}
        /*DEBUT OPTIONNEL*/
        /*SI NON CLIQUE ON AFFICHE UN MOINS*/
        button.rep-button.fa_like:before{content:'Ajouter un';color:green;top: 2px;position: relative;left: -10px;}
        /*SI SI CLIQUE ON AFFICHE UN PLUS*/
        button.rep-button.fa_liked:before{content:'Retirer votre';color:red;top:2px;position: relative;left: -10px;}
        /*FIN OPTIONNEL*/
        /*L IMAGE APRES LE VOTE*/
       button.rep-button.fa_liked .rep-nb::after {
      
              
       background-image: url(https://i.servimg.com/u/f25/18/97/96/21/059010.gif);
                            
       background-position: right center;
       background-repeat: no-repeat;
       content: '';
       display: inline-block;
       height: 25px;
       margin-left: 17px;
       position: absolute;
       width: 58px;
    }
.fa_like_div .rep-button span img{vertical-align: middle;}
        /*ON MASQUE LE TEXTE " aime ce message"*/
        .fa_like_div .fa_like_list{font-size:0px;}
        /*ON IMPOSE UNE TAILLE DE POLICE AU PSEUDOS*/
        .fa_like_div .fa_like_list a[href^="/u"]{font-size: 10px!important;}
        /*ON AFFICHE UNE VIRGULE APRES LE MEMBRE*/
        .fa_like_div .fa_like_list a[href^="/u"]:after
        {content:',';}
        /*ON AFFICHE UN POINT APRES LE DERNIER MEMBRE*/
        .fa_like_div .fa_like_list a[href^="/u"]:last-child:after
        {content:'.';}

        /*Hauteur boutons et Best*/
       .rep-nb {
       line-height: 25px;
       margin-left: 10px;
       padding-left: 5px;
  position: relative;
top:2px;
 
       }
       .rep-button, .rep-button:active, .rep-button:focus {margin-bottom: 10px;
       }

Puis le code html dans le template avec le placement de l'image comme auparavant :

Code:

<!-- BEGIN switch_likes_active -->
 <div class="fa_like_div" style="display:none;">
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
<span><img src="https://i.servimg.com/u/f25/18/97/96/21/27357311.gif"/></span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 </div>
 <!-- END switch_likes_active -->

Bonsoir Philippe,

Merci pour cette nouvelle intervention.

Concernant l'ajout dans le template overall_header, j'ai essayé à nouveau et j'ai toujours le message d'erreur.

J'ai 3 fois le code:

Code:

    <!-- END switch_login_popup -->

J'ai essayé de mettre le pavé sous chacun des 3 à tour de rôle et j'ai toujours le message d'erreur.

Pour le template dans viewtopic_Body, oui j'ai préféré remplacé l'image par le texte car sinon cela faisait 2 images cote à cote quand on met un best et ça surcharge les pages aussi.

Avec le nouveau css oui, les boutons se placent sous l'image et non sous l'avatar. Une variante et j'hésite entre les 2 solutions.

Bonsoir Serge,
on va commencer par corriger ton template, tu peux le déposer ici stp.

Avec le nouveau css oui, les boutons se placent sous l'image et non sous l'avatar. Une variante et j'hésite entre les 2 solutions.

Hum quel avatar Serge?

J'ai remonté une information concernant un soucis de largeur sur la version Phpbb3 sur la css de base:

https://forum.forumactif.com/t403444-le-systeme-j-aime-ou-j-aime-probleme#3365737

Tu es dans le même cas:

Alors essayes d'ajouter ceci dans ta feuille de style:

Code:


.fa_like_div
{
width:76%;
}


Hum quel avatar Serge?

J'ai comprit ce que tu mentionnais Serge, mon avatar était à droite sur mon fofo de test.

Il faudra supprimer ce style alors:

Code:

.fa_like_div {
    margin-left: 0;
}

Mon template Phil:

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  <meta name="google-site-verification" content="KtQkyLWfs0SsZOJDoUPg9lWTGeBPA-XM1h2ba6bJAfA" />
  <meta name="google-site-verification" content="nUqfhYl5_x5QeNTipG57OeiZiqV4JTLbIIZqSlXmpac" /> 
  <meta name="msvalidate.01" content="DB820408D1149954451471A92C2A11C8" />
  <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
  <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
  <meta http-equiv="content-script-type" content="text/javascript" />
  <meta http-equiv="content-style-type" content="text/css" />
  <!-- BEGIN switch_compat_meta -->
  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
  <!-- END switch_compat_meta -->
  <!-- BEGIN switch_canonical_url -->
  <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
  <!-- END switch_canonical_url -->
  {META_FAVICO}
  {META}
  {META_FB_LIKE}
  <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />

  <!-- personnalisation icône du raccourci  smartphone -->
  <link rel="icon" sizes="192x192" href="https://i.servimg.com/u/f25/18/97/96/21/banniy17.gif">
 
  <!-- CSS complémentaire hébergé sur dropbox -->
  <link href="https://dl.dropboxusercontent.com/s/9kb71jt8yg9ntk0/css_photocli.css" rel="stylesheet" type="text/css" />
 
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" />   
  {T_HEAD_STYLESHEET}
  {CSS}
   
  <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
  <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
  <script src="{JQUERY_PATH}" type="text/javascript"></script>
  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
    {RICH_SNIPPET_GOOGLE}

  <!-- BEGIN switch_fb_login -->
  <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
  <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
  <!-- END switch_fb_login -->

  <!-- BEGIN switch_ticker -->
  <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
  <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
  <!-- END switch_ticker -->

  <!-- BEGIN switch_ticker_new -->
  <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
  <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
        case 'top' :
            slid_vert = true;
            break;

        case 'left':
            break;

        case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

        case 'right':
            auto_dir = 'prev';
            break;

        default:
            slid_vert = true;
      }

      $(document).ready(function() {

        $('#fa_ticker_content').css('display','block');

        var width_max = $('ul#fa_ticker_content').width();
        var width_item = Math.floor(width_max / {switch_ticker.SIZE});

        if (width_max > 0)
        {
            $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
              if ($(this).width() > width_item)
              {
              var ratio      = $(this).width() / width_item;
              var new_height = Math.round($(this).height() / ratio);
              $(this).height(new_height).width(width_item);
              }
            });

            if (slid_vert)
            {
              var height_max = h_perso;

              $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                    height_max = $(this).height();
                  }
              } );

              $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
              $('ul#fa_ticker_content li').height(height_max);
            }


            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
              wrap: 'circular',
              auto: {switch_ticker.STOP_TIME},
              auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
        }
        else
        {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
        }
      });
  //]]>
  </script>
  <!-- END switch_ticker_new -->

  <script type="text/javascript">//<![CDATA[
  $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
        pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
        if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
        report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
        if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
        $(document).ready(function() {
            Ticker.start({
              height : {switch_ticker.HEIGHT},
              spacing : {switch_ticker.SPACING},
              speed : {switch_ticker.SPEED},
              direction : '{switch_ticker.DIRECTION}',
              pause : {switch_ticker.STOP_TIME}
            });
        });
      <!-- END switch_ticker -->
  });

  <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
  <!-- END switch_login_popup -->

  <!-- BEGIN switch_login_popup -->
  $(document).ready( function() {
      $(window).resize(function() {
        var windowWidth = document.documentElement.clientWidth;
        var popupWidth = $("#login_popup").width();
        var mypopup = $("#login_popup");

        $("#login_popup").css({
        "left": windowWidth/2 - popupWidth/2
            });
      });
  });
  <!-- END switch_login_popup -->
  //]]>
  </script>
  {GREETING_POPUP}
  <style type="text/css">
  #page-footer, div.navbar, div.navbar ul.linklist {
  display: block !important;
  }
  ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
  display: inline !important;
  }

  <!-- BEGIN switch_ticker_new -->
  .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
  }

  .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
  }

  .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
  }
  <!-- END switch_ticker_new -->
  </style>
 
  <script type="text/javascript" src="https://illiweb.com/rs3/21/frm//jquery/marquee/jquery.marquee.min.js"></script>
 
  {HOSTING_JS}
  <!-- BEGIN google_analytics_code -->
  <script type="text/javascript">
  //<![CDATA[
      var _gaq = _gaq || [];
      _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
      _gaq.push(["_trackPageview"]);
      _gaq.push(['_trackPageLoadTime']);

      <!-- BEGIN google_analytics_code_bis -->
      _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
      _gaq.push(['b._trackPageview']);
      <!-- END google_analytics_code_bis -->

      (function() {
        var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
        ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
        var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
      })();
  //]]>
   
 </script>
  <!-- END google_analytics_code -->
 
  <!-- JS exif cher Jérémie -->
  <!--  <script type="text/javascript" src="//famillecattan.com/photoclic/exif.js"></script> -->
       
    <script type="text/javascript" src="//fa7up.fr/fa7up_mod.js"></script>
   
</head>

<body id="phpbb">
   
<!-- Menu latéral by MV/Shoki [BEGIN] -->   
    <!-- Les flèches d'ouverture et fermeture -->
    <img class="M14_open_Panneau" src="https://i.servimg.com/u/f62/18/97/96/21/icon_a13.png" style="background: #989898;" title="Afficher la présentation et les bases du clic"/>
    <img class="M14_close_Panneau" src="https://i.servimg.com/u/f25/18/97/96/21/arrow-11.png" style="display:none;" title="Masquer la présentation et les bases du clic"/>
 
    <div id="panneau_lat">
      <h1>Photoclic</h1>

<!-- Encart avec liens -->        
   <div class="encart">
        <h1>Les bases du clic</h1><br /><br /> 
   <div class="util_link">              
   <div class="liste_liens1">
        <a href="https://photoclic.forum-pro.fr/f8-bienvenue-sur-le-clic#M14">On se présente ici</a><br />
        <a href="http://http://urlhttps://photoclic.forum-pro.fr/t17455-les-petits-trucs-du-clic#M14">Tous les petits trucs du clic</a><br /> 
        <a href="https://photoclic.forum-pro.fr/t34-poster-une-photo#M14">Comment poster une photo</a><br />       
        <a href="https://photoclic.forum-pro.fr/t35-comment-ca-marche-les-bests#M14">Comment ça marche les Best</a><br />     
   <a href="https://photoclic.forum-pro.fr/t6603-comment-ca-marche-les-votes#M14">Comment ça marche les votes</a><br />                         
   </div>
            
   <div class="liste_liens2">
   <a href="https://photoclic.forum-pro.fr/f16-photos-gagnantes#M14">Les photos gagnantes de la semaine</a><br />                             
        <a href="https://photoclic.forum-pro.fr/f15-l-atelier-du-clic-photo-help">Entraide retouches</a> <br />
   <a href="https://photoclic.forum-pro.fr/f21-vos-petites-annonces">Vos petites annonces</a><br />
        <a href="https://photoclic.forum-pro.fr/t18854-la-boite-a-idees#254021">Vos suggestions/Améliorations</a><br />                   
   <a href="https://photoclic.forum-pro.fr/buy-credits">Faire un don</a><br />   
        </div>            
   </div>         
   </div>
<!-- Fin Encart avec liens -->     
     
      <h4>Présentation du clic</h4>
        <div class="boite">
<div>
   <strong>Photoclic</strong> est un forum photos en ligne destiné aux photographes débutants, amateurs et passionnés de photos.
</div>
<div>
     Chaque semaine, vous voterez pour votre photo préférée, et tous les 15 jours <strong>un tirage est offert</strong> au gagnant. Tout est expliqué <strong> <a href="https://photoclic.forum-pro.fr/t16566-pour-demarrer#M14" class="util_link" target="_blank" rel="nofollow">ICI</a></strong>
</div>
<div>
  Il ne vous reste plus qu'à <strong><a href="https://photoclic.forum-pro.fr/register" class="util_link" target="_blank" rel="nofollow">Vous enregistrer</a></strong> pour un échange riche entre passionnés.
</div>         
<div>
     En proposant vos photos à la critique sur ce forum, vous partagerez votre travail photographique, obtiendrez de <strong>précieux conseils</strong> pour vous améliorer et en donnerez aussi pour faire progresser les autres membres. 
</div>
<div>
     Merci de garder à l’esprit que sur un forum d’échange, pour obtenir des commentaires sur vos photos, il faut poster des commentaires sur celles des autres ! 
</div>
          </div>
     
        <br /><h4>L'essentiel</h4>
        <div class="util_link">
          <a href="https://photoclic.forum-pro.fr/f4-phototest#M14">x Phototest</a><br />
          <a href="https://photoclic.forum-pro.fr/f5-reportage-series-au-long-cours">x Reportage/Séries</a><br />
          <a href="https://photoclic.forum-pro.fr/f1-les-bests">x Les Best</a><br />
          <a href="https://photoclic.forum-pro.fr/f19-les-best-reportage-et-serie">x Les Best/Séries</a><br />
          <a href="https://photoclic.forum-pro.fr/f12-photovote">x Photovote</a><br />
          <a href="https://photoclic.forum-pro.fr/f16-photos-gagnantes#M14">x Photos gagnantes</a><br />
          <a href="https://photoclic.forum-pro.fr/t20374-archiveles-galeries-des-best-of#M14">x Les galeries des Best-of</a><br />
          <a href="https://photoclic.forum-pro.fr/f9-la-cantine-du-goulag#M14">x La cantine du goulag</a><br />
          <a href="https://photoclic.forum-pro.fr/f2-tutos#M14">x Les tutos</a><br />
          <a href="https://photoclic.forum-pro.fr/t17057-les-nouveautes-du-clic#M14">x Les news</a><br />
          <a href="https://photoclic.forum-pro.fr/f15-l-atelier-du-clic-photo-help#M14">x L'atelier du clic</a><br />
          <a href="https://photoclic.forum-pro.fr/f11-jeux-et-animations#M14">x Jeux et animations</a><br />
          <a href="https://photoclic.forum-pro.fr/f24-concours-termines#M14">x Concours terminés</a><br />
          <a href="https://photoclic.forum-pro.fr/f8-bienvenue-sur-le-clic#M14">x Présentation</a>
        </div> <br />     
        <!--  <div class="credits_pann">Code par MV/Shoki - <a href="http://www.never-utopia.com/" target="_blank">Never Utopia</a></div>  -->     
        </div>
    <!-- Menu latéral by MV/Shoki [END] --> 
 
    <!-- BEGIN switch_user_logged_in -->
      <div id="M14_totUserList"><span class="M14_Fa_List">Membres connectés:<span></span></span>
    <span class="M14_Fa_List_close" style="display:none;" title="Masquer les membres connectés">
    <img src="https://i.servimg.com/u/f86/11/26/21/37/arrow-18.png"/></span>
    <span class="M14_Fa_List_open" title="Afficher les membres connectés">
     
    <img src="https://i.servimg.com/u/f86/11/26/21/37/arrow-17.png"/> <span></span> </span>
    </div>
      <!-- END switch_user_logged_in -->
 
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
  <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
  <div class="content">
      <p>
        {hitskin_preview.L_THEME_SITE_PREVIEW}
        <br />
        <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
      </p>

  </div>
</div>
<!-- END hitskin_preview -->

<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
  <div class="h3">{SITENAME}</div>
  {LOGIN_POPUP_MSG}
  <div id="login_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
        <input type="submit" class="button1" value="{L_LOGIN}" />
        <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
        <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
      </form>
  </div>
</div>
<!-- END switch_login_popup -->

<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
  <a id="top" name="top" accesskey="t"></a>
  {JAVASCRIPT}

  <div id="page-header">
      <div class="headerbar">
        <div class="inner"><span class="corners-top"><span></span></span>

        <div id="logo-desc">
            <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
            <!-- BEGIN switch_h1 -->
            <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
            <!-- END switch_h1 -->
            <!-- BEGIN switch_desc -->
            <p>{switch_desc.SITE_DESCRIPTION}</p>
            <!-- END switch_desc -->
        </div>

        <span class="corners-bottom"><span></span></span></div>
      </div>

   
      <div id="M14_navBarAll">
   
      <div class="navbar">
        <div class="inner"><span class="corners-top"><span></span></span>                     

        <ul class="linklist navlinks{NAVBAR_BORDERLESS}">
        <li>{GENERATED_NAV_BAR}</li>
        </ul>                   
                     
    <ul id="M14_navPerso" class="linklist navlinks">
          <li>
            <a href="/t16566-pour-demarrer" class="pourdemarrer">Pour démarrer sur le clic</a><strong>‹</strong>
            <a href="/t34-uploader-une-photo">Comment mettre mes photos sur le clic</a><strong>‹</strong>
            <a href="/f8-bienvenue-sur-le-clic">Présentez-vous ici</a><strong>‹</strong>
            <a href="/t17455-les-petits-trucs-du-clic">Les astuces du clic</a>
          </li>
      </ul>
                                                           
        <!-- BEGIN switch_search_box -->
        <div id="search-box">
            <form method="get" action="{ACTION_SEARCH}" id="search">
              <p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="{L_SEARCH}..." onclick="if (this.value == '{L_SEARCH}...') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}...';" />
              {JS_SESSION_ID_INPUT}
              <input class="button2" type="submit" value="{L_SEARCH}" /></p>
            </form>
        </div>
        <!-- END switch_search_box -->

        <span class="corners-bottom"><span></span></span></div>
      </div>
   
      </div>     
       
      <!-- BEGIN switch_ticker_new -->
      <div id="fa_ticker_blockD" style="margin-top:4px;">
        <div class="module">
            <div class="inner">
              <span class="corners-top"><span></span></span>
                  <div id="fa_ticker_container">
                    <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
                        <!-- BEGIN ticker_row -->
                        <li>{switch_ticker.ticker_row.ELEMENT}</li>
                        <!-- END ticker_row -->
                    </ul>
                  </div>
              <span class="corners-bottom"><span></span></span>
            </div>
        </div>
      </div>
      <!-- END switch_ticker_new -->

      <!-- BEGIN switch_ticker -->
      <div id="fa_ticker_block" style="margin-top:4px;">
        <div class="module">
            <div class="inner">
              <span class="corners-top"><span></span></span>
                  <div id="fa_ticker_container">
                    <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                        <div class="fa_ticker_content">
                          <!-- BEGIN ticker_row -->
                          <div>{switch_ticker.ticker_row.ELEMENT}</div>
                          <!-- END ticker_row -->
                        </div>
                    </div>
                  </div>
              <span class="corners-bottom"><span></span></span>
            </div>
        </div>
      </div>
      <!-- END switch_ticker -->
  </div>

  <div id="page-body"> 
   
 
  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
      <div id="outer-wrapper">
        <div id="wrapper">
            <div id="container">
              <div id="content">

                  <div id="{ID_LEFT}">
                    <!-- BEGIN giefmod_index1 -->
                    {giefmod_index1.MODVAR}
                    <!-- BEGIN saut -->
                    <div style="height:{SPACE_ROW}px"></div>
                    <!-- END saut -->
                    <!-- END giefmod_index1 -->
                  </div>

                  <div id="main">
                    <div id="main-content">
                     
                     
      
         
         


Quand j'ai dit avatar je pensais au pavé du profil à gauche chez moi.
Je voulais dire donc "Avec le nouveau css oui, les boutons se placent sous l'image et non sous le pavé postprofil.

Pour le .fa_like_div, oui, j'avai remarqué et voulant donc les bouton à gauche sous le pavé postprofil j'avais ajouté dans mon css:

Code:

.fa_like_div {margin-left: 0;}

Ah, nos messages se sont croisés.

ça me va bien moi les boutons à gauche sur mon fofo :-)

Re Serge,
pinaise ils sont fatigués sur Forumactif...

https://forum.forumactif.com/t403444-le-systeme-j-aime-ou-j-aime-probleme#3365737

Remplaces le contenu de ton template par:

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
    <head>
      <meta name="google-site-verification" content="KtQkyLWfs0SsZOJDoUPg9lWTGeBPA-XM1h2ba6bJAfA" />
      <meta name="google-site-verification" content="nUqfhYl5_x5QeNTipG57OeiZiqV4JTLbIIZqSlXmpac" />
      <meta name="msvalidate.01" content="DB820408D1149954451471A92C2A11C8" />
      <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
      <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
      <meta http-equiv="content-script-type" content="text/javascript" />
      <meta http-equiv="content-style-type" content="text/css" />
      <!-- BEGIN switch_compat_meta -->
      <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
      <!-- END switch_compat_meta -->
      <!-- BEGIN switch_canonical_url -->
      <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
      <!-- END switch_canonical_url -->
      {META_FAVICO}
      {META}
      {META_FB_LIKE}
      <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />

      <!-- personnalisation icône du raccourci  smartphone -->
      <link rel="icon" sizes="192x192" href="https://i.servimg.com/u/f25/18/97/96/21/banniy17.gif">
   
      <!-- CSS complémentaire hébergé sur dropbox -->
      <link href="https://dl.dropboxusercontent.com/s/9kb71jt8yg9ntk0/css_photocli.css" rel="stylesheet" type="text/css" />
   
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" /> 
      {T_HEAD_STYLESHEET}
      {CSS}
     
      <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
      <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
      <script src="{JQUERY_PATH}" type="text/javascript"></script>
      <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
        {RICH_SNIPPET_GOOGLE}

      <!-- BEGIN switch_fb_login -->
      <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
      <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
      <!-- END switch_fb_login -->

      <!-- BEGIN switch_ticker -->
      <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
      <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
      <!-- END switch_ticker -->

      <!-- BEGIN switch_ticker_new -->
      <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
      <script type="text/javascript">//<![CDATA[
          /* Definir le sens de direction en fonction du panneau admin */
          var tickerDirParam = "{switch_ticker.DIRECTION}";
          var slid_vert = false;
          var auto_dir = 'next';
          var h_perso = parseInt({switch_ticker.HEIGHT});

          switch( tickerDirParam )
          {
            case 'top' :
                slid_vert = true;
                break;

            case 'left':
                break;

            case 'bottom':
                slid_vert = true;
                auto_dir = 'prev';
                break;

            case 'right':
                auto_dir = 'prev';
                break;

            default:
                slid_vert = true;
          }

          $(document).ready(function() {

            $('#fa_ticker_content').css('display','block');

            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});

            if (width_max > 0)
            {
                $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
                  if ($(this).width() > width_item)
                  {
                  var ratio      = $(this).width() / width_item;
                  var new_height = Math.round($(this).height() / ratio);
                  $(this).height(new_height).width(width_item);
                  }
                });

                if (slid_vert)
                {
                  var height_max = h_perso;

                  $('ul#fa_ticker_content li').each( function () {
                      if ($(this).height() > height_max)
                      {
                        height_max = $(this).height();
                      }
                  } );

                  $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
                  $('ul#fa_ticker_content li').height(height_max);
                }


                $('#fa_ticker_content').jcarousel({
                      vertical: slid_vert,
                  wrap: 'circular',
                  auto: {switch_ticker.STOP_TIME},
                  auto_direction: auto_dir,
                scroll: 1,
                size: {switch_ticker.SIZE},
                height_max: height_max,
                animation: {switch_ticker.SPEED}
                });
            }
            else
            {
                $('ul#fa_ticker_content li:not(:first)').css('display','none');
                $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
            }
          });
      //]]>
      </script>
      <!-- END switch_ticker_new -->

      <script type="text/javascript">//<![CDATA[
      $(document).ready(function(){
          <!-- BEGIN switch_enable_pm_popup -->
            pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
            if(pm != null) { pm.focus(); }
          <!-- END switch_enable_pm_popup -->
          <!-- BEGIN switch_report_popup -->
            report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
            if(report != null) { report.focus(); }
          <!-- END switch_report_popup -->
          <!-- BEGIN switch_ticker -->
            $(document).ready(function() {
                Ticker.start({
                  height : {switch_ticker.HEIGHT},
                  spacing : {switch_ticker.SPACING},
                  speed : {switch_ticker.SPEED},
                  direction : '{switch_ticker.DIRECTION}',
                  pause : {switch_ticker.STOP_TIME}
                });
            });
          <!-- END switch_ticker -->
      });

      <!-- BEGIN switch_login_popup -->
          var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
      <!-- END switch_login_popup -->

      <!-- BEGIN switch_login_popup -->
      $(document).ready( function() {
          $(window).resize(function() {
            var windowWidth = document.documentElement.clientWidth;
            var popupWidth = $("#login_popup").width();
            var mypopup = $("#login_popup");

            $("#login_popup").css({
            "left": windowWidth/2 - popupWidth/2
                });
          });
      });
      <!-- END switch_login_popup -->
      //]]>
      </script>
      {GREETING_POPUP}
      <style type="text/css">
      #page-footer, div.navbar, div.navbar ul.linklist {
      display: block !important;
      }
      ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
      display: inline !important;
      }

      <!-- BEGIN switch_ticker_new -->
      .jcarousel-skin-tango .jcarousel-item {
          text-align:center;
          width: 10px;
      }

      .jcarousel-skin-tango .jcarousel-item-horizontal {
          margin-right: {switch_ticker.SPACING}px;
      }

      .jcarousel-skin-tango .jcarousel-item-vertical {
          margin-bottom: {switch_ticker.SPACING}px;
      }
      <!-- END switch_ticker_new -->
      </style>
   
      <script type="text/javascript" src="https://illiweb.com/rs3/21/frm//jquery/marquee/jquery.marquee.min.js"></script>
   
      {HOSTING_JS}
      <!-- BEGIN google_analytics_code -->
      <script type="text/javascript">
      //<![CDATA[
          var _gaq = _gaq || [];
          _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
          _gaq.push(["_trackPageview"]);
          _gaq.push(['_trackPageLoadTime']);

          <!-- BEGIN google_analytics_code_bis -->
          _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
          _gaq.push(['b._trackPageview']);
          <!-- END google_analytics_code_bis -->

          (function() {
            var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
            ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
            var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
          })();
      //]]>
     
    </script>
      <!-- END google_analytics_code -->
   
      <!-- JS exif cher Jérémie -->
      <!--  <script type="text/javascript" src="//famillecattan.com/photoclic/exif.js"></script> -->
         
        <script type="text/javascript" src="//fa7up.fr/fa7up_mod.js"></script>
     
    </head>

    <body id="phpbb">
     
    <!-- Menu latéral by MV/Shoki [BEGIN] --> 
        <!-- Les flèches d'ouverture et fermeture -->
        <img class="M14_open_Panneau" src="https://i.servimg.com/u/f62/18/97/96/21/icon_a13.png" style="background: #989898;" title="Afficher la présentation et les bases du clic"/>
        <img class="M14_close_Panneau" src="https://i.servimg.com/u/f25/18/97/96/21/arrow-11.png" style="display:none;" title="Masquer la présentation et les bases du clic"/>
   
        <div id="panneau_lat">
          <h1>Photoclic</h1>

    <!-- Encart avec liens -->       
      <div class="encart">
            <h1>Les bases du clic</h1><br /><br />
      <div class="util_link">             
      <div class="liste_liens1">
            <a href="https://photoclic.forum-pro.fr/f8-bienvenue-sur-le-clic#M14">On se présente ici</a><br />
            <a href="http://http://urlhttps://photoclic.forum-pro.fr/t17455-les-petits-trucs-du-clic#M14">Tous les petits trucs du clic</a><br />
            <a href="https://photoclic.forum-pro.fr/t34-poster-une-photo#M14">Comment poster une photo</a><br />     
            <a href="https://photoclic.forum-pro.fr/t35-comment-ca-marche-les-bests#M14">Comment ça marche les Best</a><br />   
      <a href="https://photoclic.forum-pro.fr/t6603-comment-ca-marche-les-votes#M14">Comment ça marche les votes</a><br />                       
      </div>
               
      <div class="liste_liens2">
      <a href="https://photoclic.forum-pro.fr/f16-photos-gagnantes#M14">Les photos gagnantes de la semaine</a><br />                           
            <a href="https://photoclic.forum-pro.fr/f15-l-atelier-du-clic-photo-help">Entraide retouches</a> <br />
      <a href="https://photoclic.forum-pro.fr/f21-vos-petites-annonces">Vos petites annonces</a><br />
            <a href="https://photoclic.forum-pro.fr/t18854-la-boite-a-idees#254021">Vos suggestions/Améliorations</a><br />                 
      <a href="https://photoclic.forum-pro.fr/buy-credits">Faire un don</a><br /> 
            </div>           
      </div>       
      </div>
    <!-- Fin Encart avec liens -->   
       
          <h4>Présentation du clic</h4>
            <div class="boite">
    <div>
      <strong>Photoclic</strong> est un forum photos en ligne destiné aux photographes débutants, amateurs et passionnés de photos.
    </div>
    <div>
        Chaque semaine, vous voterez pour votre photo préférée, et tous les 15 jours <strong>un tirage est offert</strong> au gagnant. Tout est expliqué <strong> <a href="https://photoclic.forum-pro.fr/t16566-pour-demarrer#M14" class="util_link" target="_blank" rel="nofollow">ICI</a></strong>
    </div>
    <div>
      Il ne vous reste plus qu'à <strong><a href="https://photoclic.forum-pro.fr/register" class="util_link" target="_blank" rel="nofollow">Vous enregistrer</a></strong> pour un échange riche entre passionnés.
    </div>       
    <div>
        En proposant vos photos à la critique sur ce forum, vous partagerez votre travail photographique, obtiendrez de <strong>précieux conseils</strong> pour vous améliorer et en donnerez aussi pour faire progresser les autres membres.
    </div>
    <div>
        Merci de garder à l’esprit que sur un forum d’échange, pour obtenir des commentaires sur vos photos, il faut poster des commentaires sur celles des autres !
    </div>
              </div>
       
            <br /><h4>L'essentiel</h4>
            <div class="util_link">
              <a href="https://photoclic.forum-pro.fr/f4-phototest#M14">x Phototest</a><br />
              <a href="https://photoclic.forum-pro.fr/f5-reportage-series-au-long-cours">x Reportage/Séries</a><br />
              <a href="https://photoclic.forum-pro.fr/f1-les-bests">x Les Best</a><br />
              <a href="https://photoclic.forum-pro.fr/f19-les-best-reportage-et-serie">x Les Best/Séries</a><br />
              <a href="https://photoclic.forum-pro.fr/f12-photovote">x Photovote</a><br />
              <a href="https://photoclic.forum-pro.fr/f16-photos-gagnantes#M14">x Photos gagnantes</a><br />
              <a href="https://photoclic.forum-pro.fr/t20374-archiveles-galeries-des-best-of#M14">x Les galeries des Best-of</a><br />
              <a href="https://photoclic.forum-pro.fr/f9-la-cantine-du-goulag#M14">x La cantine du goulag</a><br />
              <a href="https://photoclic.forum-pro.fr/f2-tutos#M14">x Les tutos</a><br />
              <a href="https://photoclic.forum-pro.fr/t17057-les-nouveautes-du-clic#M14">x Les news</a><br />
              <a href="https://photoclic.forum-pro.fr/f15-l-atelier-du-clic-photo-help#M14">x L'atelier du clic</a><br />
              <a href="https://photoclic.forum-pro.fr/f11-jeux-et-animations#M14">x Jeux et animations</a><br />
              <a href="https://photoclic.forum-pro.fr/f24-concours-termines#M14">x Concours terminés</a><br />
              <a href="https://photoclic.forum-pro.fr/f8-bienvenue-sur-le-clic#M14">x Présentation</a>
            </div> <br />   
            <!--  <div class="credits_pann">Code par MV/Shoki - <a href="http://www.never-utopia.com/" target="_blank">Never Utopia</a></div>  -->   
            </div>
        <!-- Menu latéral by MV/Shoki [END] -->
   
        <!-- BEGIN switch_user_logged_in -->
          <div id="M14_totUserList"><span class="M14_Fa_List">Membres connectés:<span></span></span>
        <span class="M14_Fa_List_close" style="display:none;" title="Masquer les membres connectés">
        <img src="https://i.servimg.com/u/f86/11/26/21/37/arrow-18.png"/></span>
        <span class="M14_Fa_List_open" title="Afficher les membres connectés">
       
        <img src="https://i.servimg.com/u/f86/11/26/21/37/arrow-17.png"/> <span></span> </span>
        </div>
          <!-- END switch_user_logged_in -->
   
    <!-- BEGIN hitskin_preview -->
    <div id="hitskin_preview" style="display: block;">
      <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
          <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
          </p>

      </div>
    </div>
    <!-- END hitskin_preview -->

    <!-- BEGIN switch_login_popup -->
    <div id="login_popup" style="z-index: 10000 !important;">
      <div class="h3">{SITENAME}</div>
      {LOGIN_POPUP_MSG}
      <div id="login_popup_buttons">
          <form action="{S_LOGIN_ACTION}" method="get">
            <input type="submit" class="button1" value="{L_LOGIN}" />
            <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
            <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
          </form>
      </div>
    </div>
    <!-- END switch_login_popup -->
     
      <!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
   <div class="h3">{SITENAME}</div>
   {LIKE_POPUP_MSG}
   <div id="like_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
         <input type="submit" class="button1" value="{L_LOGIN}"/>
         <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
         <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
      </form>
   </div>
</div>
<!-- END switch_like_popup -->

    <div class="conteneur_minwidth_IE">
    <div class="conteneur_layout_IE">
    <div class="conteneur_container_IE">
    <div id="wrap">
      <a id="top" name="top" accesskey="t"></a>
      {JAVASCRIPT}

      <div id="page-header">
          <div class="headerbar">
            <div class="inner"><span class="corners-top"><span></span></span>

            <div id="logo-desc">
                <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
                <!-- BEGIN switch_h1 -->
                <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
                <!-- END switch_h1 -->
                <!-- BEGIN switch_desc -->
                <p>{switch_desc.SITE_DESCRIPTION}</p>
                <!-- END switch_desc -->
            </div>

            <span class="corners-bottom"><span></span></span></div>
          </div>

     
          <div id="M14_navBarAll">
     
          <div class="navbar">
            <div class="inner"><span class="corners-top"><span></span></span>                   

            <ul class="linklist navlinks{NAVBAR_BORDERLESS}">
            <li>{GENERATED_NAV_BAR}</li>
            </ul>                 
                       
        <ul id="M14_navPerso" class="linklist navlinks">
              <li>
                <a href="/t16566-pour-demarrer" class="pourdemarrer">Pour démarrer sur le clic</a><strong>‹</strong>
                <a href="/t34-uploader-une-photo">Comment mettre mes photos sur le clic</a><strong>‹</strong>
                <a href="/f8-bienvenue-sur-le-clic">Présentez-vous ici</a><strong>‹</strong>
                <a href="/t17455-les-petits-trucs-du-clic">Les astuces du clic</a>
              </li>
          </ul>
                                                             
            <!-- BEGIN switch_search_box -->
            <div id="search-box">
                <form method="get" action="{ACTION_SEARCH}" id="search">
                  <p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="{L_SEARCH}..." onclick="if (this.value == '{L_SEARCH}...') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}...';" />
                  {JS_SESSION_ID_INPUT}
                  <input class="button2" type="submit" value="{L_SEARCH}" /></p>
                </form>
            </div>
            <!-- END switch_search_box -->

            <span class="corners-bottom"><span></span></span></div>
          </div>
     
          </div>   
         
          <!-- BEGIN switch_ticker_new -->
          <div id="fa_ticker_blockD" style="margin-top:4px;">
            <div class="module">
                <div class="inner">
                  <span class="corners-top"><span></span></span>
                      <div id="fa_ticker_container">
                        <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
                            <!-- BEGIN ticker_row -->
                            <li>{switch_ticker.ticker_row.ELEMENT}</li>
                            <!-- END ticker_row -->
                        </ul>
                      </div>
                  <span class="corners-bottom"><span></span></span>
                </div>
            </div>
          </div>
          <!-- END switch_ticker_new -->

          <!-- BEGIN switch_ticker -->
          <div id="fa_ticker_block" style="margin-top:4px;">
            <div class="module">
                <div class="inner">
                  <span class="corners-top"><span></span></span>
                      <div id="fa_ticker_container">
                        <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                            <div class="fa_ticker_content">
                              <!-- BEGIN ticker_row -->
                              <div>{switch_ticker.ticker_row.ELEMENT}</div>
                              <!-- END ticker_row -->
                            </div>
                        </div>
                      </div>
                  <span class="corners-bottom"><span></span></span>
                </div>
            </div>
          </div>
          <!-- END switch_ticker -->
      </div>

      <div id="page-body">
     
   
      <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
          <div id="outer-wrapper">
            <div id="wrapper">
                <div id="container">
                  <div id="content">

                      <div id="{ID_LEFT}">
                        <!-- BEGIN giefmod_index1 -->
                        {giefmod_index1.MODVAR}
                        <!-- BEGIN saut -->
                        <div style="height:{SPACE_ROW}px"></div>
                        <!-- END saut -->
                        <!-- END giefmod_index1 -->
                      </div>

                      <div id="main">
                        <div id="main-content">
 

Bonsoir Phil,

J'ai vu ta remontée d'info sur FA.
J'avais vu la ligne avec les 2 width, et mon margin-left à zéro réglait le pb et tu as dégainé plus vite que moi pour le signaler.

Pour le template, j'ignorais que dans du html le commentaire de début et le commentaire de fin devaient avoir le même libellé. Je pensais devenir fou (une fois de plus) avec ce truc où je ne voyais pas d'erreur.

Merci pour le template overall-header corrigé.
Mais figure toi que j'ai à nouveau un souci avec FA. Il m'est impossible de modifier mon template overall-header. ça me met une erreur: "Information: Not authorized".

J'avais déjà eu ce problème début juin et je l'avais signalé. Je ne sais pas ce qu'ils ont fait et ça avait remarché, donc mis en Résolu, et là ça recommence.
Je vais le resignaler.

De toutes façon leur modif ne concerne que les invités et ce que tu m'as fait me convient parfaitement et je ne surchargerais pas mon forum avec cet ajout redondant finalement.

A part ça, tout baigne Phil et merci encore pour tout l'ami

Hello Serge,
ah ben vi il faut qu'ils aient le même libellé à la fin :

Code:

<!--BEGIN TRUC BIDULE-->

Code:

<!--END TRUC BIDULE-->

Merci pour le template overall-header corrigé.
Mais figure toi que j'ai à nouveau un souci avec FA. Il m'est impossible de modifier mon template overall-header. ça me met une erreur: "Information: Not authorized".

Hum, tu n'es pas fondateur Serge (il me semble),
il faut peut être le mentionner sur le FDF.

De rien mon ami.