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
    En ligne
    avatar
    Onyx
    FémininAge : 24Messages : 3088

    le Jeu 11 Fév 2016 - 1:25


    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



    Je suis absente pour une durée indéterminée.

    avatar
    Kelalin
    FémininAge : 25Messages : 1869

    le Jeu 11 Fév 2016 - 10:34

    Merci pour le partage !
    avatar
    Amariem
    FémininAge : 19Messages : 98

    le Sam 5 Mar 2016 - 19:27

    C'est cool ! merci Very Happy



    avatar
    Ombrys
    FémininAge : 16Messages : 27

    le Mer 9 Mar 2016 - 14:38

    Thank ♥
    avatar
    Lust Caution
    FémininAge : 23Messages : 79

    le Mer 9 Mar 2016 - 15:47

    merci énormément pour le partage.
    avatar
    Piratress
    FémininAge : 20Messages : 215

    le Mer 9 Mar 2016 - 20:01

    C'est vraiment cool, merci :)
    avatar
    Zarwins
    FémininAge : 22Messages : 154

    le Jeu 10 Mar 2016 - 1:02

    Wouaw merci !



    avatar
    ColorTime'Less
    FémininAge : 21Messages : 100

    le Dim 20 Mar 2016 - 17:50

    Merci *o*
    avatar
    Kimberlay *
    FémininAge : 28Messages : 160

    le Jeu 24 Mar 2016 - 16:40

    Merci
    avatar
    Ganta
    MasculinAge : 25Messages : 69

    le Dim 27 Mar 2016 - 4:07

    Merci ! =)
    avatar
    TiGraou
    MasculinAge : 24Messages : 238

    le Lun 28 Mar 2016 - 23:11

    Merci
    avatar
    beenhell
    FémininAge : 19Messages : 7

    le Mer 30 Mar 2016 - 12:31

    Merci :)
    avatar
    Err0r
    FémininAge : 24Messages : 134

    le Ven 1 Avr 2016 - 15:30

    merci je pique :)



    avatar
    Ishyyn
    FémininAge : 22Messages : 90

    le Ven 1 Avr 2016 - 21:11

    Merci :3
    avatar
    Lunatic Café
    FémininAge : 27Messages : 25

    le Sam 2 Avr 2016 - 0:42

    Oh super!Merci beaucoup du partage! Je recherchais un truc dans ce genre-là en plus!
    avatar
    younessdu91
    MasculinAge : 20Messages : 96

    le Sam 2 Avr 2016 - 20:19

    ty
    avatar
    Edward Speleers
    FémininAge : 30Messages : 455

    le Sam 9 Avr 2016 - 22:33

    La classe... merci



    avatar
    Lilynufare
    FémininAge : 27Messages : 341

    le Dim 10 Avr 2016 - 14:22

    Sympa merci
    avatar
    OMJ
    FémininAge : 27Messages : 91

    le Dim 10 Avr 2016 - 18:04

    j'adore merci :)
    avatar
    tanagra
    FémininAge : 25Messages : 5

    le Jeu 14 Avr 2016 - 0:59

    Merci *-*
    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 167

    le Jeu 14 Avr 2016 - 1:43

    C'est cool ! merci
    avatar
    KTMiz
    MasculinAge : 19Messages : 47

    le Jeu 14 Avr 2016 - 12:46

    Merci



    avatar
    Magico
    MasculinAge : 25Messages : 41

    le Jeu 14 Avr 2016 - 19:45

    merci
    avatar
    petit lu
    FémininAge : 25Messages : 172

    le Dim 17 Avr 2016 - 10:48

    Merci
    avatar
    Isaac Berntsson
    MasculinAge : 24Messages : 29

    le Dim 17 Avr 2016 - 14:17

    Merci !!
    Contenu sponsorisé


      La date/heure actuelle est Mar 22 Mai 2018 - 16:02