Como deixar os perfis do meu fórum assim?

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

Resolvido Como deixar os perfis do meu fórum assim?

Mensagem por Gustavo Bispo em 27/04/13, 08:08 pm

Qual é minha questão:
Esse estilo de perfil é perfeito e eu vi num fórum da forumeiros olha, é esse fórum: http://glare.forumeiros.com/u1
Uma imagem para vocês verem como é:

Como deixo igual???

Endereço do meu fórum:
http://www.gbconfig.ativoforum.com

Versão do fórum:
PUNBB


Última edição por Gustavo Bispo em 29/04/13, 07:03 pm, editado 1 vez(es)
avatar

Gustavo Bispo
Usuário avançado

Masculino
Inscrito dia : 24/11/2012
Mensagens : 399
Pontos Ativos : 601

Ver perfil do usuário http://www.gbconfig.ativoforum.com

Resolvido Re: Como deixar os perfis do meu fórum assim?

Mensagem por Quakeeline em 27/04/13, 08:15 pm

Olá,

- Opções gerais do Painel de Controle
Aceda em:

Painel de Controle
Usuários & Grupos Usuários Perfis Opções gerais do perfil


***** No campo [Ativar o perfil avançado] marque (*) Sim *****
Marque os campos [Exibir esta casa em :] (*) Perfil
-
Ative o seu sistema de Reputação e o botão [Obrigado]


- Gestão das páginas HTML
Aceda em:

Painel de Controle
Módulos HTML & JAVASCRIPT Gestão das páginas HTML


Crie uma nova página HTML de acordo com à figura:


Copie o conteúdo do arquivo abaixo no campo Código HTML * :

Download: profile_view_body.html

Salve e deverá ficar semelhante à imagem abaixo:

Nota: Fique atento ao trecho: /h1-profile_view_body, pois irá usar no próximo passo! *****


- Gestão dos códigos JavaScript
Aceda em:

Painel de Controle
Módulos HTML & JAVASCRIPT Gestão dos códigos JavaScript


Crie um novo JavaScript de acordo com à figura:


Copie o código abaixo no campo Código JavaScript * :
Código:

$(document).ready(function(){
   if($('#profile-advanced-layout').length) {
      $('#profile-advanced-layout, #profile-advanced-right, #pun-visit').hide();
      $('#pun-head').load('/h1-profile_view_body');
      /*Hide widgets!!!*/
      $('.module').css('display','none');
      $('#content').css('margin-right','0px');
      $('#content-container div#left').css('width','0px');
   }
});
Nota: Substitua o h1 no código acima pela numeração correspondente a sua página que foi criada no segundo passo! *****


- Resultado
Meu perfil de testes:

Nota: A imagem acima só é vista da forma que está se estiver logado no fórum!
Link para visualização: http://ipboardskin.forumeiros.com/u1

Membro de testes:

Nota: A imagem acima só é vista da forma que está se estiver logado no fórum e for um Admin ou Moderador!
Link para visualização: http://ipboardskin.forumeiros.com/u2

A única aba que está em fase de implementação é a [Reputação]!

Aba [Atualizações Recentes de Status] para o membro atual:


Aba [Atualizações Recentes de Status] para outro membro:



Notas adicionais:

Para ter o campo:


Deve-se deixar o usuário alterar no perfil o campo [Comentários]!

Para ter o campo:


Deve-se deixar o usuário alterar no perfil o campo [Humor] e que seja no formato texto!

Os botões são sensíveis ao contexto do membro logado, mudando, ocultando e/ou alterando os valores de acordo com o nível do usuário!

"Sabemos que ainda falta muito a ser feito, muito se deve a minha falta de tempo e conhecimentos, quem desejar ajudar fique à vontade, toda ajuda será bem vinda!"





© Best Skins

Até
avatar

Quakeeline
Nível 9

Masculino
Inscrito dia : 26/04/2013
Mensagens : 190
Pontos Ativos : 290

Ver perfil do usuário http://lfdesign.forumeiros.com

Resolvido Re: Como deixar os perfis do meu fórum assim?

Mensagem por Gustavo Bispo em 27/04/13, 08:22 pm

Não dá pra baixar o arquivo HTML
avatar

Gustavo Bispo
Usuário avançado

Masculino
Inscrito dia : 24/11/2012
Mensagens : 399
Pontos Ativos : 601

Ver perfil do usuário http://www.gbconfig.ativoforum.com

Resolvido Re: Como deixar os perfis do meu fórum assim?

Mensagem por Gustavo Bispo em 27/04/13, 08:30 pm

Poderia enviar-me?
avatar

Gustavo Bispo
Usuário avançado

Masculino
Inscrito dia : 24/11/2012
Mensagens : 399
Pontos Ativos : 601

Ver perfil do usuário http://www.gbconfig.ativoforum.com

Resolvido Re: Como deixar os perfis do meu fórum assim?

Mensagem por Gustavo Bispo em 28/04/13, 11:57 am

UP, ALGUEM MANDA O CODE HTML
avatar

Gustavo Bispo
Usuário avançado

Masculino
Inscrito dia : 24/11/2012
Mensagens : 399
Pontos Ativos : 601

Ver perfil do usuário http://www.gbconfig.ativoforum.com

Resolvido Re: Como deixar os perfis do meu fórum assim?

Mensagem por Quakeeline em 28/04/13, 03:58 pm

Olá,

Baixe por aqui o HTML

http://www.mediafire.com/?cf82baek219szbw.

Até
avatar

Quakeeline
Nível 9

Masculino
Inscrito dia : 26/04/2013
Mensagens : 190
Pontos Ativos : 290

Ver perfil do usuário http://lfdesign.forumeiros.com

Resolvido Re: Como deixar os perfis do meu fórum assim?

Mensagem por Gustavo Bispo em 28/04/13, 04:21 pm

Vlw, não deu certo, mas obrigado!
Não consegui fazer, sou b-urro kkkkk Muito feliz
avatar

Gustavo Bispo
Usuário avançado

Masculino
Inscrito dia : 24/11/2012
Mensagens : 399
Pontos Ativos : 601

Ver perfil do usuário http://www.gbconfig.ativoforum.com

Resolvido Re: Como deixar os perfis do meu fórum assim?

Mensagem por Lek em 29/04/13, 06:01 pm

Veja o tutorial dentro do spoiler:


Spoiler:


[TUTORIAL] Perfil IPB para usuários forumeiros

Neste tutorial, você irá aprender á deixar os perfis de seu fórum como os de fóruns IPB.

Atenção!
Caso retire os créditos do criador do código ( [F]lames ), um litígio será aberto contra o fórum em questão por retirar os devidos créditos do criador.
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Perfil IPB para usuários forumeiros



- Estudo e adição do código JavaScript:
Aceda á Gestão dos códigos JavaScript:
Painel de Controle Seta Módulos Seta HTML & JAVASCRIPT Seta Gestão dos Códigos JavaScript
Localize, e clique em "Criar um novo código JavaScript":
Título: -Perfil estilo IPB ( [F]lames ).
Investimento: Não marque NADA.
Código JS:

