[PHPBB3] Cadre des messages dans un sujet

Hello Mustard,
pour avoir cet affichage, il vaut mieux passer par la version Phpbb2 car ta version, ne pourra jamais donner ce que tu souhaites .

malheureusement je dois rester en phpbb3.
Effectivement j'ai oublié de préciser que l'image de droite est en phpbb2, à gauche c'est phpbb3

pour le profil j'ai trouvé un design qui me plait pour l'encadrement ombré et la barre de titre . Sauriez vous quel code je doit mettre pour ça (contrairement à cette image je compte garder les noms et info du profil) ?
PS: c'est un montage photoshop:

Pour ma question 1 ca semble résolu avec

Code:

.postbody .content
{
border-top: 1px solid #bababa;
}

il me reste à réduire l'espace en rouge et l'espace du profil en bleu

Hello Mustard,

Effectivement j'ai oublié de préciser que l'image de droite est en phpbb2, à gauche c'est phpbb3

J'avais remarqué .

Savez vous quel code CSS intégrer ? RESOLU

Pour afficher des icônes de messages, suis ce tutoriel:
https://forum.forumactif.com/t183061-les-icones-de-messages#1783800

Suis juste cette procédure:

Créer une icône de messages

On part alors sur cette idée:
https://www.milouze14.com/t32549-phpbb3-cadre-des-messages-dans-un-sujet#619935

il me reste à réduire l'espace en rouge et l'espace du profil en bleu

Si tu as des espaces aussi conséquent , c'est qu'il y a eut un style d'ajouté.
Merci de me fournir la c.s.s

Et le template viewtopic_body (si seulement celui-ci a été modifié) :
Affichage/Templates/Général/viewtopic_body


J'ai commençais a travailler sur ta demande et voici déjà une ébauche:



La barre à une couleur de fond par défaut ensuite elle prendra la couleur du speudo si celui ci à une couleur d'attribuée.

La partie gauche a était réduite,
mais on est assez limité car si on décale encore plus sont sera obligé de cacher une partie des descriptions comme le montre la flèche:




Tu peux aller voir sur ce sujet pour voir en direct:
https://testphpbb3.1fr1.net/t361-test-sujet-avec-photo-1

Merci pour ta réponse et merci pour ton travail, bon y beaucoup de chose ,le temps d'éplucher tout ça et je reviens ...

Prends ton temps cher ami .

Mon Template Viewtopic_body n'a pas été modifié

voici mon CSS complet

Code:

#M14_sujets-recents .h3{color:#5d93ff;font-weight: bold; font-size: 14px; font-style: normal; text-shadow: 1px 1px 3px rgba(0,0,0,0.3);} /*titre widget*/
#M14_sujets-recents a[href^="/t"]{color: #56687f;font-weight: bold; font-size: 13px; font-style: normal;} /*sujet*/
#M14_sujets-recents  .inner{color: #929292; font-size: 11px;} /*auteur+date*/

/* Menu portail */
ul.linklist li {
  font-size: 12px;
  line-height: 2.2em;
}

/* suppression FAQ dans menu */
.navbar {display: none;}

/* chgt nom menu */
a.mainmenu[href="/forum"] { font-size:0 }
    a.mainmenu[href="/forum"]:after {
      content:"Forum";
      font-size:12px
    }

/* Centrage des titres de modules (Thierz) */
.introduction .h3,.module .h3,.postbody .h3{text-align:center; text-shadow: 1px 1px 3px rgba(0,0,0,0.3);}

/* Masquage du widget de recherche (Thierz) */
#search-box{display:none;}

/**************************************************/
/* Boutons de navigation dans la toolbar (Thierz) */
/**************************************************/
#fa_toolbar {
  user-select: none;
}

.toolbar-thierz-item{
  display:inline-block;
}

.toolbar-thierz-item>a{
  line-height: 30px;
  padding: 0 5px;
}

.toolbar-thierz-item>a:hover{
  cursor: pointer;
  color: #FFF;
}

