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
    Fey Rune
    FémininAge : 16Messages : 67

    le Sam 22 Oct 2016 - 1:34

    Merci !
    avatar
    Jynnea
    FémininAge : 23Messages : 103

    le Mar 25 Oct 2016 - 2:20

    Merci!
    avatar
    Sparryx
    MasculinAge : 16Messages : 71

    le Jeu 27 Oct 2016 - 12:20

    Merci
    avatar
    Cez
    FémininAge : 22Messages : 17

    le Mer 2 Nov 2016 - 23:30

    merci bcp!
    avatar
    Leïlan
    FémininAge : 29Messages : 22

    le Lun 14 Nov 2016 - 0:40

    Merci **
    avatar
    Monaka
    FémininAge : 26Messages : 132

    le Mer 16 Nov 2016 - 11:18

    merci pour le partage
    avatar
    leviarthrite
    FémininAge : 31Messages : 26

    le Dim 27 Nov 2016 - 16:27

    Merci :)
    avatar
    Bzzzz
    FémininAge : 34Messages : 86

    le Lun 28 Nov 2016 - 10:23

    Merci
    avatar
    lea-angels
    FémininAge : 18Messages : 17

    le Mer 30 Nov 2016 - 19:01

    Merciiii :3
    avatar
    TheLouve
    FémininAge : 15Messages : 8

    le Dim 18 Déc 2016 - 13:51

    Merci ! :3
    avatar
    Manoblack
    FémininAge : 17Messages : 11

    le Jeu 22 Déc 2016 - 15:22

    Merci beaucoup!
    avatar
    br6668lo
    MasculinAge : 24Messages : 7

    le Ven 23 Déc 2016 - 20:45

    merci
    avatar
    Gieve
    FémininAge : 28Messages : 104

    le Dim 8 Jan 2017 - 23:30

    Merciiiiiiiiiiiiiiii *O*
    avatar
    Wavy
    FémininAge : 17Messages : 39

    le Mar 24 Jan 2017 - 15:00

    Merci pour le partage ! <3
    avatar
    Safaya
    FémininAge : 20Messages : 23

    le Lun 30 Jan 2017 - 15:50

    Merci c:
    avatar
    ♪ Extasy ♪
    FémininAge : 28Messages : 105

    le Jeu 9 Fév 2017 - 16:03

    Merci :)
    avatar
    Aine Michiyo
    FémininAge : 23Messages : 27

    le Sam 11 Fév 2017 - 19:07

    C'est joli, merci! **
    avatar
    Envola
    FémininAge : 26Messages : 56

    le Lun 13 Fév 2017 - 19:44

    Merci !!
    avatar
    Nezer
    MasculinAge : 16Messages : 4

    le Mer 15 Fév 2017 - 3:28

    merci
    avatar
    memoriam
    FémininAge : 26Messages : 72

    le Mer 15 Fév 2017 - 23:50

    merci du partage
    avatar
    Momiji-chan
    FémininAge : 20Messages : 38

    le Sam 18 Fév 2017 - 22:47

    Hello !
    Super codage ! Merci miss.
    avatar
    .lovely
    FémininAge : 21Messages : 54

    le Mar 21 Fév 2017 - 21:07

    Je suis fan !
    avatar
    SweetieBay
    FémininAge : 26Messages : 143

    le Mer 22 Fév 2017 - 15:13

    merci !
    avatar
    Lyndia Dukos
    MasculinAge : 29Messages : 7

    le Lun 27 Fév 2017 - 12:45

    Merci
    Lupa
    FémininAge : 22Messages : 183

    le Sam 4 Mar 2017 - 18:58

    Merci pour ce partage ^^



    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    Contenu sponsorisé


      La date/heure actuelle est Mar 16 Oct 2018 - 11:50