Perfis Personalizados em Mensagens

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Atendido / Resolvido Perfis Personalizados em Mensagens

Mensagem por Grizzly 30.03.21 4:09

Detalhes da questão


Endereço do fórum: https://arcanarpg.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Olá!

Estimaria que os perfis dos membros autores de mensagens em tópicos aparecessem de forma similar à em que aparecem aqui no FDF, com nomes de usuário, avatares, ranks, perfis, fichas de personagem e campos de contato estando inclusos em um "quadro" e mantendo um padrão centralizado, mas não achei nenhum tutorial aqui que se tratasse disso em específico.

Porém, as minhas preferências seriam a de remover o status de online/offline que se encontra na parte de cima no caso do modelo presente aqui e em seu lugar colocar o nome de usuário com o rank logo abaixo, e a de remover os avatares da moldura padrão em que se encontram (redondos e comprimidos) para que ficassem em sua forma original de acordo com a imagem utilizada (apesar de com um tamanho máximo fixo, que seria 200x300 em px).

Fiz uma montagem pelo Photoshop para servir como rascunho de modo a ilustrar melhor a forma como gostaria que aparecessem: https://i.imgur.com/ZlrzMjj.png

Gostaria de adicionar que o intuito não é copiar a estética das mensagens em tópicos presentes no FDF, mas apenas garantir uma forma semelhante de ter os perfis de meu fórum em "cards", porém, como já mencionado, diferente em certos aspectos.

Agradeceria se alguém puder me ajudar a alcançar um resultado parecido.

Atenciosamente,
Grizzly


Última edição por Grizzly em 04.04.21 3:12, editado 1 vez(es) (Razão : Ajeitar o tamanho máximo fixo pedido para o avatar.)
Grizzly

Grizzly
Nível 4

Masculino
Inscrito dia : 20/06/2015
Mensagens : 25
Pontos Ativos : 34

https://arcanarpg.forumeiros.com/

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por Grizzly 31.03.21 22:35

UP!
Grizzly

Grizzly
Nível 4

Masculino
Inscrito dia : 20/06/2015
Mensagens : 25
Pontos Ativos : 34

https://arcanarpg.forumeiros.com/

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por Wusthy 31.03.21 23:41

Olá @Grizzly

Poderia-me informar seu viewtopic_body para começar realizar suas mudanças?

(Aguardo respostas).
Atenciosamente,
Wusthy Envergonhado
Wusthy

Wusthy
Nível 7

Masculino
Inscrito dia : 17/02/2021
Mensagens : 82
Pontos Ativos : 118

https://policianula.forumeiros.com/

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por Grizzly 01.04.21 0:19

Aqui está!

Código:
<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
   //<![CDATA[
   var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">

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>

<div class="sub-header">
   <div class="sub-header-info">
      <h1 class="page-title">
         <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
      </h1>
      <div class="sub-header-path">
         <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
         {NAV_CAT_DESC}
      </div>
   </div>

   <div class="sub-header-buttons">
      <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow" {S_POST_NEW_TOPIC} title="{T_POST_NEW_TOPIC}" class="ion-{I_POST_NEW_TOPIC} button1">{L_POST_NEW_TOPIC}</a>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} title="{T_POST_REPLY_TOPIC}" class="ion-{I_POST_REPLY_TOPIC} button1">{L_POST_REPLY_TOPIC}</a>
      <!-- END switch_user_authreply -->
   </div>
</div>

<div class="topic-actions">
   <!-- BEGIN topicpagination -->
      <div class="pagination">
         {PAGINATION}
      </div>
   <!-- END topicpagination -->

   <div class="topic-actions-buttons">
      <!-- BEGIN switch_twitter_btn -->
      <span>
         <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
         <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
      </span>
      <!-- END switch_twitter_btn -->

      <!-- BEGIN switch_fb_likebtn -->
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
      <!-- END switch_fb_likebtn -->

      <!-- BEGIN switch_plus_menu -->
      <div id="addthis-toolbar" style="display: inline-block; margin-bottom:5px;">
         <div class="btn-floating-left" tabindex="100">
                {L_SHARE}
         </div>
         <div class="addthis-toolbar-btn" style="display:none;">
                {switch_plus_menu.SOCIAL_BUTTONS}
         </div>
      </div>
        {switch_plus_menu.JS_SOCIAL_BUTTONS}
      <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}';
         insert_plus_menu_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
      //]]>
      </script>
      <!-- END switch_plus_menu -->
   </div>