.toolbar-thierz-item-menu-list {
  background-color: #FFF;
  border: 1px solid #333;
  border-top: 0 solid #FFF;
  display: block;
  line-height: 32px;
  list-style-type: none;
  margin: 0;
  min-width: 175px;
  padding: 0 10px 0 10px;
  position: absolute;
  width: auto;
  z-index: 999;
}

.toolbar-thierz-item-menu-list :link, .toolbar-thierz-item-menu-list :visited {
  color: #00569C!important;
}

.ouvert {
  background-color: #fff;
  color: #333;
}

.ouvert>a, .ouvert>a:hover {
  color: #333;
}

.navbar>.inner {display: none;} /* Masquage navbar (Thierz) */

/* ----- alerte Mp ----- */
/*Apparence MP sur la barre de navigation*/
    a.mainmenu.M14_newMp{color:red !important;}
/*Apparence MP sur la Toolbar*/
    a.M14_alertMp
    {
    color: white !important;
    font-size: 12px !important;
    text-decoration: none !important;
    margin-right: 50px;
    line-height: 30px;
    background-color: red;
    padding: 0 5px;
    }
/* ----- fin alerte MP ----- */


/* --------------------Toolbar--------------------- */
        div#fa_toolbar {
    background-color: #24384c;  /* Couleur de fond */
    border-radius: 0 0 50px 50px;  /* Arrondis les bords de la toolbar */
    /*box-shadow: 0 0 5px #000000;  /* Affiche une ombre */
    margin: auto;  /* Centre la toolbar */
    width: 98%;  /* Modifie la longueur de la toolbar */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* Repositionne correctement le contenu de la toolbar */
}

/* ----------suppression icone dans toolbar -----*/
    div#fa_search {display:none!important;}
    span#fa_share {display:none!important;}


/* -------------couleurs titre categoiries -------------*/
.table-title>h2 { color: #5d93ff; font-weight: bold; font-size: 15px; text-shadow: 2px 2px 3px rgba(0,0,0,0.3); }

/* --------------bandeau défilant en portail en test------------------*/
    #fa_ticker_block { width:600px; margin: 0 auto; }

/* ------------------cadres catégories dans page forum------------------- */
ul.topiclist li.header dl dd {color: #7e7e7e;}
ul.topiclist.forums li.row  {border-color: #979797; } /*traits horizontaux catégories*/
ul.topiclist.forums dl dd {border-color: #979797;}  /* traits verticaux  catégories*/

/* ---------taille texte des messages ------------------- */
    .postbody .content { font-size: 14px; }
/* ---------taille titre des messages ------------------- */
    .post h2.topic-title a[href^="/t"]{ font-size: 14px;}

/*BARRE DE SEPARATION PROFIL MESSAGE*/
.postprofile
{
border-color: #bababa;
}

.postbody .content
{
border-top: 1px solid #bababa;
}

/* --------------mini avatar dans citation. marche avec javascript ------------------*/

img.M14_Img_Citation
{
height: 16px;/*hauteur de l avatar*/
width: 16px;/*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*/
}


/* --------cadre profil ------- */
.postprofile dl {
        padding:3px; /* une marge entre la bordure et l'intérieur du bloc */
      margin:2px; /* une marge entre la bordure et l'extérieur du bloc */
      border:2px #ffffff; /* la bordure */
      background:#877756; /*une couleur de fond */
      width:200px; /* largeur */
    }

/* limiteur de taille avatar */
    .postprofile img {
        max-width: 99%;
    }

Merci,
le rendu te convient avant toutes interventions ?

Remplaces tout le contenu du template par celui-ci:

Code:

<!-- BEGIN switch_plus_menu -->
<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(){
      if(typeof(_atc) == "undefined") {
         _atc = {  };
      }
   });
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">
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>

<h1 class="page-title">
   <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</h1>
<div class="topic-actions">
   <div class="buttons">

      <!-- BEGIN switch_user_authpost -->
      <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   
      <!-- END switch_user_authpost -->

      <!-- BEGIN switch_user_authreply -->
      <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
      <!-- END switch_user_authreply -->
   </div>

   <div class="pathname-box">
      <p>
            <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
            <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
            {NAV_CAT_DESC}
        </p>
   </div>

   <p class="right">
        <!-- BEGIN switch_twitter_btn -->
        <span>
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </span>
        <!-- END switch_twitter_btn -->
      <!-- BEGIN switch_fb_likebtn -->
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
      <!-- END switch_fb_likebtn -->
   </p>

   <div class="pagination">
      {PAGE_NUMBER}
      <!-- BEGIN switch_plus_menu -->
       • 
      <a class="addthis_button" href="#">{L_SHARE}</a>
       • 
      <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_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
      //]]>
      </script>
      <!-- END switch_plus_menu -->
   </div>
   <div class="clear"></div>
</div>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->
<p class="left-box">
    <!-- BEGIN switch_isconnect -->
    <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> 
    <!-- END switch_isconnect -->
    <a href="#bottom">{L_GOTO_DOWN}</a>
</p>
<div class="clear"></div>
{POLL_DISPLAY}

<!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
      <div class="post {postrow.hidden.ROW_COUNT}">
         <div class="inner">
            <span class="corners-top"><span></span></span>
            <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
            <div class="clear"></div>
            <span class="corners-bottom"><span></span></span>
         </div>
      </div>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
<div class="M14_barre">
  <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
       
        <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>

        <a id="M14_nuMbEr"class="post-number" href="{postrow.displayed.POST_URL}">#{postrow.displayed.U_POST_ID}</a>
           
      </div>
      <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
         <div class="inner"><span class="corners-top"><span></span></span>
         
         <div class="postbody">
<div class="M14_separate">
            <ul class="profile-icons">
               <li>{postrow.displayed.THANK_IMG}</li>
               <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
               <li>{postrow.displayed.QUOTE_IMG}</li>
               <li>{postrow.displayed.EDIT_IMG}</li>
               <li>{postrow.displayed.DELETE_IMG}</li>
               <li>{postrow.displayed.IP_IMG}</li>
               <li>{postrow.displayed.REPORT_IMG_NEW}</li>
            </ul>
<p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" /> {L_TOPIC_BY} {postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</p>
                        <div class="clearfix"></div>
                          </div>
                          <br />            

            <!-- 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}">+</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">----</div>
               <!-- END switch_no_bar -->

               <!-- BEGIN switch_vote -->
               <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
               <!-- END switch_vote -->
            </div>
            <!-- END switch_vote_active -->

            <div style="display:none"></div>
            <div class="content clearfix">
               <div>{postrow.displayed.MESSAGE}</div>
                  <!-- BEGIN switch_attachments -->
                  <dl class="attachbox">
                     <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                     <dd class="attachments">
                        <!-- BEGIN switch_post_attachments -->
                        <dl class="file clearfix">
                           <dt>
                              <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
                           </dt>
                           <dd>
                              <!-- BEGIN switch_dl_att -->
                              <span><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}</span>
                              <!-- END switch_dl_att -->

                              <!-- BEGIN switch_no_dl_att -->
                              <span>{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}</span>
                              <!-- END switch_no_dl_att -->

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

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

                              <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
                           </dd>
                        </dl>
                        <!-- END switch_post_attachments -->
                     </dd>
                  </dl>
                  <!-- END switch_attachments -->
            </div>
            {postrow.displayed.EDITED_MESSAGE}
            <!-- BEGIN switch_signature -->
            <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
            <!-- END switch_signature -->
         </div>

         <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
            <!-- div class="online2"></div-->
            <dl>
               <dt>
                  {postrow.displayed.POSTER_AVATAR}
                  <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
               </dt>
               <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
               <dd><br /></dd>
               <dd>
                  <!-- BEGIN profile_field -->
                  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                  <!-- END profile_field -->
                  {postrow.displayed.POSTER_RPG}
               </dd>
               <dd><br /></dd>
               <dd>
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
               </dd>
            </dl>
         </div>

         <div class="clear"></div>

         
         <span class="corners-bottom"><span></span></span></div>
      </div>
<p class="right"><a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a></p>
      <!-- BEGIN first_post_br -->
      <hr id="first-post-br" />
      <!-- END first_post_br -->
   <!-- END displayed -->
<!-- END postrow -->

<a name="bottomtitle"></a>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->

<p class="left-box">
    <!-- BEGIN switch_isconnect -->
    <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> 
    <!-- END switch_isconnect -->
    <a href="#top">{L_BACK_TO_TOP}</a>
</p>

<div class="clear"></div>

<div class="noprint">
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<p class="right">{S_WATCH_TOPIC}</p>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</div>

<!-- BEGIN promot_trafic -->
<div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em">
   <span class="corners-top"><span></span></span>
   <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></span>
   <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
   <span class="corners-bottom"><span></span></span>
</div>
<div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em">
   <span class="corners-top"><span></span></span>
   <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></span>
   <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
   <div class="clear"></div>
   <div>
      <!-- BEGIN link -->
      » <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
      <!-- END link -->
   </div>
   <span class="corners-bottom"><span></span></span>
</div>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
   <span class="corners-top"><span></span></span>
   <div class="h3"> {L_FORUM_RULES}</div>
   <div class="clear"></div>
   <table class="postbody">
      <tr>
         <!-- BEGIN switch_forum_rule_image -->
         <td class="logo">
            <img src="{RULE_IMG_URL}" alt="" />
         </td>
         <!-- END switch_forum_rule_image -->
         <td class="rules content">
            {RULE_MSG}
         </td>
      </tr>
   </table>
   <span class="corners-bottom"><span></span></span>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<hr />

<div class="topic-actions">
   <div class="buttons">
      <!-- BEGIN switch_user_authpost -->
      <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   
      <!-- END switch_user_authpost -->

      <!-- BEGIN switch_user_authreply -->
      <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
      <!-- END switch_user_authreply -->
   </div>

   <div class="pathname-box">
      <p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
   </div>

   <div class="pagination">
      {PAGE_NUMBER}
   </div>
</div>
<div class="clear"></div>

<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<fieldset class="jumpbox">
   <label>{L_JUMP_TO}: </label>
   {S_JUMPBOX_SELECT} 
   <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
<fieldset class="quickmod">
   <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}" />
   <label>{L_MOD_TOOLS}: </label>
   {S_SELECT_MOD}&nbsp;
   <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<div class="clear"></div>
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN show_permissions -->
   <div class="h3">{L_TABS_PERMISSIONS}</div>
   {S_AUTH_LIST}
<!-- END show_permissions -->

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

<!-- BEGIN switch_plus_menu -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
<!-- END switch_plus_menu -->


Puis remplaces toute la c.s.s par celle-ci:

Code:

/*ON AFFICHE AU DESSUS DE L AVATAR SI LE MEMBRE EST EN LIGNE*/
.online .postprofile dl:before
{
content:"EN LIGNE"; 
color: white;
background: #8b5;
width: 100%;
display: inline-block;
text-align: center;
height: 18px;
line-height: 18px;
top: -5px;
position: relative;
margin-left: -5px;
}
/*ON AFFICHE AU DESSUS DE L AVATAR SI LE MEMBRE EST HORS LIGNE*/
.post:not(.online) .postprofile dl:before
{
content:"HORS LIGNE"; 
color:white;
background: #999;
width: 100%;
display: inline-block;
text-align: center;
height: 18px;
line-height: 18px;
top: -5px;
position: relative;
margin-left: -5px;
}
.post .inner{width: 100%;}
.post .postprofile
{
width: 18%!important;

}
.post .postbody
{

width: 80%!important;
padding-left: 1%;
}


/*LA BARRE AU DESSUS DES MESSAGES*/
.M14_barre
{
width: 100%;
height: 30px;
line-height:30px;
padding: 2px 0px;
/*la couleur de fond par defaut*/
background-color:#8B9F9C;
}
/*LA COULEUR ET TAILLE DE POLICE SUR TOUTE LA BARRE*/
.M14_barre,.M14_barre h2,#M14_nuMbEr,.M14_barre h2 a[href^="/t"]
{
font-size: 21px;
color:white!important;
}
/*LE TITRE DU SUJET*/
.M14_barre h2 a[href^="/t"]
{
margin-left: 30px;
}
/*LA PARTIE DROITE*/
.M14_barre #M14_nuMbEr
{
float:right;
margin-right: 30px;
}
/*ON DECALE L ICONE*/
.M14_barre h2 img{margin-left:5px;}
/*FIN DE LA BARRE*/
/*LA SEPARATION*/
.M14_separate
{
  border-bottom: 1px solid #8B9F9C;
}

.M14_separate ul
{
  margin-top: -2px;
}
   
#M14_sujets-recents .h3{color:#5d93ff;font-weight: bold; font-size: 14px; font-style: normal; text-shadow: 1px 1px 3px rgba(0,0,0,0.3);} /*titre widget*/
    #M14_sujets-recents a[href^="/t"]{color: #56687f;font-weight: bold; font-size: 13px; font-style: normal;} /*sujet*/
    #M14_sujets-recents  .inner{color: #929292; font-size: 11px;} /*auteur+date*/

    /* Menu portail */
    ul.linklist li {
      font-size: 12px;
      line-height: 2.2em;
    }

    /* suppression FAQ dans menu */
    .navbar {display: none;}

    /* chgt nom menu */
    a.mainmenu[href="/forum"] { font-size:0 }
        a.mainmenu[href="/forum"]:after {
          content:"Forum";
          font-size:12px
        }

    /* Centrage des titres de modules (Thierz) */
    .introduction .h3,.module .h3,.postbody .h3{text-align:center; text-shadow: 1px 1px 3px rgba(0,0,0,0.3);}

    /* Masquage du widget de recherche (Thierz) */
    #search-box{display:none;}

    /**************************************************/
    /* Boutons de navigation dans la toolbar (Thierz) */
    /**************************************************/
    #fa_toolbar {
      user-select: none;
    }

    .toolbar-thierz-item{
      display:inline-block;
    }

    .toolbar-thierz-item>a{
      line-height: 30px;
      padding: 0 5px;
    }

    .toolbar-thierz-item>a:hover{
      cursor: pointer;
      color: #FFF;
    }

    .toolbar-thierz-item-menu-list {
      background-color: #FFF;
      border: 1px solid #333;
      border-top: 0 solid #FFF;
      display: block;
      line-height: 32px;
      list-style-type: none;
      margin: 0;
      min-width: 175px;
      padding: 0 10px 0 10px;
      position: absolute;
      width: auto;
      z-index: 999;
    }

    .toolbar-thierz-item-menu-list :link, .toolbar-thierz-item-menu-list :visited {
      color: #00569C!important;
    }

    .ouvert {
      background-color: #fff;
      color: #333;
    }

    .ouvert>a, .ouvert>a:hover {
      color: #333;
    }

    .navbar>.inner {display: none;} /* Masquage navbar (Thierz) */

    /* ----- alerte Mp ----- */
    /*Apparence MP sur la barre de navigation*/
        a.mainmenu.M14_newMp{color:red !important;}
    /*Apparence MP sur la Toolbar*/
        a.M14_alertMp
        {
        color: white !important;
        font-size: 12px !important;
        text-decoration: none !important;
        margin-right: 50px;
        line-height: 30px;
        background-color: red;
        padding: 0 5px;
        }
    /* ----- fin alerte MP ----- */


    /* --------------------Toolbar--------------------- */
            div#fa_toolbar {
        background-color: #24384c;  /* Couleur de fond */
        border-radius: 0 0 50px 50px;  /* Arrondis les bords de la toolbar */
        /*box-shadow: 0 0 5px #000000;  /* Affiche une ombre */
        margin: auto;  /* Centre la toolbar */
        width: 98%;  /* Modifie la longueur de la toolbar */
    }
   
    div#fa_toolbar div, div#fa_toolbar span {
        margin: 0 15px;  /* Repositionne correctement le contenu de la toolbar */
    }

    /* ----------suppression icone dans toolbar -----*/
        div#fa_search {display:none!important;}
        span#fa_share {display:none!important;}


    /* -------------couleurs titre categoiries -------------*/
    .table-title>h2 { color: #5d93ff; font-weight: bold; font-size: 15px; text-shadow: 2px 2px 3px rgba(0,0,0,0.3); }

    /* --------------bandeau défilant en portail en test------------------*/
        #fa_ticker_block { width:600px; margin: 0 auto; }

    /* ------------------cadres catégories dans page forum------------------- */
    ul.topiclist li.header dl dd {color: #7e7e7e;}
    ul.topiclist.forums li.row  {border-color: #979797; } /*traits horizontaux catégories*/
    ul.topiclist.forums dl dd {border-color: #979797;}  /* traits verticaux  catégories*/

    /* ---------taille texte des messages ------------------- */
        .postbody .content { font-size: 14px; }
    /* ---------taille titre des messages ------------------- */
        .post h2.topic-title a[href^="/t"]{ font-size: 14px;}

    /*BARRE DE SEPARATION PROFIL MESSAGE*/
    .postprofile
    {
    border-color: #bababa;
    }



    /* --------------mini avatar dans citation. marche avec javascript ------------------*/

    img.M14_Img_Citation
    {
    height: 16px;/*hauteur de l avatar*/
    width: 16px;/*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*/
    }



    /* limiteur de taille avatar */
        .postprofile img {
            max-width: 99%;
        }

J'ai supprimé quelques styles qui venaient en conflit avec le mien concernant les profils.
Il suffit d'adapter les couleurs en suivant les commentaires des styles présents au début.

Les barres présentes au dessus de chache messages prendront la couleur du groupe du pseudo.


Pour cela on va ajouter ce script:




Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mets un titre explicite.
Coches Sur les sujets

Déposes ceci:

Code:


$(function(){$('div[class*="post--"]').each(function(){var $this=$(this).prev();
var color=$(this).find('p.author  span').css('color');
if(color){$this.css('backgroundColor',color);}});});


Penses a cliquer sur le bouton

Ensuite, tu auras dans la feuille de style le moyen de modifier le texte des personnes qui sont en ligne ou non.

A toi de modifier les textes si besoin ici dans la feuille de style:

Code:


content:"EN LIGNE";
content:"HORS LIGNE"; 
 

Pour un affichage optimal, il faut donc supprimer l'image du bouton en ligne:


Affichage/Images et couleurs/Gestion des images/Mode avançé

Onglet = Boutons

Pluis supprimes le lien de l'image de "En ligne :"

Ok merci pour ton travail, je vais faire tout ça demain, je n'avais pas vu l'heure avec ce changement d'horaire.
bonne soirée

De rien Mustard,
bonne soirée à toi aussi.

Salut
La barre au dessus du message reste toujours verte, meme si dans le CSS je change le background color, lorsque je rafraichi la page je vois ma couleur une fraction de seconde et ça revient aussitot sur le vert.
comment faire pour changer la couleur ?
J'ai beau cherche le code de ce vert #008214, je ne le trouve nul par, ni dans le CSS, ni dans le Template Viewtopic, ni dans le javascript

Hello Mustard,
la couleur de la barre verte reprend la couleur du pseudo mon ami comme ici en fait.

Comme je te l'avais mentionné ici:
https://www.milouze14.com/t32549-phpbb3-cadre-des-messages-dans-un-sujet#619964

La barre à une couleur de fond par défaut ensuite elle prendra la couleur du speudo si celui ci à une couleur d'attribuée

C'est le script qui reprend la couleur de ce dernier:

Code:


$(function(){$('div[class*="post--"]').each(function(){var $this=$(this).prev();
var color=$(this).find('p.author  span').css('color');
if(color){$this.css('backgroundColor',color);}});});

ah ok j'avais zappé cette info. Interessant
Merci
Par contre je reviens vers toi demain pour une autre précision sur le profil

Si cette demande n'a plus rien a voir avec le titre de ton sujet,
merci d'en ouvrir un autre Mustard .

si si c'est toujours sur le meme sujet mais là j'arrete pour ce soir, je me lève à 4h30 pour aller au boulot donc la suite demain ;)

Ok, bon courage pour demain .

Depuis le nouveau code que tu m'as donné, je n'ai plus de cadre autour du profil comme je l'avais auparavant. J'ai eu beau essayer des choses trouvé sur le net ça ne marche pas, je pense que le code a été tellement changé que les solutions globale sur le net ne fonctionne plus pour moi


J'aimerai bien récupérer ce cadre au lieu de la ligne de séparation verticale entre le Profil et le message
Donc actuellement j'ai maintenant la cas 2) et j'aimerai avoir le cas 1) avec une bordure autour du profil (j'abandonne le fond coloré) et retirer ce trait vertical


PS: il y a bien la barre verte au dessus du style1, elle est juste caché par la toolbar
Merci pour ton aide

Bonsoir mustard,

Ne vas pas chercher des codes de droite et de gauche mon ami car tu vas vite te retrouver avec des erreurs.

Tu peux tester ce style:

Code:


.postprofile{border-color: transparent !important;}
.postprofile dl{border: 2px solid #333;}


Et moi qui a passé 2h à trouver une solution en vain, et toi en deux ligne, hop hop hop  
Merci

Juste quelques détails
Comment centrer la barre "en ligne", j'ai beau jouer avec quelques parametre j'y arrive pas, et aussi réduire l'espace vide entre le profil et le message


Pour rappel je te remet le code CSS de cette partie

Code:

/*ON AFFICHE AU DESSUS DE L AVATAR SI LE MEMBRE EST EN LIGNE*/
.online .postprofile dl:before
{
content:"EN LIGNE";
color: white;
background: #8b5;
width: 100%;
display: inline-block;
text-align: center;
height: 18px;
line-height: 18px;
top: -5px;
position: relative;
margin-left: -5px;
}
/*ON AFFICHE AU DESSUS DE L AVATAR SI LE MEMBRE EST HORS LIGNE*/
.post:not(.online) .postprofile dl:before
{
content:"HORS LIGNE";
color:white;
background: #999;
width: 100%;
display: inline-block;
text-align: center;
height: 18px;
line-height: 18px;
top: -5px;
position: relative;
margin-left: -5px;
}
.post .inner{width: 100%;}
.post .postprofile
{
width: 18%!important;

}
.post .postbody
{

width: 80%!important;
padding-left: 1%;
}


/*LA BARRE AU DESSUS DES MESSAGES*/
.M14_barre
{
width: 100%;
height: 20px;
line-height:20px;
padding: 2px 0px;
/*la couleur de fond par defaut*/
background-color:#24384c;
}
/*LA COULEUR ET TAILLE DE POLICE SUR TOUTE LA BARRE*/
.M14_barre,.M14_barre h2,#M14_nuMbEr,.M14_barre h2 a[href^="/t"]
{
font-size: 14px;
color:white!important;
}
/*LE TITRE DU SUJET*/
.M14_barre h2 a[href^="/t"]
{
margin-left: 30px;
}
/*LA PARTIE DROITE*/
.M14_barre #M14_nuMbEr
{
float:right;
margin-right: 30px;
}
/*ON DECALE L ICONE*/
.M14_barre h2 img{margin-left:5px;}
/*FIN DE LA BARRE*/
/*LA SEPARATION*/
.M14_separate
{
  border-bottom: 1px solid #8B9F9C;
}

.M14_separate ul
{
  margin-top: -2px;
}
/* --------cadre profil ------- */
.postprofile dl {
      padding:8px; /* une marge entre la bordure et l'intérieur du bloc */
      margin:2px; /* une marge entre la bordure et l'extérieur du bloc */
      border:5px ; solid #ff0000;  /* la bordure */
      background:none; /*une couleur de fond */
      width:200px; /* largeur */
    }

/* limiteur de taille avatar */
    .postprofile img {
        max-width: 99%;
  border: 50px;
    }

/* bordure profil*/
.postprofile{border-color: transparent !important;}
.postprofile dl{border: 1px solid #87867f;}

Ha ben cela m'arrive aussi de chercher des trucs et en fait c'est tellement simple
que je cherche midi à quatorze heures .

Tu peux remplacer la css donnée par celle-ci:

Code:

/*ON AFFICHE AU DESSUS DE L AVATAR SI LE MEMBRE EST EN LIGNE*/
    .online .postprofile dl:before
    {
    content:"EN LIGNE";
    color: white;
    background: #8b5;
    width: 100%;
    display: inline-block;
    text-align: center;
    height: 18px;
    line-height: 18px;
    left: 5px;
    top: -8px;
    position: relative;
    margin-left: -5px;
    }
    /*ON AFFICHE AU DESSUS DE L AVATAR SI LE MEMBRE EST HORS LIGNE*/
    .post:not(.online) .postprofile dl:before
    {
    content:"HORS LIGNE";
    color:white;
    background: #999;
    width: 100%;
    display: inline-block;
    text-align: center;
    height: 18px;
    line-height: 18px;
    left: 5px;
    top: -8px;
    position: relative;
    margin-left: -5px;
    }
    .post .inner{width: 100%;}
    .post .postprofile
    {
    width: 18%!important;

    }
    .post .postbody
    {

    width: 80%!important;
    padding-left: 1%;
    }


    /*LA BARRE AU DESSUS DES MESSAGES*/
    .M14_barre
    {
    width: 100%;
    height:30px;
    line-height:30px;
    padding: 2px 0px;
    /*la couleur de fond par defaut*/
    background-color:#24384c;
    }
    /*LA COULEUR ET TAILLE DE POLICE SUR TOUTE LA BARRE*/
    .M14_barre,.M14_barre h2,#M14_nuMbEr,.M14_barre h2 a[href^="/t"]
    {
    font-size: 14px;
    color:white!important;
    }
    /*LE TITRE DU SUJET*/
    .M14_barre h2 a[href^="/t"]
    {
    margin-left: 30px;
    }
    /*LA PARTIE DROITE*/
    .M14_barre #M14_nuMbEr
    {
    float:right;
    margin-right: 30px;
    }
    /*ON DECALE L ICONE*/
    .M14_barre h2 img{margin-left:5px;}
    /*FIN DE LA BARRE*/
    /*LA SEPARATION*/
    .M14_separate
    {
      border-bottom: 1px solid #8B9F9C;
    }

    .M14_separate ul
    {
      margin-top: -2px;
    }
    /* --------cadre profil ------- */
    .postprofile dl {
          padding:8px 0px; /* une marge entre la bordure et l'intérieur du bloc */
          margin: 0px 2px !important;/* une marge entre la bordure et l'extérieur du bloc */
          padding: 8px 0px 8px 0px;
          border: 1px solid #87867f;  /* la bordure */
          background:none; /*une couleur de fond */
          width: 100%!important; /* largeur */
        }

    /* limiteur de taille avatar */
        .postprofile img {
            max-width: 99%;
      border: 50px;
        }

    /* suppression bordure d origine*/
    .postprofile{border-color: transparent !important;}
 

On ne pourra guère faire mieux mon ami.

Ensuite j'ai volontairement augmenter la hauteur (de 10px) de la barre précédent les messages.

en fait t'as juste élargi le cadre du profil pour réduire le vide, moi je pensais plutot à garder la largeur de 200px du cadre profil et ramener vers la gauche (agrandir) la partie message pour qu'elle colle un peu plus au cadre du profil.

Pour la barre au dessus, je l'avais volontairement réduite vu que j'avais réduit la taille de la police. je toruve la barre trop haute ainsi. J'ai remis 20px a moins qu'il y ait une raison d'etre à 30

Ah ben non,
j'ai ajouté pas mal de chose pour l'adapter au positionnement de tout le reste.
Ensuite la taille de police, je n'ai pas eut l'information et cela compte beaucoup..

Si tu as un compte admin en MP, je suis preneur .


Cette version est assez compliquée a coder concernant les messages.

Ok, je t'envoie ça par MP. je te l'avais déja envoyé il y a quelques jours mais tu ne l'as peut etre plus

Pour qu'on soit bien sur le meme but je t'ai mis une capture avec en haut ce que j'aimerai avoir et ne bas ce qu'il y a actuellement et à modifier ou déplacer si possible. Ne te prend pas la tête si tu n'y arrives pas