Refazendo a área do perfil dos usuários

[Vinicius Reis]

Detalhes da questão

Endereço do fórum: http://atelier262.forumeiros.com/
Versão do fórum: PunBB

Descrição

Bom eu quero mudar 100% a área do perfil dos cara!

Olha só como está: http://prnt.sc/d8ymt1

Como eu quero que esteja: http://prnt.sc/d8yo3e e http://prnt.sc/d8yoo7

Bom eu quero retirar tudo do menu que está TUDO mesmo, EXATAMENTE TUDO, e deixar como eu mostrei no print! Tirar aquele troço de:

Bom se possível deixar exatamente igual o print:

Spoiler:

E na área de editar o perfil deixar assim também.

E SÓ COM ESSAS OPÇÕES:

OBVIAMENTE O NOME

• Data de inscrição

• Mensagens privadas

• Mensagens

• ON/OFF

• Sexo

• E-mail

• Amigos (NESTA OPÇÃO AO CLICAR EM VER TODOS, QUERO QUE CARREGA NA MESMA ORDEM ALFABÉTICA E PARA BAIXO, E NÃO ABRINDO UMA NOVA ABA COM OS AMIGOS, QUERO QUE CARREGA NA MESMA ABA MESMO, NORMAL)

• Humor

---

-> Com o fundo daquela cor cinza mesmo.

-> O avatar no lado esquerdo e na ponta.

-> Com os bordados:

-> Aquele negócio de cargo obviamente é o GRUPO.

---

Questão do designer

• Imagem da bolinha cinza (de quando está off): https://i.imgur.com/8A63BXr.png

• Imagem da bolinha de quando estiver ONLINE (a verde): https://i.imgur.com/EOjT8Wg.png

• Imagem da engrenagem perto do nome: https://i.imgur.com/yEzgXxC.png

• Imagem do sexo masculino: https://i.imgur.com/QLo7x1v.png (obviamente o tamanho é menor, tamanho 16x16)

• Imagem do sexo feminino: https://i.imgur.com/Npj5BGp.png

___________________________________________________

Imagens do menu interno, que aparece ao clicar na engrenagem:

Imagem do perfil: https://imgur.com/a/9QBVX.png

Todos os tópicos: https://imgur.com/a/kX04Q.png

Enviar mensagem: https://imgur.com/a/tjnjB.png

Imagem do cargo (mas é o grupo): https://imgur.com/a/Y6M6w.png

---

Colors

Cor do nome do usuário: #009d9d
Cor de fundo: #2f363f
Cor dos nome dos amigos: #009d9d
Cor da mensagem do humor: #d963a3
Cor das coisas brancas: #C2C2DA <<< Aqui tem um texto.

Obrigado. ^^
Acho que fui bastante detalhista, mas se tiver dúvidas só falar...

[Kyo Panda]

Dado a quantidade de trabalho necessário para alcançar tal aparência, não prometerei fidelidade ao pedido.

Se estiver de acordo com isso:

• Em Painel de Controle Usuários & Grupos Usuários Perfis Aba: Opções gerais, certifique-se que a opção Ativar o perfil avançado esteja marcada em Não. Não há como alterarmos o HTML de perfis avançados, mas acredito que o seu já esteja marcado em Não.
  
  
• Seguindo as orientações desse tópico, em Painel de Controle Visualização Templates Perfil, passe-nos o conteúdo do profile_view_body.
  
  
• Em Painel de controle Visualização Imagens e Cores Cores Folha de estilo CSS, passe-nos o conteúdo da caixa de texto.

---

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'

[Vinicius Reis]

-> A opção NÃO já está marcada.

Spoiler:

profile_view_body:

Código:

<!-- BEGIN switch_user_logged_in -->
<p class="right rightside">{LAST_VISIT_DATE}</p>
<!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>

<h1 class="page-title">{L_VIEWING_PROFILE}</h1>
<div class="panel bg1">
   <div class="inner"><span class="corners-top"><span></span></span>

   <div class="column1">
      <div class="h3">{L_USER_PRESENCE}</div>
      <dl class="left-box details" style="width: 80%;">
         <dt>{L_AVATAR_IMG}</dt><dd>{AVATAR_IMG}</dd>
      </dl>
      <dl class="left-box details" style="width: 80%;">
         <dt>{L_RANK}:</dt><dd><strong>{POSTER_RANK}</strong></dd>
         <!-- BEGIN switch_show_status -->
         <dt>{L_STATUT}:</dt><dd><strong>{USER_ONLINE}</strong></dd>
         <!-- END switch_show_status -->
      </dl>
      <!-- BEGIN switch_allow_friendsfoes -->
      <dl class="left-box details" style="width: 80%;margin-top:10px;margin-bottom:10px">
         <dt>{L_FRIENDS_AND_FOES}:</dt><dd><strong>{FRIENDSFOES}</strong></dd>
      </dl>
      <!-- END switch_allow_friendsfoes -->
      <!-- BEGIN switch_auth_user -->
      <dl class="left-box details" style="width: 80%;margin-top:10px;margin-bottom:10px">
         <dt>{L_ADMINISTRATE_USER}:</dt><dd><strong>{ADMINISTRATE_USER}{BAN_USER}</strong></dd>
      </dl>
      <!-- END switch_auth_user -->
   </div>
   <div class="column2">
      <div class="h3">{L_PROFILE}</div>
      <!-- BEGIN profile_field -->
      <dl id="field_id{profile_field.ID}" class="left-box details" style="width: 80%;">
         <dt>{profile_field.LABEL}</dt> <dd>{profile_field.CONTENT}<!-- BEGIN profil_type_user_posts --> [{POST_PERCENT_STATS} / {POST_DAY_STATS}]
            <br /><span style="margin-left: 10px;"><a rel="nofollow" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS} :</a></span>
            <br /><span style="margin-left: 15px;">- <a rel="nofollow" href="/sta/{PUSERNAME}">{L_TOPICS}</a></span>
            <br /><span style="margin-left: 15px;">- <a rel="nofollow" href="/spa/{PUSERNAME}">{L_POSTS}</a></span><!-- END profil_type_user_posts --></dd>
      </dl>
      <!-- END profile_field -->
   </div>
   <div class="clear"></div>
   <span class="corners-bottom"><span></span></span></div>
</div>

<div class="panel bg2">
   <div class="inner"><span class="corners-top"><span></span></span>

   <div class="column1">
   <form action="{S_PROFILE_ACTION}" method="post" name="post">
      <div class="h3">{L_CONTACT} {USERNAME}</div>
      <!-- BEGIN contact_field -->
      <dl id="field_id{contact_field.ID}" class="left-box details" style="width: 80%;">
         <dt>{contact_field.LABEL}</dt> <dd>{contact_field.CONTENT}</dd>
      </dl>
      <!-- END contact_field -->

      <!-- BEGIN switch_admin_user_comment_active -->
      <dl class="details">
         <dt>{L_COMMENTS} :<br /><span class="italic">{L_MODS_AND_ADMINS}</span></dt>
         <dd><textarea class="inputbox" name="admin_user_comment_text" rows="8" cols="30">{ADMIN_USER_COMMENT}</textarea></dd>
      </dl>
      <fieldset class="submit-buttons">
         <input type="hidden" value="update_admin_user_comment" name="mode" />
         <input type="hidden" value="{USER_ID}" name="userid" />
         <input type="submit" class="button2" name="user_comment_maj" value="{L_UPDATE}" />
      </fieldset>
      <!-- END switch_admin_user_comment_active -->
   </form>
   </div>

   <div class="column2">
      <div class="h3">{L_STATS}</div>
      <dl class="left-box details" style="width: 80%;"><dt>{L_LAST_VISITED}:&nbsp;</dt> <dd>{LAST_VISIT_TIME}</dd></dl>
      <!-- BEGIN switch_dhow_mp -->
      <dl class="left-box details" style="width: 80%;"><dt>{L_PRIVATE_MSG}:&nbsp;</dt> <dd>{PRIVATE_MSG}</dd></dl>
      <!-- END switch_dhow_mp -->
   </div>

   <div class="clear"></div>
   <span class="corners-bottom"><span></span></span></div>
</div>

<!-- BEGIN switch_rpg -->
<h1 class="page-title">{L_VIEWING_RPG}</h1>
<div class="panel bg1">
   <div class="inner"><span class="corners-top"><span></span></span>

   <p style="text-align: center;">{RPG_IMAGE}</p>
   <hr />

   <!-- BEGIN rpg_fields_left -->
   <div class="column1">
      <dl class="details">
         <dt>{switch_rpg.rpg_fields_left.F_NAME} :</dt>
         <dd>{switch_rpg.rpg_fields_left.F_VALUE_NEW}</dd>
      </dl>
   </div>
   <!-- END rpg_fields_left -->

   <!-- BEGIN rpg_fields -->
   <div class="column2">
      <dl class="details">
         <dt>{switch_rpg.rpg_fields.F_NAME} :</dt>
         <dd>{switch_rpg.rpg_fields.F_VALUE_NEW}</dd>
      </dl>
   </div>
   <!-- END rpg_fields -->
   <div class="clear"></div>
   <fieldset class="submit-buttons">
      {U_ADMIN_RPG_NEW}
   </fieldset>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_rpg -->
<script src="{JS_DIR}jquery/json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
   $(document).ready(function(){
      $('[id^=field_id]').each(function(){
         if ( $(this).find('.field_editable').is('span, div') )
         {
            $(this).hover(function()
            {
               if( $(this).find('.field_editable.invisible').is('span, div') )
               {
                  $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
                  $(this).find('.ajax-profil_edit').attr({
                        alt: "{L_FIELD_EDIT_VALUE}",
                        title: "{L_FIELD_EDIT_VALUE}"
                     }).click(function(){
                     $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
                     $(this).prev().find('.ajax-profil_valid').attr({
                        alt: "{L_VALIDATE}",
                        title: "{L_VALIDATE}"
                     }).click(function(){
                        var content = new Array();
                        $(this).parent().find('[name]').each(function(){
                           var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                           if ( (type_special && $(this).is(':checked')) || !type_special )
                           {
                              content.push(new Array($(this).attr('name'), $(this).attr('value')));
                           }
                        });
                        var id_name = $(this).parents('[id^=field_id]').attr('id');
                        var id = id_name.substring(8, id_name.length);
                        $.post(
                           "{U_AJAX_PROFILE}",
                           {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                           function(data){
                              $.each(data, function(i, item){
                                 $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                              });
                           },
                           "json"
                        );
                     });
                     $(this).remove();
                  });
               }
            },function()
            {
               if( $(this).find('.field_editable.invisible').is('span, div') )
               {
                  $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                  $(this).find('.ajax-profil_edit').remove();
               }
            });
         }
      });
   });
//]]>
</script>

Meu CSS:

Código:

div#page-footer .navbar {
  display: block !important;
  background: #3c3f41 !important;
}
.topic-actions  {
    float: left;
}
 
#main-content > .pagination {
    margin-top: 10px;
}
/** Pagination begin **/
#main-content > .pagination {
    display: block !important;
}
 
#main-content > .pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    color: #ccc;
}
 
#main-content > .pagination li {
    float: left;
    background-color: #2b2b2b;
}
 
#main-content > .pagination li:first-child,
#main-content > .pagination li:first-child a {
    border-radius: 3px 0 0 3px;
}
 
#main-content > .pagination li:last-child,
#main-content > .pagination li:last-child a {
    border-radius: 0 3px 3px 0;
}
 
#main-content > .pagination a {
    display: block;
    color: #fff;
    font-size: 12px;
    padding: 0 10px;
    background: rgb(68,68,68);
    background: -moz-linear-gradient(top,  rgba(68,68,68,1) 0%, rgba(34,34,34,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(68,68,68,1) 0%,rgba(34,34,34,1) 100%);
    background: linear-gradient(to bottom,  rgba(68,68,68,1) 0%,rgba(34,34,34,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
    border: 1px rgba(0, 0, 0, 0.1) solid;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
}
 
#main-content > .pagination a:hover,
#main-content > .pagination a:focus {
    background: #222;
}
 
#main-content > .pagination .pagination-data {
    padding: 0 10px;
}
 