</div>

<div class="quick-nav-topics">
    <!-- BEGIN switch_isconnect -->
   <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
    <!-- END switch_isconnect -->
    <a href="#bottom">{L_GOTO_DOWN}</a>
    <!-- BEGIN switch_isconnect -->
   <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
    <!-- END switch_isconnect -->
</div>

{POLL_DISPLAY}

<!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
      <div class="post {postrow.hidden.ROW_COUNT}">
         <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
      </div>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
      <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
            <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
         <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
            <!-- div class="online2"></div-->
            <dl>
               <dt>
                  <div class="postprofile-avatar">
                     {postrow.displayed.POSTER_AVATAR}
                  </div>
                  <div class="postprofile-name">
                     {postrow.displayed.POSTER_NAME}
                  </div>
                  <div class="postprofile-rank">
                     {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                  </div>
               </dt>
               <dd class="postprofile-info">
                  <!-- BEGIN profile_field -->
                     {postrow.displayed.profile_field.LABEL}
                     {postrow.displayed.profile_field.CONTENT}
                     {postrow.displayed.profile_field.SEPARATOR}
                  <!-- END profile_field -->
                  {postrow.displayed.POSTER_RPG}
               </dd>
               <dd class="postprofile-contact">
                  {postrow.displayed.PROFILE_IMG}
                  {postrow.displayed.PM_IMG}
                  {postrow.displayed.EMAIL_IMG}
                  <!-- BEGIN contact_field -->
                      {postrow.displayed.contact_field.CONTENT}
                  <!-- END contact_field -->
               </dd>
            </dl>
         </div>

         <div class="post-head">
            <ul class="profile-icons">
               <li class="btn-thank">
                  <a href="{postrow.displayed.THANK_URL}">
                     <i class="ion-heart"></i>
                  </a>
               </li>
               <li class="btn-quote-multi">
                  <span onclick="{postrow.displayed.MULTIQUOTE_URL}" id="post_mq{TOPIC_ID}_{postrow.displayed.U_POST_ID}">
                     <i class="ion-quote"></i>
                     <i class="ion-ios-plus-empty"></i>
                  </span>
               </li>
               <li class="btn-quote">
                  <a href="{postrow.displayed.QUOTE_URL}">
                     <i class="ion-quote"></i>
                  </a>
               </li>
               <li class="btn-edit">
                  <a href="{postrow.displayed.EDIT_URL}">
                     <i class="ion-edit"></i>
                  </a>
               </li>
               <li class="btn-delete">
                  <a href="{postrow.displayed.DELETE_URL}">
                     <i class="ion-trash-a"></i>
                  </a>
               </li>
               <li class="btn-ip">
                  <a href="{postrow.displayed.IP_URL}">
                     <i class="ion-ios-information"></i>
                  </a>
               </li>
               <li class="btn-report">
                  {postrow.displayed.REPORT_IMG}
               </li>
            </ul>

            <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
            <div class="topic-date">
               {postrow.displayed.POST_DATE_NEW}

               <!-- BEGIN switch_vote_active -->
               <div class="vote">
                  <!-- BEGIN switch_vote -->
                     <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-plus-circled"></a>
                  <!-- END switch_vote -->

                  <!-- BEGIN switch_vote -->
                     <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-minus-circled"></a>
                  <!-- END switch_vote -->

                  <!-- BEGIN switch_bar -->
                  <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                     <div class="vote-bar-desc">
                        {postrow.displayed.switch_vote_active.L_VOTE_TITLE}
                     </div>

                     <div class="vote-bars">
                        <!-- BEGIN switch_vote_plus -->
                           <div class="vote-bar-plus" style="width:{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="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                     </div>
                  </div>
                  <!-- END switch_bar -->

                  <!-- BEGIN switch_no_bar -->
                     <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
                  <!-- END switch_no_bar -->
               </div>
               <!-- END switch_vote_active -->
            </div>
         </div>

         <div class="postbody">
            <div class="content">
               <div>{postrow.displayed.MESSAGE}</div>
               <!-- BEGIN switch_attachments -->
                  <dl class="attachbox">
                     <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                     <dd class="attachments">
                        <!-- BEGIN switch_post_attachments -->
                        <dl class="file">
                           <dt>
                              <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
                           </dt>
                           <dd>
                              <!-- BEGIN switch_dl_att -->
                              <span><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}</span>
                              <!-- END switch_dl_att -->

                              <!-- BEGIN switch_no_dl_att -->
                              <span>{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}</span>
                              <!-- END switch_no_dl_att -->

                              <!-- BEGIN switch_no_comment -->
                              <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</span>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <span><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></span>
                              <!-- END switch_no_dl_att -->

                              <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
                           </dd>
                        </dl>
                        <!-- END switch_post_attachments -->
                     </dd>
                  </dl>
               <!-- END switch_attachments -->
            </div>
            <div class="edited-message">
               <span class="fa-edit">{postrow.displayed.EDITED_MESSAGE}</span>
            </div>
            <!-- BEGIN switch_signature -->
               <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
            <!-- END switch_signature -->
         </div>
         <!-- BEGIN switch_likes_active -->
         <div class="fa_like_div">
            <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
               <i class="ion-thumbsup"></i>
               <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
            </button>
            <!-- BEGIN switch_dislike_button -->
            <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
               <i class="ion-thumbsdown"></i>
               <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
            </button>
            <!-- END switch_dislike_button -->
            <!-- BEGIN switch_like_list -->
            {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
            <!-- END switch_like_list -->
            <!-- BEGIN switch_dislike_list -->
            {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
            <!-- END switch_dislike_list -->
         </div>
         <!-- END switch_likes_active -->
      </div>
      <!-- BEGIN first_post_br -->
      <hr id="first-post-br" />
      <!-- END first_post_br -->
   <!-- END displayed -->
<!-- END postrow -->

<a name="bottomtitle"></a>

<div class="quick-nav-topics bottom">
    <!-- BEGIN switch_isconnect -->
   <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
    <!-- END switch_isconnect -->
    <a href="#top">{L_BACK_TO_TOP}</a>
    <!-- BEGIN switch_isconnect -->
   <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
    <!-- END switch_isconnect -->
</div>

<div class="topic-actions bottom">
   <!-- BEGIN topicpagination -->
      <div class="pagination">
         {PAGINATION}
      </div>
   <!-- END topicpagination -->

   <div class="topic-actions-buttons">
      <!-- BEGIN switch_user_logged_in -->
         <!-- BEGIN watchtopic -->
            {S_WATCH_TOPIC}
         <!-- END watchtopic -->
      <!-- END switch_user_logged_in -->

      <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow" title="{T_POST_NEW_TOPIC}" {S_POST_NEW_TOPIC} class="ion-{I_POST_NEW_TOPIC} button1">{L_POST_NEW_TOPIC}</a>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}" title="{T_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} class="ion-{I_POST_REPLY_TOPIC} button1">{L_POST_REPLY_TOPIC}</a>
      <!-- END switch_user_authreply -->
   </div>
</div>

<!-- BEGIN promot_trafic -->
   <div class="block" id="ptrafic_close" style="display: none;">
      <div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-plus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
   </div>
   <div class="block" id="ptrafic_open" style="display:'';">
      <div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-minus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
      <ul class="ptrafic">
         <!-- BEGIN link -->
            <li>
               <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">
                  <i class="ion-ios-chatbubble-outline"></i>{promot_trafic.link.TITLE}
               </a>
            </li>
         <!-- END link -->
      </ul>
   </div>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
   <div class="h3">{L_FORUM_RULES}</div>
   <div class="clear"></div>
   <table class="postbody">
      <tr>
         <!-- BEGIN switch_forum_rule_image -->
         <td class="logo">
            <img src="{RULE_IMG_URL}" alt="" />
         </td>
         <!-- END switch_forum_rule_image -->
         <td class="rules content">
            {RULE_MSG}
         </td>
      </tr>
   </table>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
   <a name="quickreply"></a>
   {QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
   <fieldset class="jumpbox">
      <label>{L_JUMP_TO}:</label>
      {S_JUMPBOX_SELECT}
      <input class="button2" type="submit" value="{L_GO}" />
   </fieldset>
</form>

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
   <fieldset class="quickmod">
      <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}" />
      <label>{L_MOD_TOOLS}:</label>
      {S_SELECT_MOD}
      <input class="button2" type="submit" value="{L_GO}" />
   </fieldset>
</form>

<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN show_permissions -->
   <div class="block">
      <div class="h3">{L_TABS_PERMISSIONS}</div>
      {S_AUTH_LIST}
   </div>
<!-- END show_permissions -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
$(document).ready(function() {
   $('pre, code').each(function(i, block) {
      hljs.highlightBlock(block);
   });

   $('.post').each(function() {
      if (!$(this).find('.postprofile-avatar').html().length) {
         $(this).find('.postprofile-rank').css('border-bottom', 'none');
         $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
      }
   });
});
</script>
Grizzly

Grizzly
Nível 4

Masculino
Inscrito dia : 20/06/2015
Mensagens : 25
Pontos Ativos : 34

https://arcanarpg.forumeiros.com/

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por Grizzly 02.04.21 17:49

UP!
Grizzly

Grizzly
Nível 4

Masculino
Inscrito dia : 20/06/2015
Mensagens : 25
Pontos Ativos : 34

https://arcanarpg.forumeiros.com/

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por Grizzly 03.04.21 18:39

UP!
Grizzly

Grizzly
Nível 4

Masculino
Inscrito dia : 20/06/2015
Mensagens : 25
Pontos Ativos : 34

https://arcanarpg.forumeiros.com/

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por Wusthy 04.04.21 20:15

Olá @Grizzly!

Perdão pela minha demora! Mas aqui está seu código:

Modifique seu viewtopic_body para o seguinte código:

Código:
<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
   //<![CDATA[
   var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">
 
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>
 
<div class="sub-header">
   <div class="sub-header-info">
      <h1 class="page-title">
         <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
      </h1>
      <div class="sub-header-path">
         <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
         {NAV_CAT_DESC}
      </div>
   </div>
 
   <div class="sub-header-buttons">
      <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow" {S_POST_NEW_TOPIC} title="{T_POST_NEW_TOPIC}" class="ion-{I_POST_NEW_TOPIC} button1">{L_POST_NEW_TOPIC}</a>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} title="{T_POST_REPLY_TOPIC}" class="ion-{I_POST_REPLY_TOPIC} button1">{L_POST_REPLY_TOPIC}</a>
      <!-- END switch_user_authreply -->
   </div>
</div>
 
<div class="topic-actions">
   <!-- BEGIN topicpagination -->
      <div class="pagination">
         {PAGINATION}
      </div>
   <!-- END topicpagination -->
 
   <div class="topic-actions-buttons">
      <!-- BEGIN switch_twitter_btn -->
      <span>
         <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
         <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
      </span>
      <!-- END switch_twitter_btn -->
 
      <!-- BEGIN switch_fb_likebtn -->
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
      <!-- END switch_fb_likebtn -->
 
      <!-- BEGIN switch_plus_menu -->
      <div id="addthis-toolbar" style="display: inline-block; margin-bottom:5px;">
         <div class="btn-floating-left" tabindex="100">
                {L_SHARE}
         </div>
         <div class="addthis-toolbar-btn" style="display:none;">
                {switch_plus_menu.SOCIAL_BUTTONS}
         </div>
      </div>
        {switch_plus_menu.JS_SOCIAL_BUTTONS}
      <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}';
         insert_plus_menu_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
      //]]>
      </script>
      <!-- END switch_plus_menu -->
   </div>
</div>
 
<div class="quick-nav-topics">
    <!-- BEGIN switch_isconnect -->
   <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
    <!-- END switch_isconnect -->
    <a href="#bottom">{L_GOTO_DOWN}</a>
    <!-- BEGIN switch_isconnect -->
   <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
    <!-- END switch_isconnect -->
</div>
 
{POLL_DISPLAY}
 
<!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
      <div class="post {postrow.hidden.ROW_COUNT}">
         <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
      </div>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
      <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
            <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
         <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
            <!-- div class="online2"></div-->
            <dl>
               <dt>
                <div class="postprofile-name">
                     {postrow.displayed.POSTER_NAME}
                  </div>
                  <div class="postprofile-rank">
                     {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                  </div>
                  <div class="postprofile-avatar">
                     {postrow.displayed.POSTER_AVATAR}
                  </div>
               </dt>
               <dd class="postprofile-info">
                  <!-- BEGIN profile_field -->
                     {postrow.displayed.profile_field.LABEL}
                     {postrow.displayed.profile_field.CONTENT}
                     {postrow.displayed.profile_field.SEPARATOR}
                  <!-- END profile_field -->
                  {postrow.displayed.POSTER_RPG}
               </dd>
               <dd class="postprofile-contact">
                  {postrow.displayed.PROFILE_IMG}
                  {postrow.displayed.PM_IMG}
                  {postrow.displayed.EMAIL_IMG}
                  <!-- BEGIN contact_field -->
                      {postrow.displayed.contact_field.CONTENT}
                  <!-- END contact_field -->
               </dd>
            </dl>
         </div>
 
         <div class="post-head">
            <ul class="profile-icons">
               <li class="btn-thank">
                  <a href="{postrow.displayed.THANK_URL}">
                     <i class="ion-heart"></i>
                  </a>
               </li>
               <li class="btn-quote-multi">
                  <span onclick="{postrow.displayed.MULTIQUOTE_URL}" id="post_mq{TOPIC_ID}_{postrow.displayed.U_POST_ID}">
                     <i class="ion-quote"></i>
                     <i class="ion-ios-plus-empty"></i>
                  </span>
               </li>
               <li class="btn-quote">
                  <a href="{postrow.displayed.QUOTE_URL}">
                     <i class="ion-quote"></i>
                  </a>
               </li>
               <li class="btn-edit">
                  <a href="{postrow.displayed.EDIT_URL}">
                     <i class="ion-edit"></i>
                  </a>
               </li>
               <li class="btn-delete">
                  <a href="{postrow.displayed.DELETE_URL}">
                     <i class="ion-trash-a"></i>
                  </a>
               </li>
               <li class="btn-ip">
                  <a href="{postrow.displayed.IP_URL}">
                     <i class="ion-ios-information"></i>
                  </a>
               </li>
               <li class="btn-report">
                  {postrow.displayed.REPORT_IMG}
               </li>
            </ul>
 
            <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
            <div class="topic-date">
               {postrow.displayed.POST_DATE_NEW}
 
               <!-- BEGIN switch_vote_active -->
               <div class="vote">
                  <!-- BEGIN switch_vote -->
                     <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-plus-circled"></a>
                  <!-- END switch_vote -->
 
                  <!-- BEGIN switch_vote -->
                     <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-minus-circled"></a>
                  <!-- END switch_vote -->
 
                  <!-- BEGIN switch_bar -->
                  <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                     <div class="vote-bar-desc">
                        {postrow.displayed.switch_vote_active.L_VOTE_TITLE}
                     </div>
 
                     <div class="vote-bars">
                        <!-- BEGIN switch_vote_plus -->
                           <div class="vote-bar-plus" style="width:{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="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                     </div>
                  </div>
                  <!-- END switch_bar -->
 
                  <!-- BEGIN switch_no_bar -->
                     <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
                  <!-- END switch_no_bar -->
               </div>
               <!-- END switch_vote_active -->
            </div>
         </div>
 
         <div class="postbody">
            <div class="content">
               <div>{postrow.displayed.MESSAGE}</div>
               <!-- BEGIN switch_attachments -->
                  <dl class="attachbox">
                     <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                     <dd class="attachments">
                        <!-- BEGIN switch_post_attachments -->
                        <dl class="file">
                           <dt>
                              <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
                           </dt>
                           <dd>
                              <!-- BEGIN switch_dl_att -->
                              <span><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}</span>
                              <!-- END switch_dl_att -->
 
                              <!-- BEGIN switch_no_dl_att -->
                              <span>{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}</span>
                              <!-- END switch_no_dl_att -->
 
                              <!-- BEGIN switch_no_comment -->
                              <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</span>
                              <!-- END switch_no_comment -->
 
                              <!-- BEGIN switch_no_dl_att -->
                              <span><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></span>
                              <!-- END switch_no_dl_att -->
 
                              <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
                           </dd>
                        </dl>
                        <!-- END switch_post_attachments -->
                     </dd>
                  </dl>
               <!-- END switch_attachments -->
            </div>
            <div class="edited-message">
               <span class="fa-edit">{postrow.displayed.EDITED_MESSAGE}</span>
            </div>
            <!-- BEGIN switch_signature -->
               <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
            <!-- END switch_signature -->
         </div>
         <!-- BEGIN switch_likes_active -->
         <div class="fa_like_div">
            <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
               <i class="ion-thumbsup"></i>
               <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
            </button>
            <!-- BEGIN switch_dislike_button -->
            <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
               <i class="ion-thumbsdown"></i>
               <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
            </button>
            <!-- END switch_dislike_button -->
            <!-- BEGIN switch_like_list -->
            {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
            <!-- END switch_like_list -->
            <!-- BEGIN switch_dislike_list -->
            {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
            <!-- END switch_dislike_list -->
         </div>
         <!-- END switch_likes_active -->
      </div>
      <!-- BEGIN first_post_br -->
      <hr id="first-post-br" />
      <!-- END first_post_br -->
   <!-- END displayed -->
<!-- END postrow -->
 
<a name="bottomtitle"></a>
 
<div class="quick-nav-topics bottom">
    <!-- BEGIN switch_isconnect -->
   <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
    <!-- END switch_isconnect -->
    <a href="#top">{L_BACK_TO_TOP}</a>
    <!-- BEGIN switch_isconnect -->
   <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
    <!-- END switch_isconnect -->
</div>
 
<div class="topic-actions bottom">
   <!-- BEGIN topicpagination -->
      <div class="pagination">
         {PAGINATION}
      </div>
   <!-- END topicpagination -->
 
   <div class="topic-actions-buttons">
      <!-- BEGIN switch_user_logged_in -->
         <!-- BEGIN watchtopic -->
            {S_WATCH_TOPIC}
         <!-- END watchtopic -->
      <!-- END switch_user_logged_in -->
 
      <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow" title="{T_POST_NEW_TOPIC}" {S_POST_NEW_TOPIC} class="ion-{I_POST_NEW_TOPIC} button1">{L_POST_NEW_TOPIC}</a>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}" title="{T_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} class="ion-{I_POST_REPLY_TOPIC} button1">{L_POST_REPLY_TOPIC}</a>
      <!-- END switch_user_authreply -->
   </div>
</div>
 
<!-- BEGIN promot_trafic -->
   <div class="block" id="ptrafic_close" style="display: none;">
      <div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-plus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
   </div>
   <div class="block" id="ptrafic_open" style="display:'';">
      <div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-minus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
      <ul class="ptrafic">
         <!-- BEGIN link -->
            <li>
               <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">
                  <i class="ion-ios-chatbubble-outline"></i>{promot_trafic.link.TITLE}
               </a>
            </li>
         <!-- END link -->
      </ul>
   </div>
<!-- END promot_trafic -->
 
<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
   <div class="h3">{L_FORUM_RULES}</div>
   <div class="clear"></div>
   <table class="postbody">
      <tr>
         <!-- BEGIN switch_forum_rule_image -->
         <td class="logo">
            <img src="{RULE_IMG_URL}" alt="" />
         </td>
         <!-- END switch_forum_rule_image -->
         <td class="rules content">
            {RULE_MSG}
         </td>
      </tr>
   </table>
</div>
<!-- END switch_forum_rules -->
 
<!-- BEGIN switch_user_logged_in -->
   <a name="quickreply"></a>
   {QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->
 
<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
   <fieldset class="jumpbox">
      <label>{L_JUMP_TO}:</label>
      {S_JUMPBOX_SELECT}
      <input class="button2" type="submit" value="{L_GO}" />
   </fieldset>
</form>
 
<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
   <fieldset class="quickmod">
      <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}" />
      <label>{L_MOD_TOOLS}:</label>
      {S_SELECT_MOD}
      <input class="button2" type="submit" value="{L_GO}" />
   </fieldset>
</form>
 
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->
 
<!-- BEGIN show_permissions -->
   <div class="block">
      <div class="h3">{L_TABS_PERMISSIONS}</div>
      {S_AUTH_LIST}
   </div>
<!-- END show_permissions -->
 
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
$(document).ready(function() {
   $('pre, code').each(function(i, block) {
      hljs.highlightBlock(block);
   });
 
   $('.post').each(function() {
      if (!$(this).find('.postprofile-avatar').html().length) {
         $(this).find('.postprofile-rank').css('border-bottom', 'none');
         $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
      }
   });
});
</script>

(Aguardando respostas para mais instruções);
Atenciosamente,
Wusthy Envergonhado
Wusthy

Wusthy
Nível 7

Masculino
Inscrito dia : 17/02/2021
Mensagens : 82
Pontos Ativos : 118

https://policianula.forumeiros.com/

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por Grizzly 04.04.21 21:26

Olá  @Wusthy!

Modifiquei o meu viewtopic_body, porém os perfis em mensagens ainda não ficaram dentro daqueles "cards" que eu mencionei, mas, depois de procurar melhor aqui no FDF, eu achei este tópico, que possuía uma solução pra isso com um código da folha de estilo CSS. Fiz mínimas modificações para ficar mais ao meu gosto e implementei o código abaixo:

Código:
        .postprofile {
            background-color: #fafafa;
            background-clip: padding-box;
            border-radius: 3px;
            border: 1px solid #ccc;
            margin: 15px;
            box-sizing: border-box;
            padding: 0;
            text-align: center;
        }
        
        .postprofile-rank img {
            max-width: 100%;
        }
        
        .postprofile-contact,
        .postprofile-info,
        .postprofile-rank {
            margin-left: auto;
            margin-right: auto;
            width: 90%;
        }
        
        .postprofile-contact {
            padding-bottom: 2rem;
            display: flex;
            justify-content: center;
        }
   
   .postprofile-avatar img{
       border:none;
       border-radius: 0%;
         object-fit: cover;
         width: 200px;
         height: 300px;
   }

Como pode ser visto logo ao final do código, eu fiz uma gambiarra para tentar manter o avatar, só que devido à minha inexperiência com HTML eu pareço ter feito apenas com que sejam redimensionados ao tamanho máximo que eu gostaria enquanto preenchem o espaço ao invés de também permitir tamanhos menores.

Outro problema foi que, mesmo com as alterações no template e com esse adicional no CSS, os perfis nas mensagens se encontravam desta forma: https://i.imgur.com/SSGFOqT.png

Apesar de estar quase perfeito, a proximidade do nome de usuário com a borda do card e a aparente não centralização dos botões dos campos de contato trazem certa inquietação. Além disso, o perfil ficou sem aquele separador entre o avatar e os campos do perfil presente no rascunho.

Logo, as únicas mudanças restantes que eu solicito seriam a de aumentar o espaço entre o nome/rank e o topo da margem do card, ajeitar o problema das dimensões dos avatares e adicionar um separador entre avatar e campos do perfil (igual ao que separa o rank do avatar). Imagino que seja algo mais tranquilo de se fazer, apesar de não ter ideia de onde em específico deveriam ser feitas as alterações e com que comandos...

Desde já grato pela assistência!
Grizzly

Grizzly
Nível 4

Masculino
Inscrito dia : 20/06/2015
Mensagens : 25
Pontos Ativos : 34

https://arcanarpg.forumeiros.com/

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por Grizzly 07.04.21 5:10

UP

@Grizzly escreveu:Apesar de estar quase perfeito, a proximidade do nome de usuário com a borda do card e a aparente não centralização dos botões dos campos de contato trazem certa inquietação. Além disso, o perfil ficou sem aquele separador entre o avatar e os campos do perfil presente no rascunho.

Logo, as únicas mudanças restantes que eu solicito seriam a de aumentar o espaço entre o nome/rank e o topo da margem do card, ajeitar o problema das dimensões dos avatares e adicionar um separador entre avatar e campos do perfil (igual ao que separa o rank do avatar). Imagino que seja algo mais tranquilo de se fazer, apesar de não ter ideia de onde em específico deveriam ser feitas as alterações e com que comandos...

À respeito deste trecho em uma mensagem anterior minha, gostaria de atualizar as informações ao dizer que ao menos tanto o espaço entre o nome de usuário e o topo da margem do card como a centralização dos campos de contato foram resolvidos!

Portanto, as únicas coisas pelas quais ainda solicito assistência são a adição do separador (entre avatar e campos de perfil) e o problema mencionado das dimensões dos avatares.

Novamente, grato pelo suporte e atenção!
Grizzly

Grizzly
Nível 4

Masculino
Inscrito dia : 20/06/2015
Mensagens : 25
Pontos Ativos : 34

https://arcanarpg.forumeiros.com/

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por Grizzly 08.04.21 21:08

UP
Grizzly

Grizzly
Nível 4

Masculino
Inscrito dia : 20/06/2015
Mensagens : 25
Pontos Ativos : 34

https://arcanarpg.forumeiros.com/

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por Chagas 09.04.21 14:29

Saudações,

Vamos dividir em etapas, o primeiro ponto é sobre a dimensão dos avatares, de acordo com a orientação inicial, a senhora desejava que seja de 200x400, logo troque o código CSS por este, se bem eu entendi ser assim:

Código:
        .postprofile {
            background-color: #fafafa;
            background-clip: padding-box;
            border-radius: 3px;
            border: 1px solid #ccc;
            margin: 15px;
            box-sizing: border-box;
            padding: 0;
            text-align: center;
        }
       
        .postprofile-rank img {
            max-width: 100%;
        }
       
        .postprofile-contact,
        .postprofile-info,
        .postprofile-rank {
            margin-left: auto;
            margin-right: auto;
            width: 90%;
        }
       
        .postprofile-contact {
            padding-bottom: 2rem;
            display: flex;
            justify-content: center;
        }
 
  .postprofile-avatar img{
      border:none;
      border-radius: 0%;
        object-fit: cover;
        width: 200px;
        height: 400px;
  }

Em relação ao separador, a senhora tem alguma imagem que tenha uma função ou você quer tem uma linha cinza sendo formada por código puro?

Atenciosamente,
Chagas
Chagas

Chagas
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/10/2015
Mensagens : 823
Pontos Ativos : 1015

https://pelotao.forumeiros.com

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por Grizzly 09.04.21 18:43

Olá!

@Chagas escreveu:Vamos dividir em etapas, o primeiro ponto é sobre a dimensão dos avatares, de acordo com a orientação inicial, a senhora desejava que seja de 200x400, logo troque o código CSS por este, se bem eu entendi ser assim:

Eu havia feito uma alteração no post principal pouco tempo depois de enviá-lo corrigindo o tamanho do avatar, que seria de 200x300, mas, usando o código que utilizei, que é idêntico ao que o senhor me enviou para trocar (exceto no trecho final das dimensões), o problema era de que qualquer avatar seria, nas mensagens, redimensionado para essa dimensão. Isso pode ser considerado uma solução por si só, mas o conflito nasce da possibilidade de um membro querer utilizar um avatar menor que essas dimensões máximas, o que ocasionaria uma grande perda na resolução da imagem ao invés de fazer com que o campo do avatar se modifique de acordo com as dimensões, ficando menor para evitar o esticamento de determinada imagem. Exemplo: https://i.imgur.com/njBI1Ad.png

Entretanto, como o código atual já é mais que o suficiente para uma ótima personalização no perfil, se a busca por esse adicional no código for muito complicada ou mesmo impossível, não me importo de manter do jeito que está!

@Chagas escreveu:Em relação ao separador, a senhora tem alguma imagem que tenha uma função ou você quer tem uma linha cinza sendo formada por código puro?

Uma linha cinza formada por apenas código mesmo. O ideal seria se fosse semelhante à que atualmente separa o nome de usuário e rank do avatar, como aqui, apontada por uma flecha em vermelho: https://i.imgur.com/mCpHkZu.png

Grato!
Grizzly

Grizzly
Nível 4

Masculino
Inscrito dia : 20/06/2015
Mensagens : 25
Pontos Ativos : 34

https://arcanarpg.forumeiros.com/

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por Chagas 09.04.21 18:58

Saudações,

Entendi o que que quis dizer, vamos lá então, troque o código do perfil por esse que terá o que a senhora pediu:

Código:
.postprofile {
            background-color: #fafafa;
            background-clip: padding-box;
            border-radius: 3px;
            border: 1px solid #ccc;
            margin: 15px;
            box-sizing: border-box;
            padding: 0;
            text-align: center;
        }
     
        .postprofile-rank img {
            max-width: 100%;
        }
     
        .postprofile-contact,
        .postprofile-info,
        .postprofile-rank {
            margin-left: auto;
            margin-right: auto;
            width: 90%;
        }
     
        .postprofile-contact {
            padding-bottom: 2rem;
            display: flex;
            justify-content: center;
        }
 
  .postprofile-avatar img{
      border:none;
      border-radius: 0%;
        object-fit: cover;
        width: 100%;
        height: 100%;
        max-width: 200px;
        max-height: 300px;
  }

 .postprofile-info {
                border-top: 3px solid #e7e4e4;         
        }

Atenciosamente,
Chagas
Chagas

Chagas
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/10/2015
Mensagens : 823
Pontos Ativos : 1015

https://pelotao.forumeiros.com

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por Grizzly 09.04.21 20:08

Está resolvido! Muito obrigado pela assistência!

Podem fechar o tópico.
Grizzly

Grizzly
Nível 4

Masculino
Inscrito dia : 20/06/2015
Mensagens : 25
Pontos Ativos : 34

https://arcanarpg.forumeiros.com/

Atendido / Resolvido Re: Perfis Personalizados em Mensagens

Mensagem por pedxz 10.04.21 10:35

Tópico resolvido


Movido para "Questões resolvidas".


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6017
Pontos Ativos : 7155

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum