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 : 3132

    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
    Invité

    le Dim 21 Aoû 2016 - 11:14

    Merci pour ce LS ! :)
    avatar
    Valou712
    FémininAge : 34Messages : 23

    le Lun 22 Aoû 2016 - 12:20

    Super travail comme d'hab !! Merci beaucoup !!
    avatar
    patriciadpt30
    FémininAge : 55Messages : 240

    le Sam 27 Aoû 2016 - 11:00

    Ho merci :)



    Patricia :)
    avatar
    Ode 14
    FémininAge : 25Messages : 19

    le Dim 28 Aoû 2016 - 17:44

    Sublime, merci Wink.
    avatar
    Neya
    FémininAge : 19Messages : 164

    le Dim 28 Aoû 2016 - 23:00

    Merci
    avatar
    Naïshy
    FémininAge : 16Messages : 65

    le Lun 29 Aoû 2016 - 15:27

    merci
    avatar
    Lizbeth
    FémininAge : 20Messages : 164

    le Ven 2 Sep 2016 - 18:00

    Merci pirat
    avatar
    Samiki
    FémininAge : 20Messages : 84

    le Ven 2 Sep 2016 - 20:05

    merci énormément !




    Dakeris RPG ♦ Un monde nouveau régi par la peur
    Le forum ouvre ses portes, nous vous attendons nombreux !

    avatar
    charly45700
    MasculinAge : 21Messages : 30

    le Ven 9 Sep 2016 - 18:05

    Merci
    avatar
    Hadès.
    MasculinAge : 19Messages : 37

    le Mar 13 Sep 2016 - 21:25

    Merci ! :hap:
    avatar
    ~LP
    FémininAge : 22Messages : 11

    le Mar 13 Sep 2016 - 21:59

    Merci :)
    avatar
    Meeko
    MasculinAge : 24Messages : 29

    le Mer 14 Sep 2016 - 6:44

    merci
    avatar
    Lilou O'Neill
    FémininAge : 18Messages : 62

    le Ven 16 Sep 2016 - 3:14

    Merciiii !
    avatar
    Professeur Felyne
    MasculinAge : 32Messages : 84

    le Lun 19 Sep 2016 - 1:07

    Merci ^^



    .
    avatar
    alas
    FémininAge : 27Messages : 20

    le Lun 19 Sep 2016 - 16:00

    Très intéressant, merci !
    avatar
    Nathaël
    MasculinAge : 29Messages : 92

    le Lun 19 Sep 2016 - 20:59

    Pas mal :)



    avatar
    Féhéla
    FémininAge : 44Messages : 238

    le Jeu 22 Sep 2016 - 0:37

    Merci !
    avatar
    warning.sign
    FémininAge : 27Messages : 58

    le Jeu 22 Sep 2016 - 13:42

    merci beaucoup !
    avatar
    Rubians
    FémininAge : 21Messages : 13

    le Ven 23 Sep 2016 - 17:11

    Merci beaucoup ! Very Happy
    Yunroxas
    FémininAge : 24Messages : 37

    le Dim 25 Sep 2016 - 22:29

    Merci !!
    avatar
    Souky Mitsu
    FémininAge : 27Messages : 116

    le Jeu 29 Sep 2016 - 1:18

    Mercii beaucoup pour ton partage ! Very Happy
    avatar
    Luune
    FémininAge : 30Messages : 143

    le Mar 11 Oct 2016 - 15:41

    Merci !
    avatar
    Dacina moe
    FémininAge : 39Messages : 169

    le Mer 19 Oct 2016 - 16:01

    Merci <3
    avatar
    SweetDreams
    FémininAge : 20Messages : 32

    le Ven 21 Oct 2016 - 14:53

    Merci beaucoup de ton partage :3
    avatar
    Aile de l'Ange
    FémininAge : 20Messages : 110

    le Ven 21 Oct 2016 - 19:06

    Merci du partage
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Juin 2018 - 0:52