Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Pesquisa de Satisfação
Queremos saber a sua opinião sobre os nossos serviços. Clique nesta vinheta e preencha este inquérito.

Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Quem está conectado
98 usuários online :: 4 usuários cadastrados, 1 Invisível e 93 Visitantes :: 1 Motor de busca

Angel', Kyo Panda, Vinicius Reis, YuriGama

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

[TUTORIAL] Aplicando foto de capa em tópicos

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

[TUTORIAL] Aplicando foto de capa em tópicos

Mensagem por Shek Crowley em Dom 14 Dez 2014 - 13:19



Edição de templates


Com edição de templates e um pouco de criatividade você poderá obter um efeito exclusivo em fóruns de Forumeiros, a foto de capa no fórum tipo blog. Como já disponibilizamos a mesma para a opção direto no perfil, este novo recurso visa utilizar o mesmo padrão só que, para tópicos do fórum tipo BLOG.


-->Tutoriais, dicas e astúcias <--
Aplicando foto de capa em tópicos (mod_postprofile)




Para que este efeito seja possível, é necessário que tenha um subfórum do tipo "BLOG" ativado. Além deste recurso, será necessário que tenha conhecimento nos seguintes FAQs e Tutoriais:
  1. Gerir função Blog;
  2. Criação e gestão dos perfis;
  3. Modificação dos templates;
  4. Estrutura duma página HTML;
  5. Elaborar um código CSS.



- Acedendo a edição de templates:
Deveremos aceder a;
Painel de controle -> Visualização -> Templates / Geral ->> viewcomments_body

(carregue na imagem para aumentar)


Em seguida, use o código de acordo com sua versão! Alguns trechos do código foram modificados de acordo com a versão, sendo assim, os códigos se parecerem iguais, contudo, não são. Localize, exclua e adicione os códigos abaixo:

phpBB3
Procurar e excluir:
Código:
        <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
                <dl>
                  <dt>
                      {postrow.displayed.POSTER_AVATAR}
                      <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
                  </dt>
                  <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
                  <dd><br /></dd>
                  <dd>
                      <!-- 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><br /></dd>
                  <dd>
                      {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>

Procurar por:
Código:
<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}">
Em seguida adicione acima do mesmo, o novo código:
Código:
<div id="postprofile_mod_shek" class="post--{postrow.displayed.U_POST_ID} {postrow.displayed.ROW_COUNT} {postrow.displayed.THANK_BGCOLOR}">
    <table colspan="2" class="postprofile_mod_fa" id="profile{postrow.displayed.U_POST_ID}" width="100%">
    <tr>
          <td class="information_member_post {postrow.displayed.ROW_COUNT} {postrow.displayed.ONLINE_IMG_NEW}">
          <!-- div class="online2"></div-->
              {postrow.displayed.POSTER_AVATAR}
                <dt><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong><br />
      {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                </dt>
        </td>
   
        <td class="details_member_profile">
          <div class="profile_cust">     
    <dd>
                    <!-- 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><br>
                <dd>
                  {postrow.displayed.PROFILE_IMG}
                    {postrow.displayed.PM_IMG}
                    {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field -->
                    {postrow.displayed.contact_field.CONTENT}
                    <!-- END contact_field -->
                </dd>
    </div>
        </td>
    </tr>
    </table>
    </div>

CSS a ser adicionado:
Código:
/* MOD_POST_PROFILE SHEK - FÓRUM DOS FÓRUNS */
    .postprofile_mod_fa {
      / * CAPA NORMAL PARA VISITANTES */
    background: url(http://i.imgur.com/b7HbFqI.png) no-repeat center center scroll; 
    }

    #postprofile_mod_shek {
    border-radius: 5px;
    padding: 5px;
    }

    .information_member p, .fields_profile_member p {
    font-weight: bold;
    font-size: 15px;
    color: #0068C9;
    }

    #postprofile_mod_shek a img {
    max-height: 75%;
    max-width: 75%;
    }

    .postprofile_mod_height {
    height: 5px;
    }

    /* information_member modificação */
    td.information_member_post {
    -moz-border-radius: 10px;
    -moz-box-shadow: 1px 1px 6px #FFF;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 1px 1px 6px #FFF;
    border: medium none!important;
    border-radius: 10px;
    box-shadow: 1px 1px 6px #FFF;
    padding: 5px;
    width: 5%;
    }

    td.information_member_post .row1 {
    background-color: #D9E9F1;
    }

    td.information_member_post .row2 {
    background-color: #DCEAF5;
    }

    .details_member_profile {
    padding: 5px;
    width: 35%;
    }

    .postbody {
    width: 100% !important;
    }

    table.postprofile_mod_fa div.profile_cust {
    transition: all .1s ease-in-out;
    background-color: transparent;
    opacity: 0.2;
    padding: 5px;
    border-radius: 5px;
    width: 20%;
    margin-top: 14%;
    }

    table.postprofile_mod_fa div.profile_cust:hover {
    transition: all .1s ease-in-out;
    opacity: 100;
    background-color: #FFF;
    padding: 5px;
    border-radius: 5px;
    width: 20%;
    margin-top: 14%;
    }
    /* MOD_POST_PROFILE SHEK - FÓRUM DOS FÓRUNS */
/!\ : Veja no final do tutorial como realizar a aplicação do CSS.


phpBB2
Procurar e excluir:
Código:
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
            <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                <span class="postdetails poster-profile">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                <!-- 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}
            </span><br />
            <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
          </td>
Procurar e excluir:
Código:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td valign="middle">
                      {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
                  </td>
                </tr>
            </table>
          </td>

Procurar por:
Código:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
Em seguida adicione abaixo do mesmo, o novo código::
Código:
  <div id="postprofile_mod_shek" class="postbody {postrow.displayed.THANK_BGCOLOR}">
      <table colspan="2" class="postprofile_mod_fa" id="profile{postrow.displayed.U_POST_ID}" width="100%">
      <tr>
            <td class="information_member_post">
                <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}
          </td>
     
          <td class="details_member_profile online">
            <div class="profile_cust">     
                <dd>
                <!-- 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>
          </div>
          </td>
      </tr>
    </table>
      </div>

CSS a ser adicionado:
Código:
/* MOD_POST_PROFILE SHEK PunBB - FÓRUM DOS FÓRUNS */
    .postprofile_mod_fa {
      / * CAPA NORMAL PARA VISITANTES */
    background: url(http://i.imgur.com/b7HbFqI.png) no-repeat center center scroll; 
    }

    #postprofile_mod_shek {
    border-radius: 5px;
    padding: 5px;
    }

    .information_member p, .fields_profile_member p {
    font-weight: bold;
    font-size: 15px;
    color: #0068C9;
    }

    #postprofile_mod_shek a img {
    max-height: 75%;
    max-width: 75%;
    }

    .postprofile_mod_height {
    height: 5px;
    }

    /* information_member modificação */
    td.information_member_post {
    height: 150px !important;
    -moz-border-radius: 10px;
    -moz-box-shadow: 1px 1px 6px #FFF;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 1px 1px 6px #FFF;
    background-color: #fbfbfb;
    border: 2px solid #D3D3D3 !important;
    border-radius: 10px;
    box-shadow: 1px 1px 6px #FFF;
    padding: 5px;
    width: 6%;
    background-color: #dceaf5;
    }

    td.information_member_post .row1 {
    background-color: #D9E9F1;
    }

    td.information_member_post .row2 {
    background-color: #DCEAF5;
    }

    .details_member_profile {
    padding: 5px;
    width: 35%;
    }

    table.postprofile_mod_fa div.profile_cust {
    transition: all .1s ease-in-out;
    background-color: transparent;
    opacity: 0.2;
    padding: 5px;
    border-radius: 5px;
    width: 50%;
    }

    table.postprofile_mod_fa div.profile_cust:hover {
    transition: all .1s ease-in-out;
    opacity: 100;
    background-color: #FFF;
    padding: 5px;
    border-radius: 5px;
    width: 50%;
    }
    /* MOD_POST_PROFILE SHEK - FÓRUM DOS FÓRUNS */
/!\ : Veja no final do tutorial como realizar a aplicação do CSS.


punBB
Procurar e excluir:
Código:
                  <div class="user online" style="margin-left:-300px;">
                        <div class="user-ident">
                            <h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
                            <div class="user-basic-info">
                              {postrow.displayed.POSTER_AVATAR}<br />
                              {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                            </div>
                        </div>
                        <div class="user-info">
                            {postrow.displayed.ONLINE_IMG}
                            <!-- 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}
                        </div>
                      </div>

Procurar por:
Código:
            <p class="p-hidden">{postrow.hidden.MESSAGE}</p>
            <!-- END hidden -->
            <!-- BEGIN displayed -->
