Raccourcir l'affichage de longs liens

[petitefeuille]

Bonjour,

J'avais utilisé ce travail "Raccourcir l'affichage de longs liens" mais je m'aperçois que le l'URL est resté dans sa longueur et pas que celui-ci !

Voici l'exemple de l'URL d'un membre qui m'a posté ce matin :

Code:

https://www.notre-planete.info/actualites/3284-prochaine_ere_glaciaire#:~:text="Ce%20r%C3%A9chauffement%20se%20traduit%20par,plus%20courtes%20(...)&text=Alors%20qu'une%20p%C3%A9riode%20glaciaire,ann%C3%A9es%20%C3%A0%2020%20000%20ans).

J'ai utilisé le CSS, mais ça coupe les images , donc j'ai mis le JS, mais ça ne change rien.

Pouvez-vous m'aider s'il vous plait ?

Merci d'avance

mes amitiés

[Ombeline30]

Bonjour @Petitefeuille,

Pour le javascript il faut l'adapter, repère les valeurs ci-dessous, je t'indique ce qu'elles veulent dire, à toi après coup de les modifier en fonction de la taille de tes posts

55 => longueur que le lien doit dépasser pour être raccourci (55 représente un nombre de caractères)
39 => nombre de caractère à partir du début à mettre avant le …
10 => nombre de caractère à partir de la fin à mettre après le …

[petitefeuille]

Bonjour Ombeline, oui j'avais bien vu , mais comment je gère les "pixels" puisque ce sont les images qui sont réduites aussi.
Le problème, c'est que le lien de l'image et le lien d'un doc sont lié, comment je fais ? Mon problème, c'est qu'en réduisant l'url d'un sujet, ça me réduit toutes mes images postées ... il faudrait trouver un encodage qui soit indépendant ... d'un côté réduction des url d'un sujet sans que ça perturbe l'url d'une image ...

[Ombeline30]

Tiens c'est bizarre car je ne rencontre pas ce problème avec les images impactées, quand tu postes les images tu passes bien par l'onglet "Insérer une image" ?

Ou alors on peut essayer ceci, tu enlèves le javascript et on ne travaillera qu'avec du css :

Tu as celui-ci pour les liens que tu avais déjà installé :

Code:

.postbody a {
  display: inline-block;
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

Et pour un code qui n'affecterait que les images des messages, tu peux ajouter ceci :

Code:

.postbody img {
  display: inline-block;
  max-width: "mettre une largeur maximale"px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

Code à tester à adapter

[petitefeuille]

Bonjour Ombeline et merci de t'occuper de moi


j'ai bien installé les CSS et désactivé le JS

Code:

/*réduction lien et image*/
.postbody a {
  display: inline-block;
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.postbody img {
  display: inline-block;
  max-width: "800"px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

voilà ce que ça donne :

Image N°1 sans CSS juste avec le JS on voit que rien ne change !





Image N°2 avec les CSS et désactivé le JS , on voit bien le lien raccourci, mais l'image aussi en sachant que mes images sont réglés à 800 px maxi

[Ombeline30]

Re coucou @petitefeuille

De rien avec plaisir

Et en essayant comme ceci ? (on rajoute !important à la taille pour faire passer cette donnée en priorité)

Code:

.postbody img {
  display: inline-block;
  max-width: "800"px !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

[petitefeuille]

Bonjour Ombeline, malheureusement ça change rien pour l'image, elle est toujours coupée ...

[Ombeline30]

Re coucou @petitefeuille

On va essayer autre chose ;-)

Les 2 CSS partagés initialement à la place du javascript, tu vas les supprimer donc aussi bien le (postbody a) que le (postbody img)

Tu vas mettre le script ci-dessous :

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Codes Javascript

Mets un titre explicite.
Coches sur les sujets.

Code:

<script type="text/javascript">
   $(function() {
      $('.postbody a').each(function() {
         if($(this).children('img').length == 0) {
            $(this).addClass('lien-texte');
         }
      });
   });
</script>

Pour le CSS tu vas y mettre ceci ;-)

Code:

.lien-texte {
   display: inline-block;
   max-width: 300px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   vertical-align: bottom;
}

[petitefeuille]

l'image oui, elle est bien, mais le lien reste long .. Voici ce que tu me demandes :

mon Template:

Code:

                <script type="text/javascript">
                    //<![CDATA[
                    var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
                    $(function(){
                      _atc.cwait = 0;
                      $('.addthis_button').mouseup(function(){
                          if ($('#at15s').css('display') == 'block') {
                            addthis_close();
                          }
                      });
                    });

                    var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
                    showHiddenMessage = function(id)
                    {
                        try
                        {
                            var regId = parseInt(id, 10);
                            if( isNaN(regId) ) { regId = 0; }
                     
                            if( regId > 0)
                            {
                                $('.post--' + id).toggle(0, function()
                            {
                                if( $(this).is(":visible") )
                                {
                                  $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                                }
                                else
                                {
                                  $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                                }
                            });
                            }
                        }
                        catch(e) { }
                 
                      return false;
                    };

                    //]]>
                    </script>

                    <table width="100%" border="0" cellspacing="2" cellpadding="0">
                      <tr>
                          <td align="left" valign="middle" nowrap="nowrap">
                            <span class="nav">
                            <!-- BEGIN switch_user_authpost -->
                            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
                            <!-- END switch_user_authpost -->
                            <!-- BEGIN switch_user_authreply -->
                            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
                            <!-- END switch_user_authreply -->
                            </span>
                          </td>
                          <td align="left" valign="middle" nowrap="nowrap">
                            <!-- BEGIN switch_twitter_btn -->
                            <span id="twitter_btn" style="margin-left: 6px; ">
                            <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
                            <script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
                            </span>
                            <!-- END switch_twitter_btn -->
                            <!-- BEGIN switch_fb_likebtn -->
                            <span id="fb_likebtn" style="margin-left: 6px; ">
                                <iframe src="https://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
                            </span>
                            <!-- END switch_fb_likebtn -->
                          </td>
                          <td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                          <td align="right" valign="bottom" nowrap="nowrap" width="100%">
                            <span class="gensmall bold">
                                <a class="addthis_button" href="https://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
                                <!-- BEGIN switch_plus_menu -->
                                | .
                                <script type="text/javascript">//<![CDATA[
                                  var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
                                  var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
                                  var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
                                  var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
                                  var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
                               
                                  insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
                                //]]>
                                </script>
                                <!-- END switch_plus_menu -->
                            </span>
                          </td>
                      </tr>
                    </table>

                    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;">
                      <tr align="right">
                          <td class="catHead" colspan="3" height="28">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td width="9%" class="noprint"> </td>
                                  <td align="center" class="t-title">
                                      <h1 class="cattitle"> {TOPIC_TITLE}</h1>
                                  </td>
                                  <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
                                </tr>
                            </table>
                          </td>
                      </tr>
                      <!-- BEGIN topicpagination -->
                      <tr>
                          <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
                      </tr>
                      <!-- END topicpagination -->
                      {POLL_DISPLAY}
                      <tr>
                          <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
                          <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
                      </tr>
                      <!-- BEGIN postrow -->
                      <!-- BEGIN hidden -->
                      <tr>
                          <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
                      </tr>
                      <!-- END hidden -->
                      <!-- BEGIN displayed -->
                                    <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
                          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                              <center>   
                                <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -50px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                               
                         
                              <strong class="M14_strong">{postrow.displayed.POSTER_NAME}</strong></span></center><br />
                                <span class="postdetails poster-profile">
                                  <center>
{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}                         
<div class="M14_avatar">{postrow.displayed.POSTER_AVATAR}</div></center><br /><br />

                                  <br />
                                  <div align="center"class="M14_ThanksImg"style="display:none;">
                                    <img src="https://i.servimg.com/u/f62/15/86/06/11/coup_d10.png"/></div>   
                                 
                            <!-- BEGIN profile_field -->
        <div class="M14_profil">{postrow.displayed.profile_field.LABEL}
          <span class="M14_content">{postrow.displayed.profile_field.CONTENT}
          {postrow.displayed.profile_field.SEPARATOR}</span>
                                          </div>
        <!-- END profile_field -->
                                {postrow.displayed.POSTER_RPG}
                            </span><br />
                            <div class="test"></div>                           
                            <img src="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
                          </td>
                          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td colspan="2">
<span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: <a class="M14_postdetails"href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a>  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                                  <tr><td colspan="2"valign="top" nowrap="nowrap" class="post-options"><span></span>
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                                  </td>
                                    </tr>
                                </tr>
                                                                  <tr>
                                                                                                      <td colspan="2" class="hr">
                                      <hr />
                                  </td>
                                </tr>
                                <tr>
                                  <td colspan="2">
                                      <!-- BEGIN switch_vote_active -->
                              <div class="vote gensmall">
                                <!-- BEGIN switch_vote -->
                                <div class="vote-button">
                                      <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}"title="Donner un avis positif" alt="Avis positif"></a>
                                    </div>
                                        <!-- END switch_vote -->

                                <!-- BEGIN switch_bar -->
                                <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                                    <!-- BEGIN switch_vote_plus -->
                                    <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                                    <!-- END switch_vote_plus -->

                                    <!-- BEGIN switch_vote_minus -->
                                    <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                                    <!-- END switch_vote_minus -->
                                </div>
                                <!-- END switch_bar -->
                <!-- BEGIN switch_no_bar -->
                                            <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar" style="display: none;">----</div>
                                            <!-- END switch_no_bar -->
             
                                            <!-- BEGIN switch_vote -->
                                            <div class="vote-button" style="display: none;"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}"></a></div>
                                            <!-- END switch_vote -->
                              </div>
                              <!-- END switch_vote_active -->
                                      <div class="postbody">

                                        <div>{postrow.displayed.MESSAGE}</div>

                                        <!-- BEGIN switch_attachments -->
                                        <dl class="attachbox">
                                            <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                                            <dd>
                                              <!-- BEGIN switch_post_attachments -->
                                              <dl class="file">
                                                  <dt>
                                                    <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                                    <!-- BEGIN switch_dl_att -->
                                                    <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                                    <!-- END switch_dl_att -->

                                                    <!-- BEGIN switch_no_dl_att -->
                                                    {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                                    <!-- END switch_no_dl_att -->
                                                  </dt>

                                                  <!-- BEGIN switch_no_comment -->
                                                  <dd>
                                                    <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                                  </dd>
                                                  <!-- END switch_no_comment -->

                                                  <!-- BEGIN switch_no_dl_att -->
                                                  <dd>
                                                    <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                                  </dd>
                                                  <!-- END switch_no_dl_att -->

                                                  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                                              </dl>
                                              <!-- END switch_post_attachments -->
                                            </dd>
                                        </dl>
                                        <!-- END switch_attachments -->

                                        <div class="clear"></div>
                                        <!-- BEGIN switch_signature -->
                                        <div class="signature_div">
                                            {postrow.displayed.SIGNATURE}
                                        </div>
                                        <!-- END switch_signature -->
      <!-- BEGIN switch_likes_active -->
    <div class="fa_like_div">
    <!-- 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 -->
    </div>
    <!-- END switch_likes_active -->                                     

    <div class="M14_Thank_Cont">
    <div><span class="M14_Texte_liste">Le membre suivant remercie</span>
    <span class="M14_ThankUser"></span> pour ce message : <a target="_blank" href="" class="M14_Thank_link"></a><br />
    </div>
    <div class="M14_Thank_list"><div></div></div>
    </div>

                                      </div>
                                      <span class="gensmall M14_edit">{postrow.displayed.EDITED_MESSAGE}</span>
                                  </td>
                                </tr>
                            </table>
 <!-- BEGIN switch_likes_active -->
 <div class="fa_like_div">
 <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="15px" height="15px" 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>{postrow.displayed.switch_likes_active.L_LIKE}</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="15px" height="15px" 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 -->                         
                          </td>
                      </tr>
                      <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
                          <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
                            <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
                          </td>
                          <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td valign="middle">
                                      {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
                                  </td>
                                </tr>
                            </table>
                          </td>
                      </tr>
                                        <!-- BEGIN first_post_br -->
                    </table>
                    <br />
                    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
                      <tr>
                          <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
                          <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
                      </tr>
                      <!-- END first_post_br -->
                      <!-- END displayed -->
                      <!-- END postrow -->
                      <!-- BEGIN no_post -->
                      <tr align="center">
                          <td class="row1" colspan="3" height="28">
                            <span class="genmed">{no_post.L_NO_POST}</span>
                          </td>
                      </tr>
                      <!-- END no_post -->
                      <tr align="right">
                          <td class="catBottom" colspan="3" height="28">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td width="9%" class="noprint"> </td>
                                          <td align="center" class="t-title"><a name="bottomtitle"></a><div class="cattitle">{TOPIC_TITLE}</div></td>
                                  <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
                                </tr>
                            </table>
                          </td>
                      </tr>
                    </table>
                    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
                      <tr>
                          <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
                          <!-- BEGIN topicpagination -->
                          <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
                          <!-- END topicpagination -->
                      </tr>
                      <!-- BEGIN switch_user_logged_in -->
                      <!-- BEGIN watchtopic -->
                      <tr>
                          <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
                      </tr>
                      <!-- END watchtopic -->
                      <!-- END switch_user_logged_in -->
                    </table>

                    <!-- BEGIN promot_trafic -->
                    <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
                      <tr>
                          <td class="catBottom" height="28">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                          <td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
                                  <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
                                </tr>
                            </table>
                          </td>
                      </tr>
                    </table>

                    <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
                      <tr>
                          <td class="catBottom" height="28">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                          <td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
                                  <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                                </tr>
                            </table>
                          </td>
                      </tr>
                      <tr>
                          <td class="row2 postbody" valign="top">
                            <!-- BEGIN link -->
                            » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
                            <!-- END link -->
                          </td>
                      </tr>
                    </table>
                    <!-- END promot_trafic -->

                    <!-- BEGIN switch_forum_rules -->
                    <table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
                      <tbody>
                          <tr>
                            <td class="catBottom">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                  <tbody>
                                      <tr>
                                        <td valign="top">
                                                    <div class="cattitle"> {L_FORUM_RULES}</div>
                                        </td>
                                      </tr>
                                  </tbody>
                                </table>
                            </td>
                          </tr>
                          <tr>
                            <td class="row1 clearfix">
                                <table>
                                  <tr>
                                      <!-- BEGIN switch_forum_rule_image -->
                                      <td class="logo">
                                        <img src="{RULE_IMG_URL}" />
                                      </td>
                                      <!-- END switch_forum_rule_image -->
                                      <td class="rules postbody">
                                        {RULE_MSG}
                                      </td>
                                  </tr>
                                </table>
                            </td>
                          </tr>
                      </tbody>
                    </table>
                    <!-- END switch_forum_rules -->

                    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                          <td class="row2" colspan="2" align="center" style="padding:0px">
                            <!-- BEGIN switch_user_logged_in -->
                            <a name="quickreply"></a>
                            {QUICK_REPLY_FORM}<br />
                            <!-- END switch_user_logged_in -->
                          </td>
                      </tr>
                      <tr>
                          <td style="margin:0; padding: 0;" colspan="2">
                            <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
                                <tbody>
                          <!-- BEGIN show_permissions -->
                          <tr>
                            <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
                            <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
                          </tr>
                          <!-- END show_permissions -->
                          <tr>
                            <td class="catBottom" colspan="2" height="28">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                      <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                                      <!-- BEGIN show_permissions -->
                                      <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                                      <!-- END show_permissions -->
                                  </tr>
                                </table>
                            </td>
                          </tr>
                      </tbody>
                            </table>
                          </td>
                      </tr>
                      <tr>
                          <td style="margin:0; padding: 0;" colspan="2">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
                                <tbody>
                          <tr>
                            <td class="catBottom" colspan="2" height="28">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                      <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                                      <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
                                  </tr>
                                </table>
                            </td>
                          </tr>
                      </tbody>
                            </table>
                          </td>
                      </tr>
                    </table>

                    <form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
                    <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
                      <tr>
                          <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
                            <span class="nav">
                                <!-- BEGIN switch_user_authpost -->
                                <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
                                <!-- END switch_user_authpost -->
                                <!-- BEGIN switch_user_authreply -->
                                <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
                                <!-- END switch_user_authreply -->
                            </span>
                          </td>

                          <!-- BEGIN viewtopic_bottom -->
                          <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
                          <!-- END viewtopic_bottom -->

                          <!-- BEGIN moderation_panel -->
                          <td align="center">
                            <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
                          </td>
                          <td align="center" width="250">
                            <span class="gensmall"> </span>
                          </td>
                          <!-- END moderation_panel -->
                      </tr>
                    </table>
                    </form>

                    <!-- BEGIN viewtopic_bottom -->
                    <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
                      <tr>
                          <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
                            <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
                                <input type="hidden" name="t" value="{TOPIC_ID}" />

                                <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
                                <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

                                <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
                            </form>
                          </td>
                      </tr>
                    </table>
                    <!-- END viewtopic_bottom -->

                    <!-- BEGIN switch_image_resize -->
                    <script type="text/javascript">
                    //<![CDATA[
                    $(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
                    //]]>
                    </script>
                    <!-- END switch_image_resize -->
                    <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

[petitefeuille]

mon CSS

Code:



/*ON DESACTIVE L AGE DES MEMBRES FETANT LEURS ANNIVERSAIRE*/
.M14_Qeel_BIRTHDAY .anniv{font-size:0px;}
/*ON DESACTIVE LES MEMBRES NONS AUTORISES DANS LE QUEEL*/
.M14_qeel_disabled{display:none;}
/*ON SUPPRIME LE SOULIGNEMENT DES PSEUDOS DANS LE QEEL*/
table.M14_Qeel_CONNECTED_MEMBERS a[href^="/u"],.M14_membersAvatars a[href^="/u"],
.M14_Qeel_BIRTHDAY a[href^="/u"]
{text-decoration:none!important;}

/* ON AJOUTE UNE VIRGULE DANS LE QEEL APRES CHAQUE PSEUDO*/
.M14_Qeel_CONNECTED_MEMBERS a[href^="/u"]:after,
.M14_membersAvatars a[href^="/u"]:not(.M14_QeelAvatar):after
{
content:" ,";
}

/* ON AJOUTE UN POINT DANS LE QEEL APRES LE DERNIER PSEUDO*/
.M14_Qeel_CONNECTED_MEMBERS a[href^="/u"]:last-of-type:after,
.M14_membersAvatars a[href^="/u"]:not(.M14_QeelAvatar):last-of-type:after
{
content:" . ";
}
span.anniv:after{content:" , ";font-size:10px!important;}
.M14_Qeel_BIRTHDAY  span.anniv:last-of-type:after{content:" .";}


.test{width: 100%;margin-top: 10px;}
.postbody .content img[src*="giphy.com"]{max-width:100px;max-height:100px;}
#gifactif_results div img{max-width:50px;max-height:50px;border-radius:100%;}

.zoom
{
  -moz-transition-duration:1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s ;
 transition-duration:1s;
}
 
.zoom:hover
{
  -moz-transform:scale(1.3);
  -webkit-transform:scale(1.3);
  -o-transform:scale(1.3);
 -ms-transform:scale(1.3);
  transform:scale(1.3);
}



.M14_profil.inventaire {width: 190px !important;margin-left:13px;}
.M14_profil.inventaire .label{display:none;}
.M14_profil.inventaire .M14_content{width:32px;height:32px;border-radius:32px;display: block;float: left;}
.M14_profil.inventaire .M14_content img{width:32px;height:32px;border-radius: 32px;}
 

.Message_tag_fr
{
background:lightsteelblue;
border-radius: 10px;
color: #fff!important;
margin: 10px 0 0 15%;
padding: 15px 15px 15px 15px;
width: 70%;
}


/*BOUTON CHATBOX ENVOYER*/
#chatbox_messenger_form input[id="submit_button"]{height: 22px!important;padding: 2px 2px 4px 2px!important;position: relative;top: -2px;}
/*Le texte ==> Message :*/
#chatbox_messenger_form label[for="message"]{top: -3px !important;position: relative;margin-right: 3px;}
/*Le corps de message de la chatbox*/
#chatbox_messenger_form input[name="message"]{height: 18px!important;position: relative;top: -3px;}
#chatbox_main_options, a[href^="/chatbox/index"],#chatbox_option_co,#chatbox_option_disco{color: white !important;}
#chatbox_main_options a[href^="javascript"], a[href^="/chatbox/index"]{text-decoration:none!important;}
.M14_cont_chatBox{width:90%;margin-left:5%;height:60px;background-color:#5E85AC;text-align:center;padding: 3px 3px 10px 3px;margin-top: 10px;margin-bottom: 3px;border-radius:6px;}
.M14_editorchat{font-size:12px;color:white;padding:3px;margin:2px 3px;}
textarea.M14_chat_boxhelp{width:80%;height:30px;text-align:center;padding:2px 0px;border-radius:6px;}
.M14_reset{float: left;}
.M14_copy-code{color:white;font-size:12px;float: right;position: relative;top: -10px;right: 20px;}
.M14_copyinfo{display:none;color:darkred;float:right;font-size:12px;width: 100%;}
.M14_avatarChatBox{height:36px;position: absolute;background-color:white;width: 36px;margin-top:10px;border-radius: 36px;border:1px solid #000;}
.M14_avatarChatBox img{margin:6px;width:24px;height:24px;border-radius:24px;}



/*Le lecteur audio*/
div#fa_ticker_block .fa_ticker_content div div:last-child audio
{
border-radius:10px;
border:2px solid white;
margin-top: 5px;
background:#5E85AC;
}


/*Le conteneur*/
div#fa_ticker_block .forumline
{
box-shadow: 1px 1px 12px #5E85AC;
}




#newsareal1 .topictitle,#newsareal1 .topictitle strong,#newsareal1 h2.topic-title,#newsareal1  a.topictitle
{
font-size:14px!important;
}


img.emojione
{
    height: 35px;
    width: auto!important;
}


/*DEBUT WIDGETS ADMINS MODOS*/
/*premiere lettre en majuscule*/
#M14_topics a.topictitle:first-letter{ text-transform: capitalize;}
/*disposition des sujets et apparence*/
#M14_topics  .topictitle {
color: #0474cc;
text-decoration: none !important;
display: block !important;
margin: 2px 1px 0;
padding: 2px 5px 5px 30px;
border: 1px solid #B1BFC0;
border-radius: 5px;
background: #dedede url('https://i.servimg.com/u/f87/11/26/21/37/inform10.png') no-repeat 5px center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*disposition des sujets et apparence au survol*/
#M14_topics  .topictitle:hover
{
color: #ffffff;
  background:#333333 url('https://i.servimg.com/u/f87/11/26/21/37/inform11.png') no-repeat 5px center;
}
/*FIN WIDGETS ADMINS MODOS*/
/*on colorise les titres catégories ou forums*/
/*rouge*/
.topic_red
{color:#cc0000!important;text-decoration:none!important;font-size:13px;font-weight: 500;font-style: italic;}
/*rouge foncé*/
.topic_darkred
{color:#A5260A!important;text-decoration:none!important;font-size:13px;font-weight: 500;font-style: italic;}
/*rose*/
.topic_pink
{color:#E300BD!important;text-decoration:none!important;font-size:13px;font-weight: 500;font-style: italic;}
/*orange*/
.topic_orange
{color: #ED7F10!important;text-decoration:none!important;font-size:13px;font-weight: 500;font-style: italic;}
.topic_green
{color:#009900!important;text-decoration:none!important;font-size:13px;font-weight: 500;font-style: italic;}
.topic_Navy
{color:#5472AE!important;text-decoration:none!important;font-size:13px;font-weight: 500;font-style: italic;}
a.M14_linkalerte{display:list-item;list-style:none;} 
.M14_alerTeS
{
  position:fixed;
  top:40px;
  right:10px;
    background:#FDFDFD no-repeat 10px center;
    -webkit-background-size:50px;
    -moz-background-size:50px;
    -o-background-size:50px;
    background-size:50px;
    -webkit-box-shadow:0 0 4px rgba(0,0,0,.6);
    -moz-box-shadow:0 0 4px rgba(0,0,0,.6);
    box-shadow:0 0 4px rgba(0,0,0,.6);
    margin-bottom:10px;
    min-height:60px;
    font-size:13px;
    width:200px;
    padding:10px 10px 10px 70px;
    font-family:Helvetica;
    color:#474747;
    }
.M14_alerTeSclose{
    position:absolute;
    right:10px;
    top:5px;
    font-size:15px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    height:16px;
    width:16px;
    text-align:center;
    line-height:13px;
    cursor:pointer;
    }

.M14_alertava{margin-left: -68px;position: absolute;margin-top: -20px;}
.M14_alertava img{max-width:48px;max-height:48px;-webkit-border-radius: 48px;-moz-border-radius: 48px;border-radius: 48px;}
/*DEBUT LES VOTES*/
/*Le bouton vote*/
a[href*="eval=plus"]
{
width:48px!important;
height:48px!important;
background:url(https://i.servimg.com/u/f87/11/26/21/37/69945810.png);
position: absolute;
margin-left: -25px;
}
.vote .vote-bar-plus
{
width:48px!important;
height:48px!important;
margin-left: -24px;
cursor:pointer;background:url(https://i.servimg.com/u/f87/11/26/21/37/check-10.png);
}
.vote .vote-bar{border:none!important;}
/*-- retrait du bouton de vote négatif dans les messages --*/
.vote .vote-button, .vote-no-bar {display:none;}
.vote .vote-button:first-child {display:block;}
.vote {width: 48px;}
/*FIN VOTES*/

.postbody{padding: 5px 60px 5px 5px;}
#chatbox .cb-avatar, #chatbox .cb-avatar > img { width: 50px !important; height: 50px !important; }
#chatbox .cb-avatar { background: transparent !important; box-shadow: none !important; }
body #chatbox .cb-avatar { border: none !important; /*retirer la bordure*/ }
#chatbox .cb-avatar > img{ border-radius: 50% !important; }
#chatbox .user-msg .user, #chatbox .user-msg .msg {
    display: inline;
}
#chatbox_members .cb-avatar > img {
  height:30px;width:30px;
  vertical-align: middle;
}




.M14_tagModo td[class^="row"]{border:2px solid Brique;  }
/*ON ALIGNE LES IMAGES SUR LE PROFIL DES MESSAGES*/
.M14_profil img{vertical-align: middle;}
.M14_tagEditor
{
border:3px solid #1E7FCB;
background-color:gainsboro!important;
padding:3px;
width:80%;
margin-left:10%;
border-radius:10px;
color:black!important;
}
 
 
 
.M14_tagModo .M14_profil,.M14_tagModo .label span,.M14_tagModo .postdetails,.M14_tagModo  a.M14_postdetails,.M14_tagModo .postbody{color:Brique!important;}
.M14_tagEditor:hover:before{-webkit-transform: rotate(-720deg);-moz-transform: rotate(-720deg);-o-transform: rotate(-720deg);transform: rotate(-720deg);margin-left: -96px;margin-top:24px;}
.M14_tagEditor:before{content:'';-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);float:left;margin-left:-48px;margin-top: -24px;width:48px;height:48px;background:url(https://i.servimg.com/u/f87/11/26/21/37/exclam11.png);-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out; }
.M14_tagEditor a.postlink{color:#8b0000!important;}
.M14_tagEditor img{max-width: 80%;}
.M14_tagModo .M14_ProfilPlus a img{border:2px solid red;border-radius:24px;}

table[id^="info"] .catBottom .blur font{color:white!important;}
/*LE TABLEAU DU TAG*/
.M14_tag{padding:5px 10px;border: 1px solid #ccc;box-shadow: 4px 4px 0px #dedede;-moz-box-shadow: 4px 4px 0px #dedede;-webkit-box-shadow: 4px 4px 0px #ccc;margin: auto;margin-top: 20px;width: 70%;background: #fafafa;}
/*LE TITRE DU TAG*/
.M14_tag_titre{color: #69c;font-size: 20px!important;font-weight: bold;letter-spacing: 1px;}
/*LE TEXTE DU TAG*/
.M14_tag_information{color:#a52a2a;background:#eee;padding:5px 8px;border-radius:8px;}
/*LA PARTIE DROITE OU SE TROUVE L IMAGE*/
.M14_tag_img{background-color:#5E85AC;border-radius:8px;}

a#fa_hide {display: none!important;}
#fa_right{margin-right:30px !important;}
select[name="selected_id"],select[name="mode"],input[value="Aller"]
{
background-color: #69c;
color: #fff;
border-radius: 4px;
}
/*INFORMATION AU DESSUS DE L EDITEUR */
#M14_EDITOR
{
background-color: #69c;
background-image: url(https://i.servimg.com/u/f73/17/08/84/19/barre11.gif);
border: #5e85ac;
color: #fff;
font-size: 12px;
font-style: italic;
text-align:center;
padding: 4px;
height: 14px;
line-height: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 5px;
box-sizing: content-box;
}



/*MEMBRE PREMIUM*/
.M14_profil{width:200px;margin: 2px 0px;}
.M14_content{word-wrap: break-word;}

.M14_profil center{color:#366092!important;padding: 2px 6px;}



.spoiler_content{background-color:#F5F5F5!important;}
td.post-options a{margin: 0px 2px;}
td.post-options{top: 5px;position: relative;}
.M14_postdetails,.M14_postdetails:hover{text-decoration:none!important;}
.codebox.spoiler dt span.genmed b{color:black !important;}
.resizebox a.enlarge,.resizebox a.resize,.resizebox a.fullsize{color:black !important;}
div#fa_toolbar span {margin: 0 15px;}
div#fa_toolbar #notif_list li div{margin: 3px 0px 3px 3px;}
.sceditor-toolbar{margin: 0px 5px 0px 5px !important;}


.catHead h1.cattitle,.catBottom .cattitle,.catBottom span.nav,.catBottom span.nav a.nav
{color:white !important;}




input[value="Prévisualisation"],input[value="Envoyer"],input[value="Prévisualiser"],input[value="Brouillon"]
{
background-color:#C0C0C0;
border:1px solid gray;
padding:5px;
box-shadow:2px 2px 10px gray inset;
-moz-box-shadow:2px 2px 10px gray inset;
-webkit-box-shadow:2px 2px 10px gray inset;
border-radius:6px;
}









.boutonhautbas {
    bottom: 40px;
    right: 10px;
    position: fixed;
    z-index: 100;
}


#description
{
color: #0b6091;
font-size: 16px;
font-family: Georgia, serif;
}



.module-title
{color: #F0F8FF!important; }


/* SCRIPT Couleurs Fond sur légende info Rang */

/*on met la taille de police a zero pour masquer les accolades*/
#M14_legend{font-size:0px;}
/*on donne une apparence identique a tous les groupes */
#M14_legend a.gensmall[href^="/g"]
{
  top: 0px;
position: relative;
  font-size:12px !important;
  margin-left:5px;
  padding: 2px 6px;
  color:white !important;
  text-decoration:none !important;
  -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* on donne une couleur de fond differente aus groupes*/
/*Bouton admin*/
#M14_legend a.gensmall[href^="/g1"]
{background:#8B0000;}
/*Bouton modo*/
#M14_legend a.gensmall[href^="/g2"]
{background:#006400;}
/*Bouton membre PremiuMembre*/
#M14_legend a.gensmall[href^="/g20"]
{background:#366092;}
/*Bouton membre Anim' */
#M14_legend a.gensmall[href^="/g22"]
{background: #049EAE;}

/*Bouton membre V.I.P +*/
#M14_legend a.gensmall[href^="/g18"]
{background:#D2691E;}
/*Bouton membre V.I.P*/
#M14_legend a.gensmall[href^="/g9"]
{background:#FF7F50;}
/*Bouton nouveau Membre p F*/
#M14_legend a.gensmall[href^="/g14"]
{background:#3697DA;}




/* Fin SCRIPT Couleurs Fond sur légende info Rang */
span#M14_legend{height:16px;line-height:16px;}
/*APPARENCE DES INFOBULLES*/
.tooltipster-content{background-color:#EEEEEE;border-radius:6px;}
/*SUPPRESSION DU BOUTON PORTAIL*/
a.mainmenu[href="/portal"]{display:none;}
/*Le conteneur des brouillons*/
.M14_Brouillon
{
display:none;
width:230px;
border:2px solid #8E3557;
background-color:#ffffff;
padding: 2px;
position: fixed;
top:40px;
left: 5px;
}
/*La partie annoncant Les sujets concernes*/
.M14_Brouillon center.M14_center{font-size:13px;font-style:italic;color:#8E3557;}
/*Suppression du soulignement des liens*/
.M14_GetBrouillon a.postdetails,.M14_Brouillon a{text-decoration:none!important;}

/*Le conteneur des sujets*/
.M14_GetBrouillon
{
padding: 3px;
min-height:60px;
height:auto;
max-height:200px;
overflow-y:auto;
margin: 3px;
border: 1px dotted #333333;
background-color:#ffffff;
border-radius:6px;
}
/*Apparence des sujets dans le conteneur*/
.M14_GetBrouillon a.postdetails
{
float:left;
margin-left:3px;
color: #01B0F0!important;
font-size:10px !important;
white-space: nowrap;
width:180px;
overflow: hidden;
}
/*L asterisque devant les titres des sujets*/
.M14_GetBrouillon a.postdetails:before
{
content:"*";
color:#8E3557;
position: relative;
top: 2px;
margin-right: 5px;
}











.M14_notImg
{
color:#A92846!important;
font-weight:normal !important;
}

#fa_chat_container {
          background:#FFF;
          border:1px solid #556682;
          border-radius:3px;
          position:fixed;
          right:3px;
          z-index:999;
          overflow:hidden;
          min-width:500px;
          min-height:250px;
          transition:300ms;
        }
     
        #fa_chat {
          border:none;
          width:100%;
          height:100%;
        }
     
        #fa_chat_button {
          color:#FFF;
          line-height:30px;
          margin-left:10px;
          padding:0 5px;
          cursor:pointer;
        }
     
        #fa_chat_button.fa_chat_active {
          color:#333;
          background:#FFF;
        }



/*ON DECALE LA BALISE A*/
.M14_QeelAvatar{margin-right: 5px;}
/*ON ON DONNE UNE TAILLE MAXIMALE AUX AVATARS ET AFFICHE EN BAS*/
.M14_QeelAvatar img{width:32px;height:32px;vertical-align:bottom;border-radius: 50%;}


/*Avatar citation*/
    img.M14_Img_Citation
    {
    height: 25px;/*hauteur de l avatar*/
    width: 25px;/*largeur de l avatar*/
    vertical-align: middle;/*on aligne l avatar*/
    margin-right:8px;/*on decale de la moitie de la largeur de l avatar*/
    border-radius: 16px;/*on arrondi l avatar*/
      /*LES TRANSITIONS AU SURVOL*/
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }
    /*au survol de l avatar des citation on augmente la taille*/
    img.M14_Img_Citation:hover
    {
    height:48px;
    width:48px;
    }



.M14_edit{color: brown !important;}


#widget-arrows {
  position:relative;
  height: 50px;
}
.widget-arrow {
  height: 64px;
  width: 66px;
  border-radius: 4px;
  float: left;
  cursor: pointer;
  background: transparent url(https://nsa39.casimages.com/img/2018/07/18/180718103103123889.png) no-repeat 0 -0px;
}
.widget-arrow.isright {
  float: right;
}
.widget-arrow.isleft.isclosed{background-position: 0 -32px;}
.widget-arrow.isleft.isopened {background-position: 0 32px;}



.M14_ImgLength
    {
    background: red;
    border: 3px solid #000;
    color: #fff !important;
    height: auto;
    margin-left: 30%;
    width: 40%;
    padding: 10px;
    text-align: center;
    border-radius:6px;
    }
    /*Le lien*/
    .M14_ImgLength a
    {
    color:white !important;
    text-decoration:none !important;
    }




/*Bouton resolu liste des sujets*/
    .M14_resolv{color:red;margin-left:3px;margin-right:3px;}



.M14_ProfilPlus{text-align:center;margin-top: 20px;}
.M14_ProfilPlus a{margin:0px 2px 0px 2px;}




/* Les pseudos*/
.M14_Thank_list a[href^="/u"]
{
color:orange !important;
text-decoration:none !important;
margin-right:2px;
}
/*Le caractere entre les pseudos*/
.M14_Thank_list a:before
{
content="("; 
color:darkred;
}
.M14_Thank_list a:after
{
content=") ,"; 
color:darkred;
}
.M14_Thank_Cont{
    margin: 5px;
    margin-bottom: 0;
    clear:both;
    font-style: italic;
    border: 1px solid #bac4cb;
    background: url(https://nsa39.casimages.com/img/2018/08/26/180826063119371873.png) no-repeat;
    background-position: 5px 2px;
    background-color:#DCE1E5;
    padding: 5px;
    min-height:50px;
    padding-left: 50px;
    border-radius: 5px;
    display:none;
    }

/*on redimensionne l image coup de coeur*/
.M14_ThanksImg img
{
width:90px;
height:40px;
}

        .quote {
          border: 1px solid #40A497;
        }
        .quote {font-size:13px;}

    .bouhautbas {
        bottom: 40px;
        right: 10px; /* remplacez left par right pour afficher les boutons à droite */
        position: fixed;
        z-index: 100;
    }
        #savec { position:relative; }
        .save-bloc { dispay: none; color: #555!important; cursor: point; z-index: 999; padding: 5px;  border: 1px solid #BCBCBC; background: #efefef url(https://nsa39.casimages.com/img/2018/11/10/181110060110555115.gif) repeat-x; display:none;top:20px;left:0px;position:absolute; white-space:nowrap; }
        .save-bloc div:hover { color: #050505!important; }
        .save-bloc div { cursor: pointer; }
        .save-bloc select { background: #ccc; border: 1px solid #aaa; margin-bottom: 5px; }
                .element {font-family:"Grand Hotel";}
     
        .mini_ava {
          float: left;
        }
        .mini_ava img {
          width: 40px;
          height: 40px;
          margin: 0 5px;
          border-radius: 10px;
          transition: all 2s;
          -moz-transition: all 2s;
          -webkit-transition: all 2s;
          -o-transition: all 2s;
        }
        .mini_ava img:hover
        {
          width: 80px;
          height: 80px;
        }
        .mini_ava img {float:left;}
        .sceditor-container iframe, .sceditor-container textarea {background:url(https://nsa39.casimages.com/img/2018/11/10/181110060843346447.png) no-repeat center center !important;}
        /*()Bouton avertissement rapide */
       
        .mod_mess, .adm_mess {
        margin: 5px auto;
        width:85%;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        }
       
        .mod_mess a.postlink, .adm_mess a.postlink {
        color: #FFF !important;
        text-decoration: underline !important;
        }
       
        /* administrateur bb-Code - bloc de message d'enregistrement */
       
        .adm_mess {
        background: #e6a3aa;
        -webkit-box-shadow: 4px 4px 0px 0px #352727;
        -moz-box-shadow: 4px 4px 0px 0px #352727;
        box-shadow: 4px 4px 0px 0px #352727;
        }
       
        /* Administrateur bb-Code - mise en page */
        .adm_mess .titl {
        font-size: 15px;
        font-weight: bold;
        padding: 5px;
        border-bottom: 1px dashed #B60505; 
        }
           
        /* Administrateur BB-Code - présentation du texte */
        .adm_mess .titl + div {
        display: block;
        margin-left: 10px;
        padding: 25px 5px 25px 80px;
        background: transparent url(https://nsa39.casimages.com/img/2018/08/28/18082812395278291.png) no-repeat left center;
        }
       
        /* Messages BB-Code - bloc de message d'enregistrement */
       
        .mod_mess {
        background: #93b3ed;
        -webkit-box-shadow: 4px 4px 0px 0px #352727;
        -moz-box-shadow: 4px 4px 0px 0px #352727;
        box-shadow: 4px 4px 0px 0px #352727;
        }
       
        /* Messages BB-Code - Un titre */
        .mod_mess .titl {
        font-size: 15px;
        font-weight: bold;
        padding: 5px;
        border-bottom: 1px dashed #0D4DD3;   
        }
           
        /* modernité BB-Code - présentation du texte */
        .mod_mess .titl + div {
        display: block;
        margin-left: 10px;
        padding: 25px 5px 25px 80px;
        background: transparent url(https://nsa39.casimages.com/img/2018/11/10/181110055944384208.png) no-repeat left center; 
        } 
dl.codebox
{

margin-bottom: 10px;
}
/*COULEUR DES LIENS EN CITATIONS*/
dl.codebox dd a{color:white !important;}   
        dl.codebox dt {
        color: #5E6C58; /* Code coleur HEX de votre choix */
        }
        dd.quote,dd.code{
                        background-color:#7ea4c9;
                        border-radius: 10px 10px 10px 10px;
                        border: 1px solid rgb(0, 0, 0);
                      box-shadow: 5px 5px 10px Black;
                        margin: 0px;
                        font-family: Georgia;
                        font-size: 14px;
                        color: rgb(0, 0, 0);
                        padding: 10px 10px 10px 10px;
                        text-indent: 15px;
                        overflow: hidden;
                          }

    .selectCode { float:right; text-transform: uppercase; cursor:pointer; }
    div.cont_code { clear: right; }
        .selectCode { float:right; text-transform: uppercase; cursor:pointer; font-family: Georgia; }
        div.cont_code { clear: right; }
              dd.spoiler_closed {
        background-color:#7EA4C9; /* couleur noire du fond */
        border:2px #b3acac double; /* bordure blanche en traits peu épais */
        border-radius: 15px; /* tous les côtés sont arrondis */
        -moz-border-radius: 15px; /* tous les côtés sont arrondis */
        -webkit-border-radius: 15px; /* tous les côtés sont arrondis */
        color: #b3acac; /* couleur du texte blanche */
        padding-top: 10px !important; /*espace entre la bordure et le texte*/
        padding-bottom: 10px !important; /*espace entre la bordure et le texte*/
        }




          .signature_div img{
            max-width: 450px !important;
            max-height: 300px !important;
            }

/* ************* CENTRER LES SIGNATURES *********** */
.signature_div { text-align: center; }


div#left img, div#left iframe {
          max-width: 200px !important;
        }
        .forumline.mod_news embed {
            max-width: 200px !important;
        }
        .titrefofo{
          color:#006400;
          font-size: 16px;}
        .gen {
          font-family: Georgia !important;
        }
       
        #M14_Invite
        {
        color:darkblue;
        }
                  /*Hauteur du menu*/
                .M14_pa { height:100px;background:#FFFFFF0;}
       
                /*Position des images dans le menu*/
                .M14_pa img{width:80px;height:72px;padding-top:30px;padding-left:10px;cursor:pointer;
        -webkit-transition: all 0.7s;
        -moz-transition: all 0.7s;
        -o-transition: all 0.7s;
        transition: all 0.7s;}
       
                /*Effet au survol des images avec reprise des tailles originales*/
                .M14_pa img:hover{padding-top:0;width:150px; height:104px;}


    #fa_thanks_message img { vertical-align:middle }
    #fa_thanks_message {
      color:#003366;
      font-size:16px;
      font-weight:bold;
      text-align:center;
      background-color:#BBD2E1;
      border:1px solid #BDB;
      border-radius:6px;
      padding:6px;
      margin:6px;
    }
    /* Coloriser le lien /f4-jeux-a-flood-quizz */
    form[action="/search?search_id=watchsearch"] a.postdetails[href="/f4-jeux-a-flood-quizz"] {
    color: orangered !important;
    }


      #newsareal1 div.topictitle {
        display: block !important;
        margin: 2px 1px 0;
        padding: 2px 5px 5px 30px;
        border: 1px solid #5E85AC;
        border-radius: 5px;
        background: #EEEEEE url('https://nsa39.casimages.com/img/2018/08/28/180828124108482524.png') no-repeat 5px center;
        }
        #newsareal1 div.topictitle:hover {
        background-color: #EEEEEE;
        }
        #newsareal1 div.topictitle a {
        color: #5E85AC !important;
        text-decoration: none !important;
        text-shadow: #fff 1px 1px 0px
        }



    /** BEGIN Quote Collapse */
    .fa-quote-collapsed {
      display:block;
      height:200px;
      overflow:hidden;
      position:relative;
    }
    a.fa-quote-expand {
      display:none;
      position:absolute;
      z-index:1;
      left:50%;
      width:150px;
      margin-left:-75px;
      height:30px;
      line-height:30px;
      bottom:15px;
      text-align:center;
      text-decoration:none;
      color:inherit;
      background-color:#4072A4;
      border:1px #999 solid;
    }
    .fa-quote-collapsed a.fa-quote-expand {
      display: block;
    }
    /** END Quote Collapse */
/*Reponse rapide*/
#quick_reply .sceditor-container
{
  width:750px !important;
  margin-top:20px;
  border-radius:10px 10px 0px 0px !important;
  margin-bottom:-15px;
  border:1px solid #040404 !important;
}
.bodylinewidth {
    border: 1px solid #FFFFFF;
    box-shadow: 0 0 20px black;
}
.row1.over fieldset
{
-webkit-box-shadow: -4px 13px 5px 0px rgba(106,112,108,1);
-moz-box-shadow: -4px 13px 5px 0px rgba(106,112,108,1);
box-shadow: -4px 13px 5px 0px rgba(106,112,108,1);

}
 



.descript {
color: darkblue;
font-family: georgia;
}/* FA7UP_6394db8c: Citer post par MP */
.fapopup, .fapopup-rounded {
    display: inline-block;
    background: none;
    font-family: Georgia, DejaVu Serif, Norasi, serif;
    font-size: 16px;
    color: #000;
    max-width: 100%;
    margin: auto;
    padding: 0;
    overflow: hidden;
    box-shadow: none;
    position: fixed;
    z-index: 99999 !important;
    box-shadow: #000 0 0 0.15em 0.15em;
}
.fapopup *, .fapopup-rounded * {
    margin: 0;
    padding: 0;
    box-shadow: none;
    font-size: 1em;
    background: none;
    color: #000;
    position: relative;
}
.fapopup .close_popup, .fapopup-rounded .close_popup {
    float: right;
    background: #fff;
    color: #4e4e4e;
    margin-left: 1em;
    display: block;
    height: 1em;
    width: 1.4em;
    text-align: center;
    -webkit-box-shadow: #1b1b1b 0 0 0.05em 0.05em;
    -moz-box-shadow: #1b1b1b 0 0 0.05em 0.05em;
    box-shadow: #1b1b1b 0 0 0.05em 0.05em;
}
.fapopup .close_popup:hover, .fapopup-rounded .close_popup:hover {
    cursor: pointer;
    box-shadow: #929292 0 0 0.05em 0.05em;
}
.fapopup .header, .fapopup-rounded .header {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.2em;
    background: #4e4e4e;
    background: -webkit-linear-gradient(0deg, #1b1b1b, #4e4e4e);
    background: -moz-linear-gradient(0deg, #1b1b1b, #4e4e4e);
    background: -o-linear-gradient(0deg, #1b1b1b, #4e4e4e);
    background: linear-gradient(0deg, #1b1b1b, #4e4e4e);
    color: #fff;
    text-shadow: 0px 0px 0.05em #000;
    font-family: Courier, "Courier New", FreeMono, Liberation Mono, monospace;
    font-weight: 900;
    line-height: 1.2;
    vertical-align: top;
    cursor: default;
}
.fapopup .header .title, .fapopup-rounded .header .title {
    color: #fff;
    font-weight: 900;
}
.fapopup .header .title::before, .fapopup-rounded .header .title::before {
    content: ".:";
}
.fapopup .header .title::after, .fapopup-rounded .header .title::after {
    content: ":.";
}
.fapopup .message, .fapopup-rounded .message {
    clear: both;
    color: #000;
    background: #fff;
    padding: 0.2em;
    line-height: 1.2;
    vertical-align: top;
    font-size: inherit;
    overflow: auto;
    width: 90vw;
    height: 80vh;
    max-height: 80vh;
}
.fapopup .message iframe, .fapopup-rounded .message iframe {
    width: 100%;
    height: 100%;
}
.fapopup .w100p, .fapopup-rounded .w100p {
    width: 100% !important;
    box-sizing: border-box !important;
}
/*LE BOUTON CITER PAR MP*/
.post2pm {
cursor: pointer;
text-decoration: none !important;
background: #5E85AC !important;
font-size: 12px;
padding: 2px 3px;
color: #fff !important;
}
#b_fapopup {
    z-index: 99998 !important;
    width: 100%;
    height: 100vh;
    background: #fff;
    opacity: 0.7;
    position: fixed;
    top: 0;
    left: 0;
}
.fapopup-rounded {
    border-radius: 0.3em;
}
.fapopup-rounded .close_popup {
    border-radius: 0.1em;
}
.fapopup-rounded .message {
    border-radius: 0 0 0.2em 0.2em;
}
/* FA7UP_6394db8c_stop */

[Ombeline30]

Re coucou @"petitefeuille j'ai édité mon message entre temps en proposant une autre solution l'as-tu vu ?

[petitefeuille]

Re coucou @"petitefeuille j'ai édité mon message entre temps en proposant une autre solution l'as-tu vu ?

ah non je n'ai pas vu .. je vais le faire en suivant ......

[petitefeuille]

Je suis vraiment désolée … l'image est correcte, mais pas le lien ...

[Ombeline30]

Monhhhhh mais tu n'as pas à être désolée c'est surtout que cela m'embête pour toi j'aimerais tant parvenir à t'aider, on va essayer une dernière chose si cela ne fonctionne pas on attendra une autre aide mais je croise fort les doigts

À la place de ton script tu vas mettre celui-ci :


Et comme CSS tu vas mettre ceci à la place de ce que je t'ai partagé précédemment :

[petitefeuille]

Ombeline je te remercie de ta patience, mais malheureusement ça ne fonctionne pas .. l'image est tronquée ..

Grand merciiiiiiii merciiiii pour ton aide et ton temps

[Ombeline30]

Je suis vraiment désolée de ne pas avoir su t'aider

J'espère que tu recevras vite de l'aide pour régler ton soucis, sinon va faire un coucou chez Milouze14 sur son forum il va régler ton soucis en un rien de temps

Gros bisousssssssss très belle soirée et de rien ce fut avec plaisir même si j'aurais aimé être plus efficace

[petitefeuille]

oui je demanderais à Milouze ... merci encore

[petitefeuille]

je reviens ici, en fait, c'est le lien qui HS! j'ai essayé ce code pris sur ce forum ici :

Code:

$(function(){
  $(".postbody a").each(function() {
    1 == this.childNodes.length && 3 == this.childNodes[0].nodeType && (this.href == this.childNodes[0].nodeValue && 55 < this.childNodes[0].nodeValue.length) && (this.childNodes[0].nodeValue = this.childNodes[0].nodeValue.substr(0, 39) + "…" + this.childNodes[0].nodeValue.substr(-10))
  })
});

Et ça fonctionne bien sur les liens longs ... et ne touche pas les images !

Je remercie aussi Ea pour ses encodages ..

Mon problème est donc résolu, je vous remercie