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.


    Cadre autour des messages - personnalisable

    Partagez
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Ven 12 Déc 2014 - 20:39

    Rappel du premier message :

    Cadre autour des messages - personnalisable
    New York in violet

    PHPBB22 - APERCU 1 - APERCU 2 - CSS et templates - avatar 320x200, modifiable - police : Voltaire - LS Catégories assorties


    Il y a deux versions: une en violet et une en rouge, seul le CSS change.
    Dans la version violette il y a un "filtre" par-dessus l'avatar, violet transparent avec une silhouette de ville, et dans les deux les infos du profil sont cachées sous l'avatar. Le CSS est légendé pour que vous puissiez changer les couleurs et la taille de l'avatar facilement !



    I - Templates
    Rendez vous dans Affichage > Templates > Général > Viewtopic_body
    C'est le bout de HTML qui concerne l'affichage des messages.
    Au risque de vous faire peur, remplacez-le par celui-ci : (il y a des modifications tout du long, donc c'est plus simple comme ça...)
    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 width="100%" border="0" cellspacing="2" 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 class="nav" valign="middle" width="100%">
          <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>
        <td align="right" valign="bottom" nowrap="nowrap" width="100%">
          <span class="gensmall bold">
            <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
            <!-- BEGIN switch_plus_menu -->
             | 
            <script type="text/javascript">//<![CDATA[
              var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
              var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
              var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
              var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
              var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
              var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
              insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
              //]]>
            </script>
            <!-- END switch_plus_menu -->
          </span>
        </td>
      </tr>
    </table>

    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
      <tr align="right">
        <td class="catHead" 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">
                <h1 class="cattitle"> {TOPIC_TITLE}</h1>
              </td>
              <td align="right" 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="#bottom">{L_GOTO_DOWN}</a> </td>
            </tr>
          </table>
        </td>
      </tr>
      <!-- BEGIN topicpagination -->
      <tr>
        <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
        <!-- END topicpagination -->
        {POLL_DISPLAY}
        <!-- BEGIN postrow -->
        <tr class="rangée">
          <th class="thLeft" nowrap="nowrap" height="26">{L_AUTHOR}</th>
          <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
        </tr>
        <!-- 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} postviolet" colspan="2"id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                <div style="position:relative; margin: -13px 0px auto 15px;">
                  <div class="profilmembre">
                    <div class="avatars"><div class="imageavatar"></div>{postrow.displayed.POSTER_AVATAR}</div>
                    <div class="infoprofil">
                      <!-- BEGIN profile_field -->
                      {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                      <!-- END profile_field -->
                    </div>
                  </div>
                  <div class="nomavatar">
                    {postrow.displayed.POSTER_RPG}
                    {postrow.displayed.POSTER_RANK}
                    <div class="postdetails poster-profile">{postrow.displayed.RANK_IMAGE}</div>
                    <span class="name pseudo"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                  </div>
                </div>
              </td>
              <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                    <td valign="top" nowrap="nowrap" class="post-options">
                      {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 fondpost">
                        <div>{postrow.displayed.MESSAGE}</div>
                        <!-- BEGIN switch_attachments -->
                        <dl class="attachbox">
                          <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                          <dd>
                            <!-- BEGIN switch_post_attachments -->
                            <dl class="file">
                              <dt>
                                <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />
                               
                                <!-- BEGIN switch_dl_att -->
                                <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_dl_att -->
                               
                                <!-- BEGIN switch_no_dl_att -->
                                {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_no_dl_att -->
                              </dt>
                             
                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->
                             
                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->
                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                            </dl>
                            <!-- END switch_post_attachments -->
                          </dd>
                        </dl>
                        <!-- END switch_attachments -->
                       
                        <div class="clear"></div>
                        <!-- BEGIN switch_signature -->
                        <div class="signature_div">
                          {postrow.displayed.SIGNATURE}
                        </div>
                        <!-- END switch_signature -->
                     
                      </div>
                    </td>
                  </tr>
                </table>
              </td>
        </tr>
      </tr>
      <tr class="post--{postrow.displayed.U_POST_ID} basviolet" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle">
                      <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
          </td>
          <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
                      <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td valign="middle">
                            {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}
                          </td>
                        </tr>
                      </table>
          </td>
      </tr>
    <!-- BEGIN first_post_br -->
      </table>
    <hr />
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr class="rangée">
        <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 class="catBottom" 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><h1 class="cattitle">{TOPIC_TITLE}</h1></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="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
       <tr>
          <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
          <!-- BEGIN topicpagination -->
          <td class="row1" 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 class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
       <tr>
          <td class="catBottom" height="28">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></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 class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
       <tr>
          <td class="catBottom" height="28">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></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="row2 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" class="forumline" 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">
                            <h1 class="cattitle"> {L_FORUM_RULES}</h1>
                         </td>
                      </tr>
                   </tbody>
                </table>
             </td>
          </tr>
          <tr>
             <td class="row1 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="forumline noprint" 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>
       <tr>
          <td style="margin:0; padding: 0;" colspan="2">
             <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
                <tbody>
          <!-- BEGIN show_permissions -->
          <tr>
             <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
             <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
          </tr>
          <!-- END show_permissions -->
          <tr>
             <td class="catBottom" 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 class="catBottom" 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>

    Ensuite n'oubliez pas de publier le template (=




    II - CSS
    La suite se passe ici: Affichage > Images et couleurs > Couleurs > feuille de style CSS
    Donc c'est là que vous choisissez entre violet et rouge (= Dans tous les cas, ajoutez l'un des deux codes à votre CSS ( puis allez à la page 35 /pan/)

    CSS 1- Violet
    Code:

    /*Cadre autour des messages par Alu' pour Never-Utopia *****************************************************************/

    .profilmembre, .infoprofil, .imageavatar {
      height: 320px;/*hauteur de l'avatar*/
      width: 200px;/*largeur de l'avatar*/
    }

    .rangée .thRight, .infoprofil, .nomavatar, .rangée .thLeft, .basviolet .browse-arrows{
      font-family: Voltaire; /*police utilisée*/
      font-variant:small-caps;/*texte en petites majuscules*/
    }

    .basviolet, .postviolet{ background-color:#dce2e5;}/*couleur de fond des messages*/

    .imageavatar{
      background-image: url(http://image.noelshack.com/fichiers/2014/50/1418219387-sur-avatar.png);
      /*image par-dessus l'avatar, laisser vide pour l'enlever*/
      position:absolute;
      top:0;
      left:0;
      z-index:3;
    }
    .infoprofil {
      background-image:url(http://nsa33.casimages.com/img/2014/11/30//14113007024612472.png);
      /*image de fond des infos du profil, laisser vide pour l'enlever*/
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      padding:15px;
      font-size: 13px;
      color:#9d8ab0;
      z-index:0;
      overflow: auto;
    }
     
    .nomavatar{
      background-image:url(http://nsa33.casimages.com/img/2014/11/30//141130070245722186.png);/*image de fond du pseudo*/
      height:61px;/*largeur de l'image de fond*/
      width: 208px;/*hauteur de l'image de fond*/
      color:#9d8ab0;/*couleur du texte du rang*/
      text-transform:uppercase !important;/*rang en majuscules*/
      font-size: 18px;
      line-height:110%;
      text-align:center;
      position:relative;
      padding-top:20px;
      margin-top: -25px;
      z-index: 3;
    }

    .fondpost{
      border: 3px solid #ad9ebd;/*bordures fines autour du message*/
      border-radius:20px;/*arrondi*/
      padding: 15px;
      min-height: 325px;
      margin: 10px 30px auto 30px;
    }

    .profilmembre {
      border: 5px solid #ad9ebd;/*bordures autour de l'avatar*/
      position:relative;
      margin: 10px 0;
    }

    .rangée{
      background-color:#9d8ab0;/*couleur de fond de la ligne "auteur-message"*/
      border-radius:20px 20px 0 0;/*arrondis*/
      display:block;
      margin-top:15px;
    }
    .rangée .thRight{
      color:#dce2e5;/*couleur du texte "message"*/
      font-size: 15px;
      font-weight:bold;
      display:block;
      margin-left:255px;
      padding-top:7px;
      height:19px;
    }
    .rangée .thLeft, .basviolet .browse-arrows{
      color:#dce2e5;/*couleur du texte "auteur"*/
      font-size: 15px;
      font-weight:bold;
      display:block;
      float:left;
      width:255px;
      padding-top:7px;
      height:19px;
    }
    .basviolet{
      border:5px solid #9d8ab0;/*bordures de la partie basse du message*/
      display:block;
      border-radius:0 0 20px 20px;
      border-top:none;
      margin-bottom:30px;
    }

    .postviolet{
      border-left:5px solid #9d8ab0;/*bordures de la partie centrale du message*/
      border-right:5px solid #9d8ab0;
      display:block;
    }



    .postviolet .postdetails {display:none;}/*enlève la date et l'heure du sujet*/
    .postviolet .post-options{padding-right:30px;}
    .avatar img: {width:100%; height: 100%;}/*redimensionne les avatars à la bonne taille*/
    .pseudo {display:block;font-size:25px; /*taille du pseudo*/font-variant:small-caps;text-transform:none;}
    th.thBottom, th.thCornerL, th.thCornerR, th.thHead, th.thLeft, th.thRight, th.thSides, th.thTop { border:none;font-weight:normal;}

    .profilmembre:hover > .avatars {/*ne pas modifier*/
      opacity: 0;
      filter: alpha(opacity=0);
      visibility: hidden;
      z-index:1;
    }
    .avatars {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index:2;
      -webkit-transition:all 1s;
      -moz-transition:all 1s;
      -o-transition:all 1s;
      -ms-transition:all 1s;
      transition:all 1s;
    }

    CSS 2 - Rouge
    Code:

        /*Cadre autour des messages par Alu' pour Never-Utopia *****************************************************************/

        .profilmembre, .infoprofil, .imageavatar {
          height: 320px;/*hauteur de l'avatar*/
          width: 200px;/*largeur de l'avatar*/
        }

        .rangée .thRight, .infoprofil, .nomavatar, .rangée .thLeft, .basviolet .browse-arrows{
          font-family: Voltaire; /*police utilisée*/
          font-variant:small-caps;/*texte en petites majuscules*/
        }

        .basviolet, .postviolet{ background-color:#B53122;}/*couleur de fond des messages*/

        .imageavatar{
          position:absolute;
          top:0;
          left:0;
          z-index:3;
        }
        .infoprofil {
          background-color:#e74c3c;/*couleur de fond des infos sous l'avatar*/
          box-sizing: border-box;
          position: absolute;
          top: 0;
          left: 0;
          padding:15px;
          font-size: 13px;
          color:#9d8ab0;/*couleur du texte*/
          z-index:0;
          overflow: auto;
        }
       
        .nomavatar{
          background-color:#e74c3c;/*couleur de fond du bloc pseudo et rang*/
          height:50px;/*largeur du bloc*/
          width: 200px;/*hauteur du bloc*/
          color:#ecf0f1;/*couleur du texte du rang*/
          text-transform:uppercase !important;/*rang en majuscules*/
          font-size: 18px;
          line-height:110%;
          text-align:center;
          position:relative;
          margin-top:-10px;
          padding-top:20px;
          z-index: 3;
        }

        .fondpost{
          background-color:#ecf0f1;/*couleur de fond du texte du message*/
          padding: 15px;
          min-height: 325px;
          margin: 10px 30px auto 30px;
        }

        .profilmembre {
          position:relative;
          margin: 10px 0;
        }

        .rangée{
          background-color:#e74c3c;/*couleur de fond de la ligne "auteur-message"*/
          display:block;
          margin-top:15px;
        }
        .rangée .thRight{
          color:#ecf0f1;/*couleur du texte "message"*/
          font-size: 15px;
          font-weight:bold;
          display:block;
          margin-left:240px;
          padding-top:7px;
          padding-right:15px;
          height:19px;
        }
        .rangée .thLeft, .basviolet .browse-arrows{
          color:#ecf0f1;/*couleur du texte "auteur"*/
          font-size: 15px;
          font-weight:bold;
          display:block;
          float:left;
          width:245px;
          padding-top:7px;
          height:19px;
        }
        .basviolet{
          border:5px solid #B53122;/*bordures de la partie basse du message*/
          display:block;
          border-top:none;
          margin-bottom:30px;
        }

        .postviolet{
          border-left:5px solid #B53122;/*bordures de la partie centrale du message*/
          border-right:5px solid #B53122;
          display:block;
        }



        .postviolet .postdetails {display:none;}/*enlève la date et l'heure du sujet*/
        .postviolet .post-options{padding-right:30px;}
        .avatar img: {width:100%; height: 100%;}/*redimensionne les avatars à la bonne taille*/
        .pseudo {display:block;font-size:25px; /*taille du pseudo*/font-variant:small-caps;text-transform:none;}
        th.thBottom, th.thCornerL, th.thCornerR, th.thHead, th.thLeft, th.thRight, th.thSides, th.thTop { border:none;font-weight:normal;}

        .profilmembre:hover > .avatars {/*ne pas modifier*/
          opacity: 0;
          filter: alpha(opacity=0);
          visibility: hidden;
          z-index:1;
        }
        .avatars {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index:2;
          -webkit-transition:all 1s;
          -moz-transition:all 1s;
          -o-transition:all 1s;
          -ms-transition:all 1s;
          transition:all 1s;
        }

        /**********************************************************************************************************************/

    Validez, et c'est bon !
    Si vous touchez un peu au CSS, vous verrez qu'à priori, toutes les modifications de couleur ou de forme sont légendées, voire groupées, donc si un jour vous voulez changer de design, ça devrait bien se passer x)

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.



    Alumine
    avatar
    catkiller
    FémininAge : 23Messages : 70

    le Mar 12 Avr 2016 - 17:23

    merci!
    avatar
    laurette
    FémininAge : 17Messages : 23

    le Mar 12 Avr 2016 - 18:29

    Merci du partage, c'est très joli :)
    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 167

    le Mer 13 Avr 2016 - 16:40

    Merci du partage
    avatar
    Inwë
    FémininAge : 19Messages : 36

    le Sam 16 Avr 2016 - 16:42

    J'aime beaucoup beaucoup *^* ! merciii du partage *^*
    Alysanne
    FémininAge : 32Messages : 48

    le Ven 22 Avr 2016 - 23:01

    merci!
    avatar
    Saphira
    FémininAge : 21Messages : 72

    le Sam 23 Avr 2016 - 2:22

    Merci :)
    avatar
    Isyndra
    FémininAge : 36Messages : 41

    le Dim 24 Avr 2016 - 10:18

    Merci! :)
    avatar
    Manwin
    MasculinAge : 20Messages : 25

    le Jeu 28 Avr 2016 - 23:59

    Merci beaucoup :)
    avatar
    Mr Yo
    MasculinAge : 43Messages : 37

    le Mar 3 Mai 2016 - 20:34

    Exactement ce que je cherchais cheers

    Merci beaucoup Wink
    avatar
    ninouee
    FémininAge : 36Messages : 130

    le Mer 4 Mai 2016 - 8:56

    superbe idée!



    avatar
    aryanon
    MasculinAge : 20Messages : 50

    le Mer 11 Mai 2016 - 20:11

    Merci :)
    avatar
    Evalla
    FémininAge : 25Messages : 43

    le Mer 11 Mai 2016 - 23:35

    C'est magnifique, merci beaucoup !
    avatar
    Kraken
    FémininAge : 25Messages : 137

    le Lun 16 Mai 2016 - 15:51

    Merci pour le partage ! :han:
    avatar
    Evalla
    FémininAge : 25Messages : 43

    le Ven 27 Mai 2016 - 1:02

    Bonsoir, j'ai essayer de l'installer sur mon forum, mais je rencontre un problème concernant la feuille de personnage, impossible de l'utiliser sans que cela déforme tout :/
    Quelqu'un pourrait m'aider s'il vous plait ?
    avatar
    Lucia-san
    FémininAge : 18Messages : 65

    le Ven 27 Mai 2016 - 17:52

    C'est super j'aime beaucoup !
    Petit soucis : J'aimerais bien mettre un crédit à N-U mais je ne sais pas comment faire o/ Un peu d'aide s'il vous plait ?
    avatar
    Deed01
    MasculinAge : 40Messages : 339

    le Dim 29 Mai 2016 - 12:14

    merci Very Happy
    avatar
    Ashark
    MasculinAge : 27Messages : 35

    le Lun 30 Mai 2016 - 0:18

    Merci



    avatar
    Isalia
    FémininAge : 18Messages : 125

    le Lun 30 Mai 2016 - 19:13

    Merci beaucoup *^*
    avatar
    Qazea
    MasculinAge : 22Messages : 206

    le Dim 5 Juin 2016 - 2:36

    C'est splendide !
    avatar
    Iguolta
    MasculinAge : 18Messages : 101

    le Dim 5 Juin 2016 - 12:03

    merci ^^




    Merci à Cruelly pour le kit Very Happy
    Merci beaucoup ^^:

    Merci Raeden Liddell Very Happy


    Merci Bubodox Very Happy


    Merci Shoki Very Happy
    avatar
    -Resis
    MasculinAge : 21Messages : 25

    le Dim 5 Juin 2016 - 17:12

    tu gère
    avatar
    Shi Tsu Michaelis
    FémininAge : 25Messages : 23

    le Dim 5 Juin 2016 - 19:28

    Merci ♥
    avatar
    Sighild
    FémininAge : 31Messages : 167

    le Sam 11 Juin 2016 - 18:24

    Je suis curieuse! Merci pour le tuto!
    avatar
    Ariemm
    FémininAge : 17Messages : 107

    le Dim 12 Juin 2016 - 15:53

    C'est ma-gni-fique! Merci beaucoup!
    avatar
    Dellou
    FémininAge : 20Messages : 56

    le Jeu 16 Juin 2016 - 15:29

    merci !
    Contenu sponsorisé


      La date/heure actuelle est Mar 22 Mai 2018 - 18:03