Em seguida adicione abaixo do mesmo, o novo código:
Código:
  <div id="postprofile_mod_shek" class="postbody {postrow.displayed.THANK_BGCOLOR}">
      <table colspan="2" class="postprofile_mod_fa" id="profile{postrow.displayed.U_POST_ID}" width="100%">
      <tr>
            <td class="information_member_post">
            {postrow.displayed.ONLINE_IMG}
                {postrow.displayed.POSTER_AVATAR}
                  <dt><h4 class="username">{postrow.displayed.POSTER_NAME}</h4><br />
                              {postrow.displayed.POSTER_AVATAR}<br />
                              {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                  </dt>
          </td>
     
          <td class="details_member_profile online">
            <div class="profile_cust">     
                <dd>
                {postrow.displayed.ONLINE_IMG}
                <!-- 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><br>
                  <dd>
                {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
                  </dd>
          </div>
          </td>
      </tr>
    </table>
      </div>

CSS a ser adicionado:
Código:
/* MOD_POST_PROFILE SHEK - FÓRUM DOS FÓRUNS */
    .postprofile_mod_fa {
      / * CAPA NORMAL PARA VISITANTES */
    background: url(http://i.imgur.com/b7HbFqI.png) no-repeat center center scroll; 
    }

    #postprofile_mod_shek {
    border-radius: 5px;
    padding: 5px;
    }

    .information_member p, .fields_profile_member p {
    font-weight: bold;
    font-size: 15px;
    color: #0068C9;
    }

    #postprofile_mod_shek a img {
    max-height: 75%;
    max-width: 75%;
    }

    .postprofile_mod_height {
    height: 5px;
    }

    /* information_member modificação */
    td.information_member_post {
    -moz-border-radius: 10px;
    -moz-box-shadow: 1px 1px 6px #FFF;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 1px 1px 6px #FFF;
    border: medium none!important;
    border-radius: 10px;
    box-shadow: 1px 1px 6px #FFF;
    padding: 5px;
    width: 5%;
    background-color: #EFF2F5;
    }

    td.information_member_post .row1 {
    background-color: #D9E9F1;
    }

    td.information_member_post .row2 {
    background-color: #DCEAF5;
    }

    .details_member_profile {
    padding: 5px;
    width: 35%;
    }

    .pun .postmain {
    margin-left: 0px !important;
    }

    table.postprofile_mod_fa div.profile_cust {
    transition: all .1s ease-in-out;
    background-color: transparent;
    opacity: 0.2;
    padding: 5px;
    border-radius: 5px;
    width: 20%;
    margin-top: 14%;
    }

    table.postprofile_mod_fa div.profile_cust:hover {
    transition: all .1s ease-in-out;
    opacity: 100;
    background-color: #FFF;
    padding: 5px;
    border-radius: 5px;
    width: 20%;
    margin-top: 14%;
    }
    /* MOD_POST_PROFILE SHEK - FÓRUM DOS FÓRUNS */
/!\ : Veja no final do tutorial como realizar a aplicação do CSS.


Invision
Procurar e excluir:
Código:
            <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">

                  <div class="postprofile-head post-header"{postrow.displayed.THANK_BGCOLOR}>
                      <div class="popmenubutton-new-out popmenubutton">
                        <a href="javascript:void(0);"{postrow.displayed.ONCLICK}>{postrow.displayed.ONLINE_IMG_INV}{postrow.displayed.POSTER_NAME_INV}</a>
                      </div>
                      <!-- BEGIN user_logged_in -->
                      <div id="pm{postrow.displayed.U_POST_ID}" class="popupmenu clearfix" style="display:none;">
                        <div class="avatar">
                            {postrow.displayed.POSTER_AVATAR}
                        </div>
                        <ul>
                            <li class="popupmenu-item">{postrow.displayed.PROFILE_IMG}&nbsp;</li>
                            <!-- BEGIN switch_user_pm -->
                            <li class="popupmenu-item">{postrow.displayed.PM_IMG}&nbsp;</li>
                            <!-- END switch_user_pm -->
                            <!-- BEGIN switch_user_email -->
                            <li class="popupmenu-item">{postrow.displayed.EMAIL_IMG}&nbsp;</li>
                            <!-- END switch_user_email -->
                            <!-- BEGIN switch_contact_row -->
                            <li class="popupmenu-item">
                              <!-- BEGIN contact_field -->
                              {postrow.displayed.user_logged_in.switch_contact_row.contact_field.CONTENT}&nbsp;
                              <!-- END contact_field -->&nbsp;
                            </li>
                            <!-- END switch_contact_row -->
                            <!-- BEGIN switch_user_posts -->
                            <li class="popupmenu-item last">{postrow.displayed.USER_POSTS_IMG}&nbsp;</li>
                            <!-- END switch_user_posts -->
                        </ul>
                      </div>
                      <!-- END user_logged_in -->
                  </div>



                  <dl class="postprofile-details postdetails">
                      <dt>
                        {postrow.displayed.POSTER_AVATAR}<br />
                        {postrow.displayed.POSTER_NAME}
                      </dt>
                      <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
                      <dd><br /></dd>
                      <dd>
                        <!-- 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>
                  </dl>
                </div>

Procurar por:
Código:
<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}">
Em seguida adicione acima do mesmo, o novo código:
Código:
<div id="postprofile_mod_shek" class="post--{postrow.displayed.U_POST_ID} {postrow.displayed.THANK_BGCOLOR}">
    <table colspan="2" class="postprofile_mod_fa" id="profile{postrow.displayed.U_POST_ID}" width="100%">
    <tr>
          <td class="information_member_post">
                {postrow.displayed.POSTER_AVATAR}
                <dt><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong><br />
      {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                </dt>
        </td>
   
        <td class="details_member_profile">
          <div class="profile_cust">     
        <dd>      <div class="profile_popup">
                      <div class="popmenubutton-new-out popmenubutton">
                        <a href="javascript:void(0);"{postrow.displayed.ONCLICK}>{postrow.displayed.ONLINE_IMG_INV}{postrow.displayed.POSTER_NAME_INV}</a>
                      </div>
                      <!-- BEGIN user_logged_in -->
                      <div id="pm{postrow.displayed.U_POST_ID}" class="popupmenu clearfix" style="display:none;">
                        <div class="avatar">
                            {postrow.displayed.POSTER_AVATAR}
                        </div>
                        <ul>
                            <li class="popupmenu-item">{postrow.displayed.PROFILE_IMG}&nbsp;</li>
                            <!-- BEGIN switch_user_pm -->
                            <li class="popupmenu-item">{postrow.displayed.PM_IMG}&nbsp;</li>
                            <!-- END switch_user_pm -->
                            <!-- BEGIN switch_user_email -->
                            <li class="popupmenu-item">{postrow.displayed.EMAIL_IMG}&nbsp;</li>
                            <!-- END switch_user_email -->
                            <!-- BEGIN switch_contact_row -->
                            <li class="popupmenu-item">
                              <!-- BEGIN contact_field -->
                              {postrow.displayed.user_logged_in.switch_contact_row.contact_field.CONTENT}&nbsp;
                              <!-- END contact_field -->&nbsp;
                            </li>
                            <!-- END switch_contact_row -->
                            <!-- BEGIN switch_user_posts -->
                            <li class="popupmenu-item last">{postrow.displayed.USER_POSTS_IMG}&nbsp;</li>
                            <!-- END switch_user_posts -->
                        </ul>
                      </div>
                      <!-- END user_logged_in -->
                      </div></dd>
    <dd>                    <!-- 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><br>
    </div>
        </td>
    </tr>
    </table>
    </div>

CSS a ser adicionado:
Código:
/* MOD_POST_PROFILE SHEK - FÓRUM DOS FÓRUNS */
    .postprofile_mod_fa {
      / * CAPA NORMAL PARA VISITANTES */
    background: url(http://i.imgur.com/b7HbFqI.png) no-repeat center center scroll; 
    }

    #postprofile_mod_shek {
    border-radius: 5px;
    padding: 5px;
    }

    .information_member p, .fields_profile_member p {
    font-weight: bold;
    font-size: 15px;
    color: #0068C9;
    }

    #postprofile_mod_shek a img {
    max-height: 75%;
    max-width: 75%;
    }

    .postprofile_mod_height {
    height: 5px;
    }

    /* information_member modificação */
    td.information_member_post {
    -moz-border-radius: 10px;
    -moz-box-shadow: 1px 1px 6px #FFF;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 1px 1px 6px #FFF;
    border: medium none!important;
    border-radius: 10px;
    box-shadow: 1px 1px 6px #FFF;
    padding: 5px;
    width: 5%;
    background-color: #EFF2F5;
    }

    td.information_member_post .row1 {
    background-color: #D9E9F1;
    }

    td.information_member_post .row2 {
    background-color: #DCEAF5;
    }

    .details_member_profile {
    padding: 5px;
    width: 35%;
    }

    .pun .postmain {
    margin-left: 0px !important;
    }

    table.postprofile_mod_fa div.profile_cust {
    transition: all .1s ease-in-out;
    background-color: transparent;
    opacity: 0.2;
    padding: 5px;
    border-radius: 5px;
    width: 20%;
    margin-top: 14%;
    }

    table.postprofile_mod_fa div.profile_cust:hover {
    transition: all .1s ease-in-out;
    opacity: 100;
    background-color: #FFF;
    padding: 5px;
    border-radius: 5px;
    width: 20%;
    margin-top: 14%;
    }
    /* MOD_POST_PROFILE SHEK - FÓRUM DOS FÓRUNS */