#main-content > .pagination .pagination-input input {
    margin: 0;
    padding: 0 5px;
    background: #2b2b2b;
    height: 30px;
    outline: none;
    border: 1px #666 solid;
    box-sizing: border-box;
    width: 60px;
    color: #ccc;
    vertical-align: top;
}
/** Pagination end */
body #fa_toolbar #fa_right .fa_separator {
    background: #e5e5e5!important;
    color: #525252;
    display: block!important;
    font-size: 12px!important;
    font-weight: 700!important;
    height: 30px!important;
    margin: 0!important;
    padding: 0!important;
    text-align: left!important;
    width: 100%!important;
}
body #fa_menulist li:nth-child(9)::before {
    content: "Outras Opções";
    margin-left: 5px;
}
body #fa_menulist li:nth-child(4)::before {
    content: "Conteúdo";
    margin-left: 5px;
}
body #fa_menulist li:nth-child(2)::before {
    color: rgb(82, 82, 82);
    content: " Configurações";
    display: block;
    font-size: 12px;
    font-weight: 700;
    height: 30px;
    width: 100%;
    background: rgb(229, 229, 229) !important;
    margin: 0px !important;
    padding: 0px !important;
}
 #fa_menulist li a[href*="admin"]:before {
    content: "\f013";
}
body #fa_menulist a:hover {
    background: #f0f0f0!important;
    color: #333!important;
}
body #fa_usermenu img {
    float: right!important;
    max-width: 55px!important;
}
body #fa_usermenu {
    border-radius: 5px;
    float: right;
    font-size: 10px!important;
    margin-left: 185px;
    margin-top: 35px;
    padding: 0!important;
    text-align: right!important;
}
#fa_usermenu {
    position: absolute;
    left: 0px;
    width: 120px;
    padding: 10px 20px 10px 10px;
    color: #333333;
    font-size: 12px;
    text-align: center;
}
#fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications {
    color: #333333;
    background-color: #FFFFFF;
}
body #fa_menulist a:link, body #fa_menulist a:visited {
    color: #333!important;
    display: block!important;
    font-family: 'Roboto Condensed', Arial!important;
    font-size: 14px;
    font-weight: 300;
}
#fa_menulist li a[href*="/sta"]:before {
    content: "\f02b";
}
#fa_menulist li a:before {
    color: #525252!important;
    font-family: FontAwesome;
    font-size: 14px;
    margin: 0 5px;
}
body #fa_menulist {
    background-color: #fff!important;
    margin-left: 150px!important;
    padding: 5px!important;
    width: 300px!important;
}
#fa_menulist{
left: 732.5px!important;
}
#fa_ranktitle {display:none!important;}
#fa_usermenu td {display:none!important;}
#fa_menulist li a[href*="/u"]:before {
    content: "\f007";
}
#fa_menulist li a[href*="preference"]:before {
    content: "\f013";
}
#fa_menulist li a[href*="/spa"]:before {
    content: "\f086";
}
#fa_menulist li a[href*="watchsearch"]:before {
    content: "\f1d8";
}
#fa_menulist li a[href*="inbox"]:before {
    content: "\f0e0";
}
#fa_menulist li a[href*="logout"]:before {
    content: "\f08b";
}
#main-content > p:nth-child(1) ,  ul.linklist , #picture_legend {display:none;}
/* button image */
.sceditor-button-mention div { background-image:url(https://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }
 
/* drop down input */
#fa-mention {
  background:url(https://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}
form#search {display:none!important;}
#page-header .navbar ul.navlinks, #page-header .navbar {
margin-top: -15px !important;
}
/********************************
cepheus - Informações do membro no tópico em dropdown
*********************************/
.profile-icons {
  display: none;
}
.menu-contextuel {
  background-color: #2b2b2b;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  float: left;
  min-width: 270px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  list-style-type: none;
  display: none;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,0.2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.liste-menu-contextuel>li>a:hover, .liste-menu-contextuel>li>a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top,#08c,#0077b3);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));
  background-image: -webkit-linear-gradient(top,#08c,#0077b3);
  background-image: -o-linear-gradient(top,#08c,#0077b3);
  background-image: linear-gradient(to bottom,#08c,#0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0);
}
.menu-contextuel table tr:nth-child(odd) td, .menu-contextuel table tr:nth-child(odd) th {
  background-color: #2b2b2b;
}
.table-cadre td {
  vertical-align: top;
}
.liste-menu-contextuel {
  top: 100%;
  left: 0;
  min-width: 100px;
  padding: 2px 0;
  margin: 2px 0 0;
  list-style: none;
  float: left;
}
.nav-header {
  display: block;
  padding: 3px 15px;
  font-size: 11px;
  font-weight: bold;
  line-height: 20px;
  color: #999;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.liste-menu-contextuel>li>a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  white-space: nowrap;
  color: #c2c2da!important;
}
.element-menu-contextuel {
  color: #c2c2da!important;
  cursor: pointer;
}
.liste-menu-contextuel img {
  vertical-align: middle;
}
.liste-menu-contextuel {
  list-style-type: none!important;
}
.liste-menu-contextuel>li.nav-header>a strong {
  color: #999!important;
}
.liste-menu-contextuel>li.nav-header>a {
  clear: none;
  display: inline!important;
  padding: 0!important;
  margin: 0!important;
  white-space: none;
  vertical-align: top;
  text-decoration: none;
}
.navbar {
        background: #2D3134!important;
        border: none!important;
        margin: -5px 0px 0!important;
}
a.mainmenu {
    background: url(https://i18.servimg.com/u/f18/18/45/41/65/nav10.png) repeat-x 0 45px;
    color: #FFF;
    display: inline-block;
    font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    padding: 0 12px;
    transition: 250ms;
}
#page-header a.mainmenu.fa_navactif, #page-header a.mainmenu:hover {
    background-position: 0 40px;
}
#page-footer, div.navbar, div.navbar ul.linklist {
    display: block !important;
}
ul.navlinks {
    border-bottom: transparent!Important;
}
div.navbar {
height: 35px!important;
 
}
.row1, .row2 {
    border-bottom: 1px solid #050C0D;
    border-top: 1px solid #314E52;
}
ul.topiclist.topics .header {
  display: none!important;
}
 
.forumbg {
  background-color: transparent!important;
  background-image: none!important;
  border: 0px solid #2d555e!important;
}
 
ul.topiclist.topics li {
  margin-bottom: 10px;
  border-radius: 5px;
  border-bottom: 1px solid #050C0D;
  border-top: 1px solid #314E52;
}
#profile-advanced-add a, a.button1, a.button2, button.button2, input.button, input.button1, input.button2 {
    background: #006CCC;
    border: none;
    border-radius: 3px;
    color: #FFF!important;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: normal!important;
    margin: 2px;
    padding: 6px 9px!important;
    transition: 300ms;
}
input[type="button"], input[type="reset"], input[type="submit"]{
    background: #006CCC;
    border: none;
    border-radius: 3px;
    color: #FFF!important;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: normal!important;
    margin: 2px;
    padding: 6px 9px!important;
    transition: 300ms;
}
#divPub {
        display: none !important;
}
dl.codebox {
  background-color: #0E242D;
  border: 0px solid #C9D2D8;
  font-size: 1em;
  padding: 5px;
  border-radius: 8px;
}
 
dl.codebox dts {
  border-radius: 8px;
  padding: 5px;
  border-bottom: 0px solid #CCC;
}
 
dl.codebox dt {
  color: #fff;
  display: inline-block;
  background-color: #1C3C41;
  border-radius: 8px;
  padding: 5px;
  border-bottom: 0px solid #CCC;
}
hr {
    border-top: 1px solid #0e222b;
    border-bottom: 1px solid #2A4F58;
    height: 0px!important;
}
#search input[value="Buscar"] {
        background: url('http://i.imgur.com/zKewnXy.png') no-repeat white center !important;
        border: 1px solid white !important;
        font-size: 0px !important;
        height: 26px !important;
        width: 40px !important;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-radius-topright: 5px;
        -moz-border-radius-bottomright: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
}
#search-box #keywords {
        color: grey !important;
        border: 1px solid silver !important;
        background: #2B2B2B!important;
        padding-left: 4px;
        height: 20px;
        font-size: 13px;
        width: 150px !important;
}
li > a.mainmenu[href="/faq"] { display : none; }
li > a.mainmenu[href="/groups"] { display : none; }
li > a.mainmenu[href="/memberlist"] { display : none; }
li > a.mainmenu[href="/register"] { display : none; }
li > a.mainmenu[href="/search"] { display : none; }
#info_open, #main-content p.rightside, #main-content div[style="height"] + p, #page-footer .navbar, .h3, .pagination, form[action="/viewforum"], topic-actions, ul.linklist, ul.ul-icons, .headerbar, .pathname-box, div.buttons a img[src="http://i.imgur.com/sNOnUxV.png"], div.postbody h2.topic-title, div.postbody p.author, div.postbody div.blank  {
    display: none!important;
}
div.postbody {width: 87%}
div.postprofile {width: 12%; height: 155px;}
div.postprofile dl dt a img {margin-top: 10px}
.row2, .row1 {border-radius: 10px; margin-bottom: 20px;}
div.postbody div.content.clearfix {margin-top: -20px;}
div.usercountpost {float: right} div.usercountpost:before {content: "#"}
#forum-search {display: none;}
a.topictitle {
color: #C2C2DA;
}

[Vinicius Reis]

Correção: A versão do meu fórum é phpBB3

[Kyo Panda]

Vou passar uma lista do que não foi possível fazer:

• Lista de amigos, pois o template do Forumeiros não oferece nenhuma variável para adicioná-la.
  
  
• E-mail, pois não há variável para isso. Mas você pode criar um campo de perfil personalizado para isso, mas eu não aconselho, pois não é "saudável" expor o e-mail dos usuários.
  
  
• A ordem dos quatro primeiros campos (Sexo, Mensagens, Data de Inscrição e Humor) não podem ser alteradas, pois são gerados automaticamente nessa ordem pelo template.

A ordem dos quatro primeiros itens pode até ser alterada por jQuery, mas isso passa um pouco dos limites da minha edição.

---

Se estiver de acordo com os itens acima, troque o profile_view_body por esse:

Código:

<div class="panel bg1 profile-custom">
    <div class="inner">
        <div class="profile-avatar-column">
            {AVATAR_IMG}
        </div>
        <div class="profile-information-column">
            <h1 class="profile-row profile-username">
                <a href="javascript:void(0);">
                    <img src="http://i.imgur.com/yEzgXxC.png" alt="Perfil de {PUSERNAME}" />
                </a> {PUSERNAME}
            </h1>
            <ul class="profile-menu">
                <li class="profile-menu-header">
                    {PUSERNAME} <span>PERFIL</span>
                </li>
                <li>
                    <a href="/u{USER_ID}">
                        <img src="http://i.imgur.com/Pr3tUCg.png" alt="Perfil" /> Perfil
                    </a>
                </li>
                <li>
                    <a href="/spa/{PUSERNAME}">
                        <img src="http://i.imgur.com/iGu3xps.png" alt="Últimos posts" /> Últimos posts
                    </a>
                </li>
                <li>
                    <a href="/privmsg?mode=post&u={USER_ID}">
                        <img src="http://i.imgur.com/Ll9tn1p.png" alt="Enviar mensagem" /> Enviar mensagem
                    </a>
                </li>
                <li>
                    <img src="http://i.imgur.com/UABC8KS.png" alt="Cargo" /> Cargo: {POSTER_RANK}
                </li>
            </ul>
            <!-- BEGIN profile_field -->
            <div data-id="{profile_field.ID}" class="profile-row profile-field">
                {profile_field.LABEL} {profile_field.CONTENT}
            </div>                   
            <!-- END profile_field -->
            <!-- BEGIN switch_dhow_mp -->
            <div class="profile-row profile-field profile-field-privmsg">
                {L_PRIVATE_MSG}: {PRIVATE_MSG}
            </div>
            <!-- END switch_dhow_mp -->
            <div class="profile-row profile-field profile-field-status profile-field-status-{USER_ONLINE}">{USER_ONLINE}</div>
        </div>
    </div>
