Affichage des messages sobre

Bonjour à tous !  
Aujourd'hui, on est là pour dur lourd, car je vous propose un affichage complet de vos messages ! Si c'est pas beau tout ça ?

Rendu en image:

Optimisé pour tous les navigateurs - Version PHPBB2

Pour commencer à installer ce nouvel affichage pour vos sujets, nous allons faire cette manœuvre
Panneau d'administration > Affichage > Templates > Général > viewtopic_body
Maintenant on va remplacer le template de base par celui qui va suivre.

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(){

    if(typeof(_atc) == "undefined") {
        _atc = { };
    }
   
    _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>

<link href='https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web|Yanone+Kaffeesatz|Roboto' rel='stylesheet' type='text/css' />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left" valign="middle">
         <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>   
          </tr>
          <tr>
      <td class="nav" valign="middle" width="100%">
      </td>
   </tr>
</table>

<table class="affichagesujet" width="100%" border="0" cellspacing="0" cellpadding="0" >
   <tr>
             <td colspan="3">
                     <h1 class="sujettitre">
                          {TOPIC_TITLE}<br />
           <span class="nav" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                      <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>
                      <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->
                      {NAV_CAT_DESC_SECOND}
                    </span>
                     </h1>
      </td>
   </tr>
   <!-- BEGIN topicpagination -->
   <tr>
             <td colspan="2" align="right" valign="top">
                     <div class="paginationsujet">{PAGINATION}</div>
             </td>
   </tr>
   <!-- END topicpagination -->
   {POLL_DISPLAY}
   <!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
   <tr class="post--{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}">
          <td valign="top">
            <div class="profilmodif">
              <h1 class="pseudo">{postrow.displayed.POSTER_NAME}</h1>
              <div class="profavatar">
                <div class="infos">
                    <!-- BEGIN profile_field -->
                    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}
                    <!-- END profile_field -->
                    {postrow.displayed.POSTER_RPG}
                </div>
                <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
              </div>
              <div class="rang">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
                <!-- BEGIN contact_field -->{postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
              </div>
            </div>
            </td>
                <td valign="top" colspan="2">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr class="heureedit">
                                     <td class="heureedit">
                                          <div class="on">{postrow.displayed.ONLINE_IMG}</div>
                                          <div class="heure">{postrow.displayed.POST_DATE}</div>
                                     </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}">+</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 class="affichmess">
                                                  <div class="imagesedit">{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}</div>
                    <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}" alt="" />

                                 <!-- 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>
                                  </td>
                          </tr>
                  </table>
          </td>
        </tr>
        <!-- BEGIN switch_signature -->
     <tr>
          <td colspan="3">
            <div class="signmss">
              {postrow.displayed.SIGNATURE}
            </div>
          </td>
     </tr>
        <!-- END switch_signature -->
   <!-- BEGIN first_post_br -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td colspan="3" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="paginationsujet" valign="top" {COLSPAN_PAGINATION}>{PAGE_NUMBER}</td>
      <!-- BEGIN topicpagination -->
      <td class="paginationsujet" align="right" valign="top" >{PAGINATION}</td>
      <!-- END topicpagination -->
   </tr>
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <td class="paginationsujet" colspan="2" align="right" valign="top">{S_WATCH_TOPIC}</td>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
</table>

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td colspan="2" align="center">
         <!-- 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 -->
   </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>

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

      <!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</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}&nbsp;<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>

Ensuite, nous allons ajouter le CSS pour donner forme à notre code.

Code:

/*Affichage des sujets par Cheshire Cat*/
/*Message du posteur*/
.affichagesujet{
  margin:10px 0;
  background-color:#BAC49C;
}
.sujettitre{
  margin:0 0 10px;
  padding:5px;
  background-color:#E2DFED;
  color:#8665AB;
  font-family: 'Amaranth', sans-serif;
  font-size:24px;
  text-transform:uppercase;
  text-align:center;
  font-weight:normal;
  letter-spacing:2px;
}
.sujettitre .nav{
  font-size:0;
}
.sujettitre .nav a{
  color:#8665AB!important;
  font-size:12px;
  font-weight:normal;
}
.sujettitre .nav a:not(:last-of-type):after{
  content:"-";
  margin:0 2px;
}
.paginationsujet{
  font-size:12px;
  padding:0 10px;
  color:#504254;
}
.paginationsujet a{
  color:#504254!important;
}
.paginationsujet img{
  height:10px;
  opacity:0.8;
}
.heureedit{
  height:20px;
  padding:10px 10px 0 0;
}
.on{
  float:left;
}
.heure{
  float:right;
  font-family: 'Titillium Web', sans-serif;
  font-size:12px;
  font-weight:bold;
  color:#794F82;
  text-transform:uppercase;
}
.imagesedit{
  text-align:right;
}
.imagesedit img{
  height:20px;
  opacity:0.8;
  margin:0 3px;
}
.affichmess{
  width:480px;
  min-height:357px;
  margin:10px;
  padding:10px;
  background-color:#929a79;
  font-size:12px;
  color:#504254;
  text-align:justify;
  font-family:Roboto;
  line-height:18px;
}
.signmss{
  min-height:100px;
  max-height:200px;
  margin:0 10px 10px;
  padding:10px;
  color:#504254;
  background-color:#E2DFED;
  overflow:auto;
  font-size:12px;
  font-family: 'Roboto', sans-serif;
}
.signmss br:first-of-type,
.signmss br:nth-of-type(2){
  display:none;
}
/*Profil du posteur*/
.profilmodif{
  z-index:1;
  width:200px;
  background-color:#E2DFED;
  margin:0 0 10px 10px;
}
.pseudo{
  margin:0;
  padding:7px 0 5px;
  text-align:center;
  font-family:Yanone Kaffeesatz;
  font-size:23px;
}
.pseudo strong{
  font-weight:normal;
}
.pseudo a{
  text-decoration:none !important;
}
.pseudo a:hover{
  text-decoration:none !important;
}
.profavatar{
  position:relative;
  width:200px;
  height:320px;
  overflow:hidden;
}
.profil_avatar img{
  position:absolute;
  top:-15px;
  left:0px;
  height:320px;
  width:200px;
  margin-top:15px;
  transition: all 600ms;
}
.profavatar:hover .profil_avatar img {
  -webkit-transform:translatex(-200px);
  transform:translatex(-200px);
}
.infos{
  position:absolute;
  top:0px;
  left:0px;
  width:190px;
  height:310px;
  overflow:auto;
  padding:5px;
  text-align:left;
  letter-spacing:0px;
  color:#504254;
  font-size:12px;
  font-family: 'Roboto', sans-serif;
  background-color:#f4ecea;
}
.rang{
  overflow:hidden;
  color:#504254;
  text-align:center;
  font-size:20px;
  letter-spacing:-2px;
  font-family: 'Titillium Web', sans-serif;
}
.rang img{
  height:20px;
  opacity:0.8;
  margin:0 2px;
}

/* empeche certaines infos du profil de depasser*/
.profavatar .infos img,
.profavatar .infos textarea {
  max-width: 100%;
  box-sizing: border-box;
}

N'oubliez pas de bien valider vos templates et votre CSS, et tout est bon !

Merciii ! (ou la meuf qui voulait voir les codes)
En tout cas, c'est beau (=

Coucou, je signale juste que le code est en cours de révision.
Bonne journée

Salut!

Je viens aux nouvelles, quel est l'état de ce LS? (Merci d'éditer pour mettre la bonne icône)

En cours (pas terminé, à corriger, etc.)

En pause (pas terminé et l'auteur a d'autres obligations)

Terminé (complété, en attente de validation d'un responsable)

Abandonné (ou refusé pour une raison quelconque)

Ah désolée j'ai un peu laisser la section en plan :/
Faut que je trouve le temps de terminer de corriger mon LS, désolée ^^'

J'ai tout corrigé je crois o/

Coucou Chesh

C'est niquel, je valide ^^
J'ai juste modifié ce passage là (en rajoutant une classe css pour cibler que l'avatar, sinon mes images dans mon profil se faisaient la malle aussi ) :

Code:

.profavatar img{
  position:absolute;
  top:-15px;
  left:0px;
  height:320px;
  width:200px;
  margin-top:15px;
  transform:translatex(0px, 0px);
  webkit-transform:translatex(0px, 0px);
  transition:all 600ms;
}
.profavatar:hover img{
  transform:translatex(-200px);
  webkit-transform:translatex(-200px);
}

Et rajouté ce petit bout de CSS :

Code:

/* empeche certaines infos du profil de depasser*/
.profavatar .infos img,
.profavatar .infos textarea {
  max-width: 100%;
  box-sizing: border-box;
}

Pif paf pouf, voilà le petit modèle quand on voudra indexer (l'image reste à remplacer) :

Code:

<div class="ls_codage"><div class="lscodage_illu"><img src="https://img11.hostingpics.net/pics/606680Sanstitre.jpg" /></div><div class="tutograph_titre">Affichage des messages sobre</div><div class="tutograph_mots">par Cheshire Cat</div><a href="http://www.never-utopia.com/t59634-affichage-des-messages-sobre" class="tutograph_lien">Voir le Code</a></div><!--NEXT-->

Du coup plus qu'à tagger, indexer et déplacer et voilà

Salut!

Merci du partage, je déplace dans les LS ^^

Merci pour le partage !

Merci ! C'est super beau !

Bonsoir à toi !
Je tenais à te remercier, ce codage est nickel pour mon p'tit forum, il correspond vraiment à ce que je voulais ! Le seul truc qui m'embête un petit peu c'est le hover, je n'aime pas beaucoup, mais bon je ne fais pas ma difficile ! Au pire si je comprends un jour comment l'enlever sans tout casser, je le ferai ! En tout cas merci, car souvent je prends dans tes LS, j'aime la simplicité que tu mets dans tes créations :)
Bisous !
Kiki

Merci beaucoup

Merci beaucoup !

Merci beaucoup çà m'a aidé énormément

merci !