jQuery(document).ready(function() {
if(jQuery('#profile-advanced-right').length) {
jQuery('body').prepend('ul {width: 149px !important;margin-top: 10px;border-top: 1px solid #eaeaea;border-left: 1px solid #eaeaea;}.ipsVerticalTabbed_tabs li {background: #fbfbfb;color: #808080;border-bottom: 1px solid #eaeaea;font-size: 13px;}.ipsVerticalTabbed_tabs li.active a {width: 135px;position: relative;z-index: 999;border-right: 1px solid #fff;background: #fff;color: #353535;font-weight: bold;}.ipsVerticalTabbed_tabs li a {display: block;padding: 10px 8px;outline: 0;-webkit-transition: background-color 0.1s ease-in-out;-moz-transition: background-color 0.3s ease-in-out;}.ipsLayout_content {width: 100%;float: left;}.ipsLayout_content, .ipsLayout .ipsLayout_left, .ipsLayout_right {position: relative;}.ipsBox_container {background: #fff;border: 1px solid #e0e0e0;}.ipsPad {padding: 9px;}#profile_content_main {min-height: 75px;line-height: 1.3;margin-bottom: 20px;}#user_info_cell {display: table-cell;white-space: nowrap;padding-right: 15px;}.ipsType_pagetitle, .ipsType_subtitle {font: 300 26px/1.3 Helvetica,Arial,sans-serif;color: #323232;}.reset_cursor {cursor: default;}.ipsBadge {display: inline-block;height: 16px;line-height: 16px;padding: 0 5px;font-size: 9px;font-weight: bold;text-transform: uppercase;color: #fff;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;vertical-align: middle;}.ipsBadge_lightgrey {background: #b3b3b3;}.desc.lighter, .desc.lighter.blend_links a {color: #a4a4a4;}.desc, .desc.blend_links a, p.posted_info {font-size: 12px;}.rating {display: block;margin-bottom: 4px;line-height: 16px;}#user_utility_links {margin-top: 10px;text-align: right;}.ipsList_inline>li:first-child {margin-left: 0;}.ipsList_inline>li {display: inline-block;margin: 0 3px;}.ipsButton_secondary {height: 22px;line-height: 22px;font-size: 12px;padding: 0 10px;background: #f6f6f6;background: -moz-linear-gradient(top, #f6f6f6 0%, #e5e5e5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#e5e5e5));border: 1px solid #dbdbdb;-moz-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;color: #616161;display: inline-block;white-space: nowrap;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;}.ipsList_inline>li {display: inline-block;margin: 0 3px;}.ipsList_inline>li:last-child {margin-right: 0;}.ipsList_inline>li {display: inline-block;margin: 0 3px;}.ipsButton_secondary a {color: #616161;}.ipsButton_secondary {height: 22px;line-height: 22px;font-size: 12px;padding: 0 10px;background: #f6f6f6;background: -moz-linear-gradient(top, #f6f6f6 0%, #e5e5e5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#e5e5e5));border: 1px solid #dbdbdb;-moz-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;color: #616161;display: inline-block;white-space: nowrap;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;}.ipsLayout_largeright.ipsLayout_withright {padding-right: 280px;}.ipsLayout_content {width: 100%;float: left;}.ipsLayout_content, .ipsLayout .ipsLayout_left, .ipsLayout_right {position: relative;}.general_box h3 {font: normal 14px helvetica, arial, sans-serif;padding: 8px 10px;background: #e4ecdb;color: #486620;}.ipsList_data li {margin-bottom: 6px;line-height: 1.3;}.ipsList_data .row_title, .ipsList_data .ft {display: inline-block;float: left;width: 120px;font-weight: bold;text-align: right;padding-right: 10px;}#profile_panes_wrap .ipsList_data .row_data {display: block;margin-left: 130px;word-wrap: break-word;max-width: 100%;}.ipsList_data li {line-height: 1.3;}.general_box {background: #fcfcfc;margin-bottom: 10px;}.ipsLayout_largeright.ipsLayout .ipsLayout_right {width: 270px;margin-right: -280px;float: right;}#profile_panes_wrap .reputation {float: none;margin: 0 0 5px 0;padding: 10px;text-align: center;font-weight: normal;display: block;}.reputation.zero {background: #dedede;color: #6e6e6e;-webkit-border-radius: 3px;border-radius: 3px;width: 93%;}#profile_panes_wrap .reputation .number {font-size: 20px;font-weight: bold;display: block;}#profile_panes_wrap .reputation {text-align: center;font-weight: normal;}.desc, .desc.blend_links a, p.posted_info {font-size: 12px;color: #777;}.ipsBox, .ipsPad {padding: 9px;}</style>');
jQuery('#profile-advanced-right').after('<div class="ipsBox clear vcard" id="profile_background"><div class="ipsVerticalTabbed ipsLayout ipsLayout_withleft ipsLayout_smallleft clearfix"><div class="ipsVerticalTabbed_tabs ipsLayout_left" id="profile_tabs" style="background: #f0f0f0;position: relative;margin-left: -159px;width: 159px;border-bottom: 1px solid #eaeaea;"><p class="short photo_holder"><img src="" class="avatar_img" style="max-height: 240px; max-width: 150px;"></p><ul class="clear" style="margin-top: 17px;width: 159px !important;"><li id="tab_link_core:info" class="tab_toggle active" data-tabid="user_info" style="margin-top: 0px;"><a href="#">Visão Geral</a></li><li id="tab_link_members:friends" class=" tab_toggle" data-tabid="friends"><a href="friends" title="Visualizar Amigos">Amigos</a></li><li id="tab_link_forums:topics" class=" tab_toggle" data-tabid="topics"><a href="/sta/" title="Visualizar Tópicos">Tópicos</a></li><li id="tab_link_forums:posts" class=" tab_toggle" data-tabid="posts"><a href="/spa/" title="Visualizar Posts">Posts</a></li><li class=" tab_toggle" style=""><a href="#" style="color: #777 !important;"><b>Créditos:</b> [F]lames</a></li></ul></div><div class="ipsVerticalTabbed_content ipsLayout_content ipsBox_container" id="profile_content" style="min-height: 431px;"><div class="ipsPad"><div id="profile_content_main"><div id="user_info_cell"><h1 class="ipsType_pagetitle"><span class="fn nickname"></span></h1>Cadastrado: <span class="userins"></span><br><br><span class="ipsBadge reset_cursor ipsBadge_lightgrey">offline</span></div><ul class="ipsList_inline" id="user_utility_links"><li id="friend_toggle" class="ipsButton_secondary"><a href="/profile?friend=&mode=editprofile&page_profil=friendsfoes" title="Adicionar como Amigo"><img src="http://hydracheats.com.br/forum/public/style_images/xgame/user_add.png" alt="Adicionar como Amigo">   Adicionar como amigo</a></li><li class="pm_button" id="pm_xxx_16" style="background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(246, 246, 246)), to(rgb(229, 229, 229)));"><a href="#" title="Enviar MP" class="ipsButton_secondary"><img src="http://hydracheats.com.br/forum/public/style_images/xgame/email_open.png" alt="Enviar MP">   Enviar mensagem</a></li></ul></div><div id="profile_panes_wrap" class="clearfix"><div id="pane_core:info" class="ipsLayout ipsLayout_withright ipsLayout_largeright clearfix"><div class="ipsLayout_content"><div class="general_box clearfix"><h3>Estatísticas</h3><br><ul class="ipsList_data clearfix"><li class="clear clearfix"><span class="row_title">Rank:</span><span class="row_data"><span class="userank"><b></b></span></span></li><li class="clear clearfix"><span class="row_title">Posts:</span><span class="row_data"><span class="userpost"></span></span></li><li class="clear clearfix"><span class="row_title">Nascimento:</span><span class="row_data desc lighter"><span class="usernasc"></span></span></li><li class="clear clearfix"><span class="row_title">Sexo:</span><div class="row_data"><img src="http://hydracheats.com.br/forum/public/style_images/xgame/profile/mystery.png" alt="Não informado"> <span class="usersexo"></span></div></li></ul><br></div><div class="general_box clearfix"><h3>Contato</h3><br><ul class="ipsList_data clearfix"></ul></div></div><div class="ipsLayout_right"><div class="reputation zero" id="anonymous_element_21"><span class="number">0</span><span class="title">Neutral</span></div><br><div class="general_box clearfix" id="friends_overview"><h3>Amigos</h3><div class="ipsPad"><p class="desc"></p></div></div><div class="general_box clearfix"><h3>Últimos visitantes</h3><p class="ipsPad desc">Sem visitantes</p></div></div></div></div></div></div></div></div>');
jQuery('#profile-advanced-layout, #profile-advanced-right').hide();
jQuery('.ipsPad #profile_content_main #user_info_cell h1.ipsType_pagetitle span.fn.nickname').html(jQuery('#profile-advanced-right .module.main:first .main-head .h3').text().split(' (conectado)').join(''));
jQuery('.ipsPad #profile_content_main #user_info_cell .userins').html(jQuery('.main-content.clearfix .middleline dl[id^="field_id"]:contains("Data de inscrição") dd .field_uneditable').text());
jQuery('.ipsBox.clear .ipsVerticalTabbed p.short.photo_holder .avatar_img').attr('src',jQuery('#profile-advanced-right .module.main .main-content.clearfix.center img:first').attr('src'));
jQuery('.ipsBox.clear .ipsVerticalTabbed .ipsPad #profile_panes_wrap .ipsLayout .ipsLayout_content .general_box ul.ipsList_data li.clear.clearfix .row_data .userank b').html(jQuery('#profile-advanced-right .module.main .main-content.clearfix.center').html().split('Rank: ').join('').split('<br>').join('').split('src="').join('style="display: none;" src="'));
jQuery('.ipsBox.clear .ipsVerticalTabbed .ipsPad #profile_panes_wrap .ipsLayout .ipsLayout_content .general_box ul.ipsList_data li.clear.clearfix .row_data .userpost').text(jQuery('.main-content.clearfix .middleline dl[id^="field_id"]:contains("Mensagens:") dd .field_uneditable').text());
jQuery('.ipsBox.clear .ipsVerticalTabbed .ipsPad #profile_panes_wrap .ipsLayout .ipsLayout_content .general_box ul.ipsList_data li.clear.clearfix .row_data .usernasc').text(jQuery('.main-content.clearfix .middleline dl[id^="field_id"]:contains("Data de nascimento") dd .field_uneditable').text());
jQuery('.ipsBox.clear .ipsVerticalTabbed .ipsPad #profile_panes_wrap .ipsLayout .ipsLayout_right .general_box .ipsPad p.desc').html(jQuery('#profile-advanced-right .module.main:last .main-content .friend-block a').text());
jQuery('ul#user_utility_links li#friend_toggle a').attr('href','/profile?friend='+jQuery('#profile-advanced-right .module.main:first .main-head .h3').text().split(' (conectado)').join('')+'&mode=editprofile&page_profil=friendsfoes');
jQuery('ul.clear li a:contains("Tópicos")').attr('href','/sta/'+jQuery('#profile-advanced-right .module.main:first .main-head .h3').text().split(' (conectado)').join(''));
jQuery('ul.clear li a:contains("Posts")').attr('href','/spa/'+jQuery('#profile-advanced-right .module.main:first .main-head .h3').text().split('(conectado)').join(''));
jQuery('ul.clear li a:contains("Amigos")').attr('href',location.href+'friends');
if(jQuery('#profile-advanced-right .module.main:first .main-head .h3:contains("conectado")').length) {jQuery('.ipsPad #profile_content_main #user_info_cell .ipsBadge.reset_cursor').html('online').addClass('ipsBadge_green').removeClass('ipsBadge_lightgrey');}
else if(jQuery('#profile-advanced-right .module.main:first .main-head .h3').not('#profile-advanced-right .module.main:first .main-head .h3:contains("conectado")').length) {jQuery('.ipsPad #profile_content_main #user_info_cell .ipsBadge.reset_cursor').html('offline').addClass('ipsBadge_lightgrey').removeClass('ipsBadge_green');}
jQuery('.ipsButton_secondary').css('background','-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#e5e5e5))');
jQuery('li.pm_button a.ipsButton_secondary').attr('href','/privmsg?mode=post&u='+location.href.split('LINK_DE_SEU_FÓRUM/u').join(''));
jQuery('.userClient, .userDesigner, .userManagement, .userMember, .userMemberactive, .userModerator, .userStaff, .vipBS').attr('style','background: none;color: black;text-shadow: none;border-radius: 0px;font-size: 11px;margin-top: 0px;padding: 0px;');
jQuery.get(location.href+'stats', function(data) {
var l=jQuery('#profile-advanced-details .main-content fieldset:nth-child(2) ul:contains("Reputação") li:first',data).text().split('Reputação :').join('');
jQuery('.reputation.zero .number').text(l);
});
if(jQuery('#profile_panes_wrap .reputation .number').text()>=10) {jQuery('#profile_panes_wrap .reputation').removeClass('zero').addClass('positive');jQuery('#profile_panes_wrap .reputation .title').text('Bom !');}
if(jQuery('#profile_panes_wrap .reputation .number').text()>=25) {jQuery('#profile_panes_wrap .reputation').removeClass('zero').addClass('positive');jQuery('#profile_panes_wrap .reputation .title').text('Excelente !');}
if(jQuery('#profile_panes_wrap .reputation .number').text()>=40) {jQuery('#profile_panes_wrap .reputation').removeClass('zero').addClass('positive');jQuery('#profile_panes_wrap .reputation .title').text('Ótimo !');}
if(jQuery('#profile_panes_wrap .reputation .number').text()>=80) {jQuery('#profile_panes_wrap .reputation').removeClass('zero').addClass('positive');jQuery('#profile_panes_wrap .reputation .title').text('Maravilhoso !');}
if(jQuery('#profile_panes_wrap .reputation .number').text()>=160) {jQuery('#profile_panes_wrap .reputation').removeClass('zero').addClass('positive');jQuery('#profile_panes_wrap .reputation .title').text('Perfeito !');}
}
});
function esc() {
jQuery('script#mi').remove();
setTimeout('esc()',100);
}
esc();
Antes de salvar, localize "LINK_DE_SEU_FÓRUM" e substitua pelo link de seu fórum; devendo ficar como este exemplo "http://bestskins.forumeiros.com/u".
Salve!


