[Tutorial] Perfil IPB v0.2b - (IPBoard 3.43)

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Perfil IPB v0.2b - (IPBoard 3.43)


Créditos: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Nota: Só testei na versão PunBB! Versão de implementação, fase beta.
Se alguém achar que deve ter o nome nos créditos, fique à vontade!
Se usar e desejar dar créditos, não o faça a mim e sim à invisionpower!

--> Tutoriais, dicas e astúcias <--
Perfil IPB v0.2b - (IPBoard 3.43)



1º - 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 (*) Não
Ative o seu sistema de Reputação e o botão [Obrigado]
Marque o campo [Exibir esta casa em :] (*) Perfil


2º - Editando Templates
Aceda em:

Painel de Controle
Visualização >Templates >Perfil

Selecione o template profile_view_body, substitua o conteúdo pelo código abaixo:

Código:


<div id="profile_background" class="ipsBox clear2 vcard">
  <div class="ipsVerticalTabbed ipsLayout ipsLayout_withleft ipsLayout_smallleft clearfix">
      <div id="profile_tabs" class="ipsVerticalTabbed_tabs ipsLayout_left">
        <p class="short photo_holder">
            <!-- <img alt="- foto" src="" id="profile_photo" class="ipsUserPhoto"> -->
            {AVATAR_IMG}
        </p>
        <div class="warn_panel clear2 ipsType_small">
            <strong><a title="Visualizar histório de Alerta" id="warn_link_xxx_86" href="">Alerta</a></strong>
        </div>
        <ul class="clear2">
            <li data-tabid="user_info" class="tab_toggle active" id="tab_link_core:info"><a href="#">Visão Geral</a></li>
            <li data-tabid="status" class=" tab_toggle" id="tab_link_members:status"><a title="Visualizar Atualizações Recentes de Status" href="#">Atualizações Recentes de Status</a></li>
            <li data-tabid="reputation" class=" tab_toggle" id="tab_link_members:reputation"><a title="Visualizar Reputação" href="#">Reputação</a></li>
            <li data-tabid="friends" class=" tab_toggle" id="tab_link_members:friends"><a title="Visualizar Amigos" href="">Amigos</a></li>
            <li data-tabid="topics" class=" tab_toggle" id="tab_link_forums:topics"><a title="Visualizar Tópicos" href="/sta/{PUSERNAME}">Tópicos</a></li>
            <li data-tabid="posts" class=" tab_toggle" id="tab_link_forums:posts"><a title="Visualizar Posts" href="/spa/{PUSERNAME}">Posts</a></li>
            <li data-tabid="shoutbox" class=" tab_toggle" id="tab_link_shoutbox:shoutbox"><a title="Visualizar My Shouts" href="/st/{PUSERNAME}">My Shouts</a></li>
        </ul>
      </div>
      <div id="profile_content" class="ipsVerticalTabbed_content ipsLayout_content ipsBox_container" style="min-height: 461px;">
        <div class="ipsPad">
            <div id="profile_content_main">
              <div id="user_info_cell">
                  <h1 class="ipsType_pagetitle">
                    <span class="fn nickname">{USERNAME}</span>
                  </h1>
                  Cadastrado: <span class="Joined_in"></span><br>
                  <span data-tooltip="" class="ipsBadge ipsBadge_green reset_cursor"></span>
                  <span class="desc lighter">Última atividade: {LAST_VISIT_TIME}</span>
              </div>
              <div id="user_status_cell">
                  <div id="user_latest_status">
                    <div>
                        <span class="user_comments"></span><br>
                        <span class="ipsType_smaller desc lighter blend_links"><a href="">{L_UPDATE}</a></span>
                    </div>
                  </div>
              </div>
              <span style="margin-bottom: 10px" class="rating left clear2">
                  <a title="Péssimo" id="user_rate_1" href="#"><img class="rate_img" alt="-" src="http://i69.servimg.com/u/f69/16/62/61/50/star_o10.png"></a>
                  <a title="Ruim" id="user_rate_2" href="#"><img class="rate_img" alt="-" src="http://i69.servimg.com/u/f69/16/62/61/50/star_o10.png"></a>
                  <a title="Neutro" id="user_rate_3" href="#"><img class="rate_img" alt="-" src="http://i69.servimg.com/u/f69/16/62/61/50/star_o10.png"></a>
                  <a title="Ótimo" id="user_rate_4" href="#"><img class="rate_img" alt="-" src="http://i69.servimg.com/u/f69/16/62/61/50/star_o10.png"></a>
                  <a title="Excelente" id="user_rate_5" href="#"><img class="rate_img" alt="-" src="http://i69.servimg.com/u/f69/16/62/61/50/star_o10.png"></a>
                  <span class="desc" id="rating_text"></span>
              </span>
              <ul id="user_utility_links" class="ipsList_inline">
                  <li class="ipsButton_secondary" id="friend_toggle">
                    <a title="Adicionar como Amigo" href="/profile?friend={PUSERNAME}&mode=editprofile&page_profil=friendsfoes"><img alt="Adicionar como Amigo" src="http://i69.servimg.com/u/f69/16/62/61/50/user_d10.png">   Adicionar amigo</a>
                  </li>
                  <li class="ipsButton_secondary" id="friend_toggle">
                    <a title="Remover Amigo" href="/profile?foe={PUSERNAME}&mode=editprofile&page_profil=friendsfoes"><img alt="Remover Amigo" src="http://i69.servimg.com/u/f69/16/62/61/50/user_d10.png">   Remover amigo</a>
                  </li>
                  <li id="pm_xxx_86" class="pm_button"><a class="ipsButton_secondary" title="Enviar MP" href="/privmsg?mode=post&u=2"><img alt="Enviar MP" src="http://i69.servimg.com/u/f69/16/62/61/50/email_10.png">   Enviar MP</a></li>
                  <li>
                    <a class="ipsButton_secondary" href="/st/{PUSERNAME}"><img alt="Localizar Tópicos" src="http://i69.servimg.com/u/f69/16/62/61/50/page_t10.png">    Meu Conteúdo</a>
                  </li>
              </ul>
            </div>
            <div class="clearfix" id="profile_panes_wrap">
              <div class="ipsLayout ipsLayout_withright ipsLayout_largeright clearfix" id="pane_core:info">
                  <div class="ipsLayout_content">
                    <div class="general_box clearfix">
                        <h3>Quem sou eu</h3>
                        <div class="ipsPad">
                          <span class="user_humor"></span><br>
                        </div>
                    </div>
                    <hr>
                    <div class="general_box clearfix">
                        <h3>Estatísticas</h3>
                        <br>
                        <ul class="ipsList_data clearfix">
                          <li class="clear2 clearfix">
                              <span class="row_title">Grupo:</span>
                              <span class="row_data"><span style="color:red">{POSTER_RANK}</sup></span></span>
                          </li>
                          <!-- BEGIN profile_field -->
                          <li class="clear2 clearfix">
                              <dl id="field_id{profile_field.ID}" class="left-box details" style="width: 80%;">
                                <dt>{profile_field.LABEL}</dt> <dd>{profile_field.CONTENT}</dd>
                              </dl>
                          </li>
                          <!-- END profile_field -->
                          <li class="clear2 clearfix">
                              <span class="row_title">Última visita:</span>
                              <span class="row_data">{LAST_VISIT_DATE}</span>
                          </li>
                          <!-- BEGIN switch_show_status -->
                          <li class="clear2 clearfix">
                              <span class="row_title">{L_STATUT}:</span>
                              <span class="row_data user_online">{USER_ONLINE}</span>
                              </dl>
                          </li>
                          <!-- END switch_show_status -->
                          <!-- Backup
                          <li class="clear2 clearfix">
                              <span class="row_title">Visualizações:</span>
                              <span class="row_data">0</span>
                          </li>
                          <li class="clear2 clearfix">
                              <span class="row_title">Título:</span>
                              <span class="row_data">{POSTER_RANK}</span>
                          </li>
                          -->
                        </ul>
                        <br>
                    </div>
                    <div class="general_box clearfix">
                        <h3>Contato</h3>
                        <br>
                        <ul class="ipsList_data clearfix">
                          <li class="clear2 clearfix">
                              <div class="contact_field">
                                <!-- BEGIN contact_field -->
                                <dt>{contact_field.LABEL}</dt> <dd>{contact_field.CONTENT}</dd>
                                <!-- END contact_field -->
                                <!-- Backup
                                <span class="row_title">E-mail:</span>
                                <span class="row_data">
                                    <a href="mailto:"></a>
                                </span>
                                -->
                              </div>
                          </li>
                          <!--
                          <li>
                              <span class="row_title">MSN</span>
                              <span class="row_data">
                                <img alt="MSN" src="http://i69.servimg.com/u/f69/16/62/61/50/profil10.gif"> 
                                <a href="msnim:chat?contact=" class="url"></a>
                              </span>
                          </li>
                          -->
                        </ul>
                    </div>
                  </div>
                  <div class="ipsLayout_right">
                    <div data-tooltip="{PUSERNAME}" class="reputation zero" id="anonymous_element_67">
                        <span class="number"></span>
                        <span class="title"></span>
                    </div>
                    <br>
                    <div class="general_box clearfix">
                        <h3>Ferramentas do Usuário</h3>
                        <ul class="ipsPad">
                          <!-- BEGIN profile_field -->
                          <dl id="field_id{profile_field.ID}" class="left-box details" style="width: 100%;">
                              <dd>
                                <!-- BEGIN profil_type_user_posts -->
                                <a rel="nofollow" href="/st/{PUSERNAME}">
                                    <img alt="- " src="http://i69.servimg.com/u/f69/16/62/61/50/page_t10.png">   Procurar por mensagens
                                </a><br />
                                <a rel="nofollow" href="/sta/{PUSERNAME}">
                                    <img alt="- " src="http://i69.servimg.com/u/f69/16/62/61/50/topics10.png">   Visualizar somente os tópicos
                                </a><br />
                                <a rel="nofollow" href="/spa/{PUSERNAME}">
                                    <img alt="- " src="http://i69.servimg.com/u/f69/16/62/61/50/t_unre10.png"> &nbsp; Visualizar somente os posts
                                </a>
                                <!-- END profil_type_user_posts -->
                              </dd>
                          </dl>
                          <!-- END profile_field -->
                          <!-- BEGIN switch_auth_user -->
                          <li class="clear2 clearfix">
                              <span class="row_title"><br>{L_ADMINISTRATE_USER}: </span>
                              <span class="row_data"><strong>{ADMINISTRATE_USER}{BAN_USER}</strong></span>
                          </li>
                          <!-- END switch_auth_user -->
                        </ul>
                    </div>
                    <div id="friends_overview" class="general_box clearfix">
                        <h3>{L_FRIENDS_AND_FOES}</h3>
                        <div class="ipsPad">
                          <!-- BEGIN switch_allow_friendsfoes -->
                          <dl>
                              <dd><strong>{FRIENDSFOES}</strong></dd>
                          </dl>
                          <!-- END switch_allow_friendsfoes -->
                        </div>
                    </div>
                    <div class="general_box clearfix">
                        <h3>Últimos visitantes</h3>
                        <ul class="ipsList_withminiphoto ipsPad">
                          <li class="clearfix">
                              <a class="ipsUserPhotoLink left" title="Visualizar Perfil" href="#"><img class="ipsUserPhoto ipsUserPhoto_mini" alt="Foto" src="#"></a>
                              <div class="list_content">
                                <br>
                                <span class="desc lighter">{LAST_VISIT_DATE}</span>
                              </div>
                          </li>
                        </ul>
                    </div>
                  </div>
              </div>
            </div>
        </div>
      </div>
  </div>
</div>
<script type="text/javascript">
  //<![CDATA[
  <!-- BEGIN switch_show_status -->
  if($.trim('{USER_ONLINE}') == 'conectado') {
      $('.ipsPad #profile_content_main #user_info_cell .ipsBadge.reset_cursor').html('online').addClass('ipsBadge_green').removeClass('ipsBadge_lightgrey');
  } else {
      $('.ipsPad #profile_content_main #user_info_cell .ipsBadge.reset_cursor').html('offline').addClass('ipsBadge_lightgrey').removeClass('ipsBadge_green');
  };
  <!-- END switch_show_status -->
  $('.ipsPad #profile_content_main #user_info_cell .Joined_in').html($('.ipsList_data.clearfix .clear2.clearfix" dl[id^="field_id"]:contains("Data de inscrição") dd .field_uneditable').text());
  $('.ipsList_data.clearfix .clear2.clearfix" dl[id^="field_id"]:contains("Data de inscrição")').css('display', 'none');

  $('.user_comments').html($('.ipsList_data.clearfix .clear2.clearfix" dl[id^="field_id"]:contains("Comentários") dd .field_uneditable').text());
  $('.ipsList_data.clearfix .clear2.clearfix" dl[id^="field_id"]:contains("Comentários")').css('display', 'none');

  $('.ipsPad .user_humor').html($('.ipsList_data.clearfix .clear2.clearfix" dl[id^="field_id"]:contains("Humor") dd .field_uneditable').text());
  $('.ipsList_data.clearfix .clear2.clearfix" dl[id^="field_id"]:contains("Humor")').css('display', 'none');

  $('.reputation.zero .number').text($('.ipsList_data.clearfix .clear2.clearfix" dl[id^="field_id"]:contains("Reputação") dd .field_uneditable').text());
  $('.ipsList_data.clearfix .clear2.clearfix" dl[id^="field_id"]:contains("Reputação")').css('display', 'none');

  if($('#profile_panes_wrap .reputation .number').text()>=0) {$('#profile_panes_wrap .reputation').removeClass('positive').addClass('zero');$('#profile_panes_wrap .reputation .title').text('Neutro');}
  if($('#profile_panes_wrap .reputation .number').text()>=1) {$('#profile_panes_wrap .reputation').removeClass('zero').addClass('positive');$('#profile_panes_wrap .reputation .title').text('Neutro');}
  if($('#profile_panes_wrap .reputation .number').text()>=10) {$('#profile_panes_wrap .reputation').removeClass('zero').addClass('positive');$('#profile_panes_wrap .reputation .title').text('Regular');}
  if($('#profile_panes_wrap .reputation .number').text()>=20) {$('#profile_panes_wrap .reputation').removeClass('zero').addClass('positive');$('#profile_panes_wrap .reputation .title').text('Bom');}
  if($('#profile_panes_wrap .reputation .number').text()>=100) {$('#profile_panes_wrap .reputation').removeClass('zero').addClass('positive');$('#profile_panes_wrap .reputation .title').text('Ótimo');}
  if($('#profile_panes_wrap .reputation .number').text()>=200) {$('#profile_panes_wrap .reputation').removeClass('zero').addClass('positive');$('#profile_panes_wrap .reputation .title').text('Excelente');}
  //]]>
</script>

Não esqueça de publicá-lo!


3º - Adicionando o Código CSS
Aceda em:

Painel de Controle
Visualização >Imagens e Cores >Cores >Folha de Estilo CSS

Copie e cole código abaixo dentro de sua folha de estilo:

Código:


/* #region ----- profile_background ----- */
.clear2 {
    clear: both;
}
.ipsBox, .ipsPad {
    padding: 9px;
}
.ipsBox {
    background: none repeat scroll 0 0 #EBF0F3;
}
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.ipsLayout_smallleft.ipsLayout_withleft {
    padding-left: 150px;
}
.ipsLayout_smallleft.ipsLayout .ipsLayout_left {
    margin-left: -150px;
    width: 140px;
}
.ipsLayout .ipsLayout_left {
    float: left;
    margin-left: -210px;
    width: 200px;
}
.ipsLayout_content, .ipsLayout .ipsLayout_left, .ipsLayout_right {
    position: relative;
}
.photo_holder {
    position: relative;
}
.short {
    text-align: center;
}
#profile_photo {
    max-height: 138px;
    max-width: 138px;
}
.ipsUserPhoto {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D5D5D5;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    padding: 1px;
}
.warn_panel {
    margin: 8px 0;
    text-align: center;
}
.ipsType_small {
    font-size: 12px;
}
.ipsVerticalTabbed_tabs > ul {
    border-left: 1px solid #DBE4EF;
    border-top: 1px solid #DBE4EF;
    margin-top: 10px;
    width: 149px !important;
}
.ipsVerticalTabbed_tabs li {
    background: none repeat scroll 0 0 #F6F8FB;
    border-bottom: 1px solid #DBE4EF;
    color: #808080;
    font-size: 13px;
}
.ipsVerticalTabbed_tabs li.active a {
    background: none repeat scroll 0 0 #FFFFFF;
    border-right: 1px solid #FFFFFF;
    color: #353535;
    font-weight: bold;
    position: relative;
    width: 135px;
    z-index: 8000;
}
.ipsVerticalTabbed_tabs li a {
  color: #8D8D8D;
    display: block;
    outline: 0 none;
    padding: 10px 8px;
    transition: background-color 0.3s ease-in-out 0s;
}
.ipsVerticalTabbed_content {
  min-height: 400px;
}
.ipsLayout_content {
    float: left;
    width: 100%;
}
.ipsBox_container {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DBE4EF;
}
#profile_content_main {
    line-height: 1.3;
    margin-bottom: 20px;
    min-height: 75px;
}
#user_info_cell {
    display: table-cell;
    padding-right: 15px;
    white-space: nowrap;
}
.ipsType_pagetitle, .ipsType_subtitle {
    color: #323232;
    font: 300 26px/1.3 Helvetica,Arial,sans-serif;
}
.ipsType_pagetitle, .ipsType_subtitle {
    color: #323232;
    font: 300 26px/1.3 Helvetica,Arial,sans-serif;
}
.reset_cursor {
    cursor: default;
}
.ipsBadge {
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    display: inline-block;
    font-size: 9px;
    font-weight: bold;
    height: 15px;
    line-height: 15px;
    padding: 0 5px;
    text-transform: uppercase;
    vertical-align: middle;
}
.ipsBadge_lightgrey {
    background: none repeat scroll 0 0 #B3B3B3;
}
.ipsBadge_green {
    background: none repeat scroll 0 0 #7BA60D;
}
.desc.lighter, .desc.lighter.blend_links a {
    color: #A4A4A4;
}
.desc, .desc.blend_links a, p.posted_info {
  color: #777777;
    font-size: 12px;
}
#user_status_cell {
    display: table-cell;
    vertical-align: top;
    width: 100%;
}
#user_latest_status {
    background: url("http://www.autoitbrasil.com/public/style_images/master/stems/profile_status_stem.png") no-repeat scroll 0 50% transparent;
    padding-left: 11px;
}
#user_latest_status > div {
    background-color: #EBECE5;
    border-radius: 6px 6px 6px 6px;
    color: #343434;
    font-size: 14px;
    min-height: 45px;
    padding: 10px 15px;
    word-wrap: break-word;
}
#user_latest_status > div > span {
    display: block;
}
.ipsType_smaller, .ipsType_smaller a {
    font-size: 11px !important;
}
.rating {
    margin-top: 10px;
    display: block;
    line-height: 16px;
  margin-bottom: 4px;
}
.rating img {
    vertical-align: top;
}
.ipsLayout_content img {
    max-width: 100%;
}
fieldset, img {
    border: 0 none;
}
#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 {
    background: -moz-linear-gradient(center top , #F6F6F6 0%, #E5E5E5 100%) repeat scroll 0 0 transparent;
    border: 1px solid #DBDBDB;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 0 rgba(0, 0, 0, 0.3);
    color: #616161;
    display: inline-block;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    padding: 0 10px;
    transition: all 0.2s ease-in-out 0s;
    white-space: nowrap;
}
.ipsButton_secondary a {
    color: #616161;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
.ipsLayout_largeright.ipsLayout_withright {
    padding-right: 280px;
}
.ipsLayout.ipsLayout_withright {
    clear: left;
  padding-right: 280px;
}
.general_box {
    background: none repeat scroll 0 0 #FCFCFC;
    margin-bottom: 10px;
}
.general_box h3 {
    background: none repeat scroll 0 0 #DBE2EC;
    color: #204066;
    font: 14px helvetica,arial,sans-serif;
    padding: 8px 10px;
}
.ipsList_data li {
    line-height: 1.3;
    margin-bottom: 6px;
}
.ipsList_data .row_title, .ipsList_data .ft {
    display: inline-block;
    float: left;
    font-weight: bold;
    padding-right: 10px;
    text-align: right;
    width: 120px;
}
#profile_panes_wrap .ipsList_data .row_data {
    display: block;
    margin-left: 130px;
}
.ipsList_data .row_data {
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
}
.ipsLayout_largeright.ipsLayout .ipsLayout_right {
    margin-right: -280px;
    width: 270px;
}
.ipsLayout .ipsLayout_right {
    float: right;
    margin-right: -210px;
    width: 200px;
}
.reputation {
    border-radius: 3px 3px 3px 3px;
    display: inline-block;
    font-weight: bold;
    padding: 3px 8px;
}
.positive {
    color: #6F8F52;
}
#profile_panes_wrap .reputation {
    display: block;
    float: none;
    font-weight: normal;
    margin: 0 0 5px;
    padding: 10px;
    text-align: center;
}
#profile_panes_wrap .reputation .number {
    display: block;
    font-size: 20px;
    font-weight: bold;
}
.reputation.positive, .reputation.negative {
    color: #FFFFFF;
}
.reputation.positive, .members li.positive {
    background: none repeat scroll 0 0 #6F8F52;
}
.reputation.negative, .members li.negative {
    background: none repeat scroll 0 0 #B82929;
}
.reputation.zero {
    background: none repeat scroll 0 0 #DEDEDE;
    color: #6E6E6E;
}
.ipsUserPhoto_mini {
    height: 30px;
    width: 30px;
}
img, .input_check, .input_radio {
    vertical-align: middle;
}
.ipsList_withminiphoto > li {
    margin-bottom: 8px;
}
.left {
    float: left;
}
hr {
    display: none;
}
.short.photo_holder > img {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D5D5D5;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    padding: 1px;
    max-height: 138px;
    max-width: 138px;
}
.ipsList_data.clearfix .left-box.details > dt {
    display: inline-block;
    float: left;
    font-weight: 700;
    padding-right: 10px;
    text-align: right;
    width: 120px;
}
.ipsList_data.clearfix .left-box.details > dd {
    display: block;
    margin-left: 130px;
  /* display: inline-block; */
    max-width: 100%;
    word-wrap: break-word;
}
.clear2.clearfix .contact_field > dt {
    display: inline-block;
    float: left;
    font-weight: 700;
    padding-right: 10px;
    text-align: right;
    width: 120px;
}
.clear2.clearfix .contact_field > dd {
    display: block;
    margin-bottom: 6px;
    margin-left: 130px;
  /* display: inline-block; */
    max-width: 100%;
    word-wrap: break-word;
}
.contact_field img {
    margin-bottom: 6px;
    margin-top: 6px;
}
/* #endregion ----- profile_background ----- */

4º - Resultado
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]