AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Affichage des messages sobre

    Partagez
    avatar
    Cheshire Cat
    FémininAge : 21Messages : 983

    le Mar 29 Mar 2016 - 17:52



    Bonjour à tous !  :bwaha:
    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 ? :star:
    Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

    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 ! Very Happy

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Cheshire Cat le Dim 19 Fév 2017 - 19:44, édité 13 fois
    avatar
    Alumine
    FémininAge : 21Messages : 488

    le Sam 9 Avr 2016 - 22:12

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



    Alumine
    avatar
    Cheshire Cat
    FémininAge : 21Messages : 983

    le Ven 27 Mai 2016 - 1:33

    Coucou, je signale juste que le code est en cours de révision.
    Bonne journée :toto:
    avatar
    Onyx
    FémininAge : 24Messages : 3134

    le Dim 16 Oct 2016 - 1:51

    Salut!

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

    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)



    avatar
    Cheshire Cat
    FémininAge : 21Messages : 983

    le Lun 5 Déc 2016 - 19:36

    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 ^^'
    avatar
    Cheshire Cat
    FémininAge : 21Messages : 983

    le Dim 19 Fév 2017 - 19:29

    J'ai tout corrigé je crois o/
    avatar
    Nihil Scar Winspeare
    Messages : 5038

    le Dim 19 Mar 2017 - 12:21

    Coucou Chesh :hudada:

    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 :siffle: ) :
    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à :panic:



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    Onyx
    FémininAge : 24Messages : 3134

    le Lun 18 Sep 2017 - 17:12

    Salut!

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



    avatar
    Kelalin
    FémininAge : 26Messages : 1957

    le Lun 18 Sep 2017 - 18:03

    Merci pour le partage !
    avatar
    Aadelrun
    FémininAge : 19Messages : 77

    le Sam 25 Nov 2017 - 18:02

    Merci ! C'est super beau !



    avatar
    Kikidostuffs
    FémininAge : 25Messages : 4

    le Mar 12 Déc 2017 - 23:59

    Bonsoir à toi ! Very Happy
    Je tenais à te remercier, ce codage est nickel pour mon p'tit forum, il correspond vraiment à ce que je voulais ! :love: 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
    avatar
    Sieben
    MasculinAge : 21Messages : 10

    le Mer 28 Mar 2018 - 12:57

    Merci beaucoup :love:
    Contenu sponsorisé


      La date/heure actuelle est Mar 16 Oct 2018 - 5:58