- Estudo e adição da configuração do código:
Aceda á Configuração:
Painel de Controle Seta Geral Seta Fórum Seta Configuração
Localize "Descrição do Site * :", e, no campo ao lado, antes de tudo, adicione isto:
<script src="LINK.js" id="mi"></script>
LINK Seta Substitua isto pelo link do código JavaSCript criado anteriormente, por exemplo:
<script src="/78564.js" id="mi"></script>
Salve!


- Resultado:


  • Isto é funcional à que versões ??
    O código é funcional á todas as versões, mas apenas foi testado na versão PunBB.


  • Pessoas poderão retirar este código de meu fórum usando o Inspecionar Elemento ??
    Caso você configure bem o código, o mesmo tem um sistema de proteção que impede os usuários de retirarem este código de seu fórum para uso próprio.


  • Oque acontece caso eu retire os créditos do código ??
    O fórum em questão poderá receber um litígio por retirar os devidos créditos do autor do código, eu, [F]lames.





© BestSkins & [F]lames


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[TUTORIAL] Perfil IPB para usuários forumeiros

Até mais.

Lek
Nível 6

Masculino
Inscrito dia : 26/04/2013
Mensagens : 74
Pontos Ativos : 104

Ver perfil do usuário http://nrtlegends.forumeiros.com/

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

- Tópicos similares

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