- Aplicação do código Javascript:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Nos tópicos.
Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
Seta Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

Códigos a serem usados:

PHPBB3, INVISION & PHPBB2

Código a ser usado:
Código:
jQuery(function () {
        jQuery('.postprofile_mod_fa').each(function () {
            jQuery(this).before('<!-- MOD_PROFILE_SHEK - AJUDA.FORUMEIROS.COM - Favor, não remover os créditos do código!!! Criado por Hancki -->');
            jQuery('<div id="shekFundo" style="display:none;"></div>').appendTo(this);

            var userLink = jQuery(this).find('td.information_member_post strong a:eq(0)').attr('href');

            jQuery('#shekFundo').load(userLink + ' #field_id2 .field_uneditable', function () {
                var imgShek = jQuery(this).text();
                jQuery(this).parent('.postprofile_mod_fa').attr('style', 'background: url(' + imgShek + ') no-repeat center center scroll !important;-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;width:100%;');
            });

        });
    });

punBB

Código a ser usado:
Código:
jQuery(function () {
        jQuery('.postprofile_mod_fa').each(function () {
            jQuery(this).before('<!-- MOD_PROFILE_SHEK - AJUDA.FORUMEIROS.COM - Favor, não remover os créditos do código!!! Criado por Hancki -->');
            jQuery('<div id="shekFundo" style="display:none;"></div>').appendTo(this);

            var userLink = jQuery(this).find('td.information_member_post h4 a:eq(0)').attr('href');

            jQuery('#shekFundo').load(userLink + ' #field_id2 .field_uneditable', function () {
                var imgShek = jQuery(this).text();
                jQuery(this).parent('.postprofile_mod_fa').attr('style', 'background: url(' + imgShek + ') no-repeat center center scroll !important;-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;width:100%;');
            });

        });
    });

- Perfil personalizado:
Para usuários que não tem a função Perfil com foto de capa como no facebook, queiram usar o recurso abaixo
Agora, acesse Painel de Controle > Usuários e Grupos > Usuários > Perfis > > e no nome Tipo, determine o valor como Campo de texto, disponibilizando tal campo somente no Perfil. Feito isso, salve.


Caso tenha dúvidas referente a criação de um campo no perfil dos usuários, aconselhamos que leia atentamente o seguinte FAQ: http://ajuda.forumeiros.com/t17049-criacao-e-gestao-dos-perfis



Em seguida, acesse o perfil do seu usuário. Por exemplo: http://ajuda.forumeiros.com/u1 Em seguida, clique no botão direito do mouse por cima da caixa de texto correspondente ao seu campo de perfil que vai abrigar a URL da foto de capa, na opção "Inspecionar elemento":



Na imagem ilustrativa acima, o campo correspondente onde vamos colocar a URL da imagem é o #field_id2. Acesse novamente o seu script, e nele localize por:
Código:
 jQuery('#shekFundo').load(userLink + ' #field_id2 .field_uneditable', function () {
Troque o valor:
Código:
#field_id2
Pelo valor do 'FIELD' que obteve quando inspecionou o elemento. Feito isso, salve seu código com o novo valor do Field.


  • Meu template não é padrão de Forumeiros (templates ipaboard, sources e etc) e o código não funcionou. O que fazer?
    Você deve recuperar seu template e adaptá-lo como é instruído no tutorial. Nós disponibilizamos o efeito para os fóruns que não estão compostos por templates avançados que não são disponibilizados por Hitskin.

  • Existe um meio de usar somente Javascript?
    O recurso está disponível apenas com edição de templates para evitar lentidões ou problemas de conexão. Não existe no atual momento um código Javascript específico para reproduzir este efeito.

  • Por que só posso aplicar para os fóruns tipo "BLOGS"?
    A aplicação do código nos tópicos normais de um fórum, resultam assim como a dos blogs, contudo, se aplicado a capa não é mostrada de acordo com as novas mensagens dos membros. Com a função blog, além da função em si receber um certo destaque, poderá usá-la para promover concursos em seu fórum da melhor capa em tópicos no estilo BLOG.

    Há vídeo explicativo no canal TV Forumeiros?
    Sim, disponibilizamos o tutorial em vídeo para a aplicação:


    Assista em 720p para obter melhor resolução.
    Link do vídeo: https://www.youtube.com/watch?v=6MIGBrBXhuY&feature=youtu.be





© Fórum dos Fóruns & Hancki


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Aplicando foto de capa em tópicos

Shek Crowley
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 15104
Pontos Ativos : 22304

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

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
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5