Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

[TUTORIAL] Aplicando foto de capa em tópicos

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Tópicos e Mensagens

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

Principal Contribuidor

[TUTORIAL] Aplicando foto de capa em tópicos Empty [TUTORIAL] Aplicando foto de capa em tópicos

Mensagem por Shek 14.12.14 13:19


[TUTORIAL] Aplicando foto de capa em tópicos Logo10
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)




[TUTORIAL] Aplicando foto de capa em tópicos Step-210 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.



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

(carregue na imagem para aumentar)
[TUTORIAL] Aplicando foto de capa em tópicos Templa10


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:

[TUTORIAL] Aplicando foto de capa em tópicos Php31210 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.


[TUTORIAL] Aplicando foto de capa em tópicos Php21110 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://2img.net/i/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.


[TUTORIAL] Aplicando foto de capa em tópicos Pun1210 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.


[TUTORIAL] Aplicando foto de capa em tópicos Inv1010 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 */


2º - 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 >>
[TUTORIAL] Aplicando foto de capa em tópicos Painel13
[TUTORIAL] Aplicando foto de capa em tópicos 110111 Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Aplicando foto de capa em tópicos 110210 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.
[TUTORIAL] Aplicando foto de capa em tópicos 110310 Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Aplicando foto de capa em tópicos 110410 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%;');
            });

        });
    });

3º - 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 > [TUTORIAL] Aplicando foto de capa em tópicos Ajouter > e no nome Tipo, determine o valor como Campo de texto, disponibilizando tal campo somente no Perfil. Feito isso, salve.


[TUTORIAL] Aplicando foto de capa em tópicos Step-210 Caso tenha dúvidas referente a criação de um campo no perfil dos usuários, aconselhamos que leia atentamente o seguinte FAQ: https://ajuda.forumeiros.com/t17049-criacao-e-gestao-dos-perfis

[TUTORIAL] Aplicando foto de capa em tópicos Untitl16


Em seguida, acesse o perfil do seu usuário. Por exemplo: https://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":


[TUTORIAL] Aplicando foto de capa em tópicos 1step10

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


[TUTORIAL] Aplicando foto de capa em tópicos Act_bottom 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

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Tópicos e Mensagens

Permissões neste sub-fórum
Não podes responder a tópicos