</div>
<script type="text/javascript">
    /*global jQuery*/

    (function($) {
        'use strict';

        $('.profile-username a').on('click', function() {
            $('.profile-menu').toggleClass('profile-menu-open');
        });
    })(jQuery);
</script>

E adicione ao CSS:

Código:

/** BEGIN Custom Profile */

div.profile-custom {
  padding: 0;
  margin-bottom: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div.profile-custom *,
div.profile-custom *:before,
div.profile-custom *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

div.profile-custom .inner {
  background-color: #2f363f;
  padding: 10px 0;
  border-radius: 10px;
}

div.profile-custom .profile-avatar-column {
  width: 120px;
  text-align: center;
  float: left;
}

div.profile-custom .profile-avatar-column img {
  max-width: 100px;
  border: 2px #070000 solid;
}

div.profile-custom .profile-information-column {
  margin-left: 120px;
}

div.profile-custom .profile-row {
  font-size: 12px;
  line-height: 1.5em;
  color: #c2c2da;
}

div.profile-custom .profile-username {
  border: none;
  margin: 0;
  color: #009d9d;
  font-size: 24px;
}

div.profile-custom .profile-username img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

div.profile-custom .profile-field {
  display: none;
}

div.profile-custom .profile-field[data-id="-4"],
div.profile-custom .profile-field[data-id="-6"],
div.profile-custom .profile-field[data-id="-7"],
div.profile-custom .profile-field[data-id="-8"],
div.profile-custom .profile-field-status,
div.profile-custom .profile-field-privmsg {
  display: block;
}

div.profile-custom .profile-field span {
  color: inherit !important;
}

div.profile-custom .profile-field div {
  display: inline;
}

div.profile-custom .profile-field div.invisible {
  display: none;
}

div.profile-custom .profile-field[data-id="-8"] div {
  color: #d963a3;
  font-weight: 700;
}

div.profile-custom .profile-field-status {
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 15px;
}

div.profile-custom .profile-field-status-conectado {
  background-image: url(http://i.imgur.com/EOjT8Wg.png);
}

div.profile-custom .profile-field-status-Desconectado {
  background-image: url(http://i.imgur.com/8A63BXr.png);
}

div.profile-custom ul.profile-menu {
  position: absolute;
  padding: 10px 20px 0 !important;
  list-style: none !important;
  background: #2b2b2b;
  border-radius: 10px;
  color: #c2c2da;
  font-size: 12px;
  border: 1px #232323 solid;
  opacity: 0;
  visibility: hidden;
  transition: 250ms ease opacity;
}

div.profile-custom ul.profile-menu-open {
  opacity: 1;
  visibility: visible;
}

div.profile-custom ul.profile-menu a {
  color: inherit;
}

div.profile-custom ul.profile-menu img {
  vertical-align: middle;
}

div.profile-custom ul.profile-menu li {
  margin-bottom: 10px;
}

div.profile-custom li.profile-menu-header {
  position: relative;
  text-transform: uppercase;
}

div.profile-custom li.profile-menu-header span {
  position: absolute;
  right: 0;
}

/** END Custom Profile */

Resultado: http://ajuda-phpbb3.forumeiros.com/u1

[Vinicius Reis]

http://atelier262.forumeiros.com/u1

a cor que vc colocou nas bordinhas é diferente da do meu fórum :/

[Cream]

Olá,

A qual borda se refere? Você pode procurar no código referências à "border:" e modificar a cor para a desejada.

Até mais!

[Vinicius Reis]

Um pequeno detalhe mesmo ^^ amei, obrigado, eu realmente pensei que teria umas semanas de "UP" primeiro... HAHAHA! Thanks.

[Vinicius Reis]

iup

[Vinicius Reis]

UP

[Kyo Panda]

a cor que vc colocou nas bordinhas é diferente da do meu fórum :/

A qual cor se refere, a cor de fundo? Pois estou usando #2f363f, como orientado no tópico.

A imagem que passou como referência acima possuem setas que apontam para o espaçamento entre o perfil, o menu e o rodapé. Essa seriam as "bordas" que se refere?

[Vinicius Reis]

Não!

As bordas que eu me refiro, foi a tentativa de fazer com que o modelo fique em formato de bordas, e não de um quadrado.

Como pode ver aparentemente parece um quadrado no meu fórum!

Pois a cor que vc está usando para diferenciar o quadrado para borda é #1c3b40 e está um pouco quanto errada! A cor correta seria: #0e252e

Olha do que eu estou falando!

Spoiler:

Obrigado. :p

[Kyo Panda]

Oooowwww... Percebo.

Adicione ao CSS:

Código:

div.profile-custom {
  background: none;
}

div.profile-custom .inner {
  min-height: 120px;
}

[Vinicius Reis]

Ae! Obrigadooo....

[Kyo Panda]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas.