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.


    Profil/Message Gris en Tableau

    Partagez
    avatar
    Onyx
    FémininAge : 24Messages : 3134

    le Jeu 11 Fév 2016 - 1:25

    Rappel du premier message :


    Profil/Message Gris en Tableau


    Voici un petit LS de Profil/Message que j'ai fait pour la demande de Cruelly. Il y a un aussi un LS de Catégories qui l'accompagne.

    Pour voir l'aperçu : cliquez ici.

    Effet : Quand on clique sur "Dévoiler le secret", la feuille de personnage (RPG) apparaît.

    Ce LS est en deux parties.
    • Tout d'abord, nous allons installer le profil/message dans le template.
    • Puis, nous allons mettre en forme le profil/message à l'aide du CSS.


    - La version du forum est PHPBB2.
    - L'avatar fait 200px de largeur par 320 de hauteur.

    Mettre un crédit vers Never-Utopia est obligatoire.


    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    1. Le profil/message (Template Viewtopic_Body)


    Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > GÉNÉRAL
    > > > > > VIEWTOPIC_BODY

    Puis, on va entièrement remplacer le template "Viewtopic_Body" par ceci :
    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>
    <table class="sujet_title" width="100%" border="0" cellspacing="2" cellpadding="0">
      <tr>
        <td align="center" class="t-title">
          <a name="toptitle"></a><div class="cattitle">{TOPIC_TITLE}</div>
        </td>
      </tr>
    </table>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <!-- BEGIN topicpagination -->
      <tr>
        <td width="30%"></td>
        <td class="pagination" valign="middle" width="100%" align="right">
          <span class="gensmall">{PAGINATION}</span>
        </td>
      </tr>
      <!-- END topicpagination -->
      <tr>
        <td width="30%"></td>
        <td class="browse-arrows" valign="middle" width="70%" align="right">
          <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>
    <table width="100%" border="0" cellspacing="0" 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 width="10%">
              </td>
              <td class="nav" align="right" valign="middle" align="right">
                <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>
              </td>
     </tr>
    </table>
    <table class="sujet_bloc" width="100%" border="0" cellspacing="0" cellpadding="0" >
      {POLL_DISPLAY}
      <tr>
        <td class="mess_et_auteur" nowrap="nowrap" width="216" align="center" style="padding-left: 5px;">{L_AUTHOR}</td>
        <td class="mess_et_auteur" nowrap="nowrap" colspan="2" align="center">{L_MESSAGE}</td>
      </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 {postrow.displayed.THANK_BGCOLOR} valign="top" align="center" style="padding-right: 5px;">
          <div class="profil_bloc">
            <div class="profil_fleche"></div>
            <span class="name">
              <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
              <span class="profil_pseudo"><strong>{postrow.displayed.POSTER_NAME}</strong></span>
            </span>
            <br />
            <div class="avatar_cadre">
              {postrow.displayed.POSTER_AVATAR}
            </div>
            <div class="mess_rank">
              {postrow.displayed.POSTER_RANK}
            </div>
            <div class="profil_infos_bloc">
              <!-- BEGIN profile_field -->
              {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
              <!-- END profile_field -->
            </div>
            <div class="profil_bloc_rpg">
              <div class="togglerpg">Dévoiler le secret</div>
              <div class="hidden_rpg">
                {postrow.displayed.POSTER_RPG}
              </div>
            </div>
            <div class="browse-arrows">
              <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
            </div>
          </div>
        </td>
        <td class="message_bloc" {postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td class="mess_top" align="left">
                {postrow.displayed.POST_SUBJECT}
              </td>
              <td valign="top" nowrap="nowrap" class="mess_top" align="right">
                {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>
     <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="postbody">

     <div class="sujet_mess">
                                                              <div class="mess_mess">
                                                                {postrow.displayed.MESSAGE}
                                                              </div>
                                                              <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
                                                            </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 class="clear"></div>
                                                            <div class="signature">
              <!-- BEGIN switch_signature -->
                                                              <div class="signature_div">
                {postrow.displayed.SIGNATURE}
                                                              </div>
                                                              <!-- END switch_signature -->
                                                              <div class="mess_contact">{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}</div>
     </div>
     </div>
     </td>
     </tr>
     </table>
     </td>
     </tr>
     <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
     <td class="browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
     
     </td>
     <td class="messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="10">
     <table border="0" cellspacing="0" cellpadding="0">
     <tr>
     <td valign="middle">
     
     </td>
     </tr>
     </table>
     </td>
     </tr>
     <!-- BEGIN first_post_br -->
    </table>
    <hr />
    <table width="100%" border="0" cellspacing="0" 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 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="noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
     <tr>
     <td valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
     <!-- BEGIN topicpagination -->
     <td 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 width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
     <tr>
     <td 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 width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
     <tr>
     <td 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="postbody" valign="top">
     <!-- BEGIN link -->
     » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
     <!-- END link -->
     </td>
     </tr>
    </table>
    <!-- END promot_trafic -->

    <!-- BEGIN switch_forum_rules -->
    <table id="forum_rules" 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="clearfix">
     <table>
     <tr>
     <!-- BEGIN switch_forum_rule_image -->
     <td class="logo">
     <img src="{RULE_IMG_URL}" alt="" />
     </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="mess_reply" 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>
    </table>
    <table class="noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
     <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 valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
     <td valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
     </tr>
     <!-- END show_permissions -->
     <tr>
     <td 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 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}&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>
    <script text="javascript">
       $(".togglerpg").toggle(function(){
          $(this).next().css("display", "block");
          $(this).text("Masquer le secret");
       }, function(){
          $(this).next().css("display", "none");
          $(this).text("Dévoiler le secret");
       });
    </script>



    2. Mise en forme (CSS)


    Si vous regardez votre profil/message, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons le mettre en forme à l'aide du CSS.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > IMAGES ET COULEURS
    > > > > COULEURS
    > > > > > FEUILLE DE STYLE CSS

    Puis, nous allons ajouter le CSS suivant :
    Code:
    /* -------------------------------------------------- DÉBUT DU PROFIL ET DES MESSAGES -------------------------------------------------- */
    /*Bloc du titre du sujet*/
    .sujet_title {
      background-color: #a4a4a4;
      padding: 2px;
      margin-bottom: 10px;
    }
    /*Titre de sujet*/
    .sujet_title .cattitle {
      font-family: 'Verdana'!important;
      text-shadow: 1px 1px 2px #757575;
      font-size: 16px!important;
      color: #353535;
    }


    /*Auteur et message*/
    .mess_et_auteur {
      padding-bottom: 5px;
      font-size: 13px;
      font-family: 'Verdana';
      font-weight: bold;
    }


    /*Section du profil*/
    .profil_bloc {
      background-color: #a4a4a4;
      padding: 3px 3px 5px 3px;
      position: relative;
      font-size: 13px;
      font-family: 'Verdana';
      color: #000000;
    }
    /*Fleche profil*/
    .profil_fleche {
      top: 55px;
      right: -5px;
      position: absolute;
      z-index: 2;
      width: 26px;
      height: 17px;
      background: url('http://img15.hostingpics.net/pics/127113fleche.png');
    }


    /*Pseudo*/
    .profil_pseudo, .profil_pseudo a {
      text-shadow: 1px 1px 2px #545454;
      font-size: 16px;
      font-family: 'Verdana';
    }
    /*Pseudo survolé*/
    .profil_pseudo:hover, .profil_pseudo a:hover {
      text-shadow: 1px 1px 2px #202020;
    }

    /*Cadre avatar*/
    .avatar_cadre {
      margin-top: 3px;
      width: 200px;
      height: 320px;
      background-color: #b4b4b6;
      padding: 5px;
    }
    /*Redimensionnement avatar*/
    .avatar_cadre img {
      width: 200px;
      height: 320px;
    }

    /*Rang*/
    .mess_rank {
      margin-top: 5px;
    }

    /*Bloc des infos du profil*/
    .profil_infos_bloc {
      margin-top: 5px;
      width: 200px;
      background-color: #b4b4b6;
      padding: 5px;
      color: #000000;
      font-family: 'Verdana';
      font-size: 13px;
      text-align: left;
    }

    /*Bloc de la feuille RPG qui ouvre au clic*/
    .profil_bloc_rpg {
      margin-top: 5px;
      width: 200px;
      background-color: #b4b4b6;
      padding: 5px;
      color: #000000;
      font-family: 'Verdana';
      font-size: 13px;
    }
    /*Bouton pour ouvrir la feuille RPG*/
    .togglerpg {
      display: inline-block;
      color: #ffffff;
      font-size: 15px;
      font-family: 'Verdana';
      font-weight: bold;
      text-shadow: 1px 1px 1px #747474;
    }
    /*Bouton pour ouvrir la feuille RPG survolé*/
    .togglerpg:hover {
      cursor: pointer;
      text-shadow: 1px 1px 2px #545454;
    }
    /*Feuille RPG cachée*/
    .hidden_rpg {
      display: none;
      text-align: left;
    }


    /*Bloc de message*/
    .message_bloc {
      color: #000000;
      font-family: 'Verdana';
      font-size: 13px;
    }
    /*Haut avec les boutons et le titre*/
    .mess_top {
      background-color: #a4a4a4;
      font-family: 'Verdana'!important;
      padding: 2px;
      text-shadow: 1px 1px 2px #757575;
      font-size: 16px!important;
      color: #353535;
    }
    /*Message*/
    .mess_mess {
      min-height: 410px;
      background-color: #b4b4b4;
      padding: 5px;
      color: #000000;
      font-family: 'Verdana';
      font-size: 13px;
      text-align: justify;
    }
    /*Message 2*/
    .sujet_mess {
      background-color: #b4b4b4;
    }

    /*Enlever l'espace avant édition*/
    .sujet_mess > span.gensmall br:nth-child(1) {
      display: none;
    }
    /*Enlever l'espace avant la signature*/
    .signature_div > br:nth-child(1), .signature_div > br:nth-child(2) {
      display: none;
    }

    /*Bloc bas*/
    .signature {
      padding: 0px 5px 2px 5px;
      background-color: #a4a4a4;
      text-align: center;
    }
    /*Bloc signature*/
    .signature_div {
      padding-top: 5px;
      text-align: center;
    }
    /*contacts*/
    .mess_contact {
      padding-top: 5px;
      text-align: center;
    }

    /* -------------------------------------------------- FIN DU PROFIL ET DES MESSAGES -------------------------------------------------- */


    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier le profil/message et avez besoin d'aide.

    À plus !


    Dernière édition par Onyx le Sam 5 Mai 2018 - 23:29, édité 1 fois



    avatar
    ptite_perle
    FémininAge : 55Messages : 124

    le Ven 26 Mai 2017 - 20:30

    Merci :)



    avatar
    Lessien
    FémininAge : 36Messages : 163

    le Dim 4 Juin 2017 - 15:14

    Merci pour le partage !
    avatar
    defenrir
    MasculinAge : 35Messages : 75

    le Jeu 8 Juin 2017 - 12:38

    merci =)
    avatar
    Zélya
    FémininAge : 29Messages : 190

    le Jeu 8 Juin 2017 - 23:00

    bonsoir merci du partage♥



    avatar
    Laurolay
    FémininAge : 14Messages : 101

    le Ven 9 Juin 2017 - 14:54

    thank you
    avatar
    layna
    FémininAge : 26Messages : 68

    le Ven 9 Juin 2017 - 16:02

    simple mais efficace merci ♥ :love:
    avatar
    Louna Luna
    FémininAge : 23Messages : 147

    le Ven 9 Juin 2017 - 18:51

    Merci
    avatar
    Anguis
    FémininAge : 27Messages : 28

    le Jeu 15 Juin 2017 - 11:42

    merci =^^=
    avatar
    Amakhaza
    FémininAge : 15Messages : 52

    le Sam 17 Juin 2017 - 18:50

    Merci bien ^^
    avatar
    Thanos
    MasculinAge : 22Messages : 84

    le Ven 14 Juil 2017 - 23:07

    J'aime beaucoup, merci ! :)
    avatar
    R.Falsworth
    FémininAge : 21Messages : 92

    le Sam 15 Juil 2017 - 14:08

    merci
    avatar
    Cornélius
    MasculinAge : 20Messages : 17

    le Sam 15 Juil 2017 - 23:28

    Merci !
    avatar
    Suncy
    FémininAge : 17Messages : 12

    le Ven 4 Aoû 2017 - 14:04

    Merci!
    avatar
    didicmy
    FémininAge : 27Messages : 69

    le Dim 6 Aoû 2017 - 22:17

    Merci
    avatar
    JemAedan
    FémininAge : 31Messages : 27

    le Mar 8 Aoû 2017 - 9:52

    Merci pour le partage *-*
    avatar
    CaraDelevngnie
    FémininAge : 19Messages : 370

    le Mer 9 Aoû 2017 - 15:27

    Merci :)



    avatar
    Aadelrun
    FémininAge : 19Messages : 77

    le Jeu 17 Aoû 2017 - 21:30

    Merci beaucoup ! Simple mais joli, exactement ce que je cherchais !^^



    avatar
    Smokerlilitrope
    FémininAge : 29Messages : 45

    le Jeu 24 Aoû 2017 - 21:31

    merci o/
    avatar
    Shin Kiryu
    MasculinAge : 17Messages : 41

    le Ven 1 Sep 2017 - 21:00

    Thanks
    avatar
    Alborio
    MasculinAge : 19Messages : 33

    le Ven 8 Sep 2017 - 17:02

    Pas mal.
    avatar
    Eryu
    FémininAge : 25Messages : 50

    le Sam 30 Sep 2017 - 21:21

    Merci pour le code !
    avatar
    Illeanëlia
    FémininAge : 32Messages : 92

    le Mar 10 Oct 2017 - 23:57

    merci pour le partage
    avatar
    Mirony
    FémininAge : 31Messages : 44

    le Dim 15 Oct 2017 - 1:35

    C'est magnifique merci! Wink <3
    Shinju.dot
    FémininAge : 28Messages : 88

    le Lun 16 Oct 2017 - 15:51

    C'est cool ! merci Very Happy
    avatar
    Sophie2
    FémininAge : 54Messages : 64

    le Sam 21 Oct 2017 - 19:57

    Merci!
    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Oct 2018 - 9:28