Como criar um botão "Ir ao topo" no template?

2 participantes

Ir para baixo

Tópico resolvido Como criar um botão "Ir ao topo" no template?

Mensagem por Rafusqui_ 11.11.15 14:15

Detalhes da questão


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

Descrição


Olá @shrek e @fraise pode me ajudar nessa questão? concerteza será resolvida de primeira,não é algo tão dificil eu acho,mas para mim é...

gostaria que personalizasse meu overall_footer_end, com o icone "topo" dessa forma:

Como criar um botão "Ir ao topo" no template? UpHCA8b

aqui está meu overall_footer_end
Código:
<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
 <div>
 <div>
 <div>
 <div>
 <div>
 <ul>
 <li>
<!-- END html_validation -->
 </li>
 </ul>
 <!-- BEGIN switch_footer_links -->
 <ul>
 <li>
 <!-- BEGIN footer_link -->
 <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
 {switch_footer_links.footer_link.FOOTER_LINK_SEPARATOR}<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
 <!-- END footer_link -->
 </li>
 </ul>
 <!-- END switch_footer_links -->
 </div>
 <br />
 <p class="center">
 <strong>{ADMIN_LINK}</strong>
 </p>
 </div>
 {PROTECT_FOOTER}
 </div>
 </div>
 </div>
</div>

<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
 appId: '{switch_facebook_login.FACEBOOK_APP_ID}',
 status: true,
 cookie: true,
 xfbml: true,
 oauth: true
});
//]]>
</script>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
 if ($('a#logout'))
 {
 var lien_redir = $('a#logout').attr('href');

 if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
 {
 document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
 }
 }
});

$(document).ready( function() {
 $('a#logout').click( function() {
 FB.logout();
 } );
} );
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<script type="text/javascript">
//<![CDATA[
 fa_endpage();
//]]>
</script>

</body>

  <footer>
     <div class="FP_center">
         <div class="FP_colum" id="pp_copyright">
             <h2>editavel</h2>
   <li><a href="/f8-criacao-grafica" target="_blanck">editavel</a></li>
   <li><a href="/f9-skins" target="_blanck">editavel</a></li>
                <li><a href="/f10-dicas-e-tutoriais" target="_blanck">editavel</a></li>
                  <li><a href="/c2-suporte-a-forumeiros" target="_blanck">editavel</a></li>
            </div>
            <div class="FP_colum">
             <h2>editavel</h2>
                <li><a href="/u1">editavel</a></li>
              <li><a href="/">editavel</a></li>
                <li><a href="/">editavel</a></li>
                <li><a href="/">editavel</a></li>
            </div>
            <div class="FP_colum">
             <h2>Forumeiros</h2>
                <li><a href="http://www.forumeiros.com/criar-forum/phpbb3">Criar um Fórum</a></li>
                <li><a href="http://www.forumeiros.com/beneficios-do-forum">Beneficios de um Forum</a></li>
 <li><a href="http://www.forumeiros.com/condicoes-gerais">Condições Gerais</a></li>
              <li><a href="http://www.forumeiros.com/ferramentas">Ferramenta do Fundador</a></li>
            </div>
        </div>
    </footer>
</html>
<style>
/********************FOOTER*******************/

footer {
background: #1A1E25;
border-bottom: 1px solid #363A43;
border-top: 7px solid #0066CC;
font-size: 13px;
overflow: hidden;
padding-bottom: 20px;
color: #62747B;
}

footer a:link, footer a:visited {
color: #62747B;
text-decoration: none;
}

footer a:hover {
color: #0066CC;
text-decoration: none;
}

footer .FP_center {
width: 1000px;
margin: auto;
}

footer .FP_colum {
width: 291px;
float: left;
height: 150px;
padding: 10px 20px;
border-right: 1px dashed rgba(0, 0, 0, 0.22);
border-left: 1px dashed rgba(255, 255, 255, 0.09);
}

footer .FP_colum:first-child {
border-left: 0;
}

footer .FP_colum:last-child {
border-right: 0;
}

footer .FP_colum h2 {
color: #0066CC;
}

footer .FP_colum li {
display: block;
padding: 7px 0;
border-top: 1px dashed rgba(0, 0, 0, 0.17);
border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

footer .FP_colum li:first-child {
border-top: 0;
}

footer .FP_colum li:last-child {
border-bottom: 0;
}

footer .FP_colum li:hover {
padding: 7px 7px;
}

.FP_colum li:before {
content: '';
height: 0;
width: 0;
float: left;
border: solid 7px transparent;
border-left-color: #0066CC;
}
</style>    


Última edição por Rafusqui_ em 11.11.15 16:04, editado 1 vez(es)
Rafusqui_
Rafusqui_
****

Membro desde : 20/05/2015
Mensagens : 386
Pontos : 602

https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=12& https://www.facebook.com/www.facebook.com/ https://twitter.com/teste

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar um botão "Ir ao topo" no template?

Mensagem por Shek 11.11.15 15:12

Olá e boa tarde!

Lamento, mas, o suporte ao seu tópico correspondente ao fórum serão limitados, por não estar dentro dos termos e condições de Forumeiros. Você poderá entender mais acessando este link: https://ajuda.forumeiros.com/t14313-por-que-o-suporte-ao-meu-topico-foi-limitado

Para sua dúvida, modifique seu template para:
Código:
<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
  <div>
      <div>
        <div>
            <div>
              <div>
                  <ul>
                    <li>
<!-- END html_validation -->
                    </li>
                  </ul>
                  <!-- BEGIN switch_footer_links -->
                  <ul>
                    <li>
                        <!-- BEGIN footer_link -->
                          <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
                          {switch_footer_links.footer_link.FOOTER_LINK_SEPARATOR}<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
                        <!-- END footer_link -->
                    </li>
                  </ul>
                  <!-- END switch_footer_links -->
              </div>
              <br />
              <p class="center">
                  <strong>{ADMIN_LINK}</strong>
              </p>
            </div>
            {PROTECT_FOOTER}
        </div>
      </div>
  </div>
</div>

<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
  appId: '{switch_facebook_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
  oauth: true
});
//]]>
</script>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
  if ($('a#logout'))
  {
      var lien_redir = $('a#logout').attr('href');

      if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
      {
        document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
      }
  }
});

$(document).ready( function() {
  $('a#logout').click( function() {
      FB.logout();
  } );
} );
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<script type="text/javascript">
//<![CDATA[
  fa_endpage();
//]]>
</script>

</body>
<div id="TOP"><a href="#top" title="Ir ao topo"><img src="http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png" alt="Ir ao topo" style="position: relative;top: 7px;right: -50%;"></a></div>
  <footer>
      <div class="FP_center">
          <div class="FP_colum" id="pp_copyright">
              <h2>editavel</h2>
    <li><a href="/f8-criacao-grafica" target="_blanck">editavel</a></li>
    <li><a href="/f9-skins" target="_blanck">editavel</a></li>
                <li><a href="/f10-dicas-e-tutoriais" target="_blanck">editavel</a></li>
                  <li><a href="/c2-suporte-a-forumeiros" target="_blanck">editavel</a></li>
            </div>
            <div class="FP_colum">
              <h2>editavel</h2>
                <li><a href="/u1">editavel</a></li>
              <li><a href="/">editavel</a></li>
                <li><a href="/">editavel</a></li>
                <li><a href="/">editavel</a></li>
            </div>
            <div class="FP_colum">
              <h2>editavel</h2>
                <li><a href="/u1">editavel</a></li>
              <li><a href="/">editavel</a></li>
                <li><a href="/">editavel</a></li>
                <li><a href="/">editavel</a></li>
            </div>
        </div>
    </footer>
</html>
<style>
/********************FOOTER*******************/

footer {
background: #1A1E25;
border-bottom: 1px solid #363A43;
border-top: 7px solid #0066CC;
font-size: 13px;
overflow: hidden;
padding-bottom: 20px;
color: #62747B;
}

footer a:link, footer a:visited {
color: #62747B;
text-decoration: none;
}

footer a:hover {
color: #0066CC;
text-decoration: none;
}

footer .FP_center {
width: 1000px;
margin: auto; 
}

footer .FP_colum {
width: 291px;
float: left;
height: 150px;
padding: 10px 20px;
border-right: 1px dashed rgba(0, 0, 0, 0.22);
border-left: 1px dashed rgba(255, 255, 255, 0.09);
}

footer .FP_colum:first-child {
border-left: 0; 
}

footer .FP_colum:last-child {
border-right: 0; 
}

footer .FP_colum h2 {
color: #0066CC;
}

footer .FP_colum li {
display: block;
padding: 7px 0;
border-top: 1px dashed rgba(0, 0, 0, 0.17);
border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

footer .FP_colum li:first-child {
border-top: 0; 
}

footer .FP_colum li:last-child {
border-bottom: 0; 
}

footer .FP_colum li:hover {
padding: 7px 7px; 
}

.FP_colum li:before {
content: '';
height: 0;
width: 0;
float: left;
border: solid 7px transparent;
border-left-color: #0066CC; 
}
</style> 
Obrigado por legalizar seu fórum perante às Condições: http://forumeiros.com/pt/criar-forum/condicoes-gerais.htm

Atenciosamente,
Shek King
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

Tópico resolvido Re: Como criar um botão "Ir ao topo" no template?

Mensagem por Rafusqui_ 11.11.15 15:33

Obrigado, resolvido.
Rafusqui_
Rafusqui_
****

Membro desde : 20/05/2015
Mensagens : 386
Pontos : 602

https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=12& https://www.facebook.com/www.facebook.com/ https://twitter.com/teste

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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