[Tutorial] Rodapé elegante

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

avatar
Admin
Administrador
Tempo Online : 12d 56m 43s
Mensagens : 693
Reputação : 3
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Seg Out 03, 2016 8:26 pm

Informações:
Autor
: While
Funcionalidade: PunBB




Acesse:
Painel de Controle Visualização Templates Geral
E troque o seu overall_footer_end por este:

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;<!-- 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>
<div id="footer"><script type="text/javascript">$(function() {$('#back-top').click(function() {$('body,html').animate({scrollTop:0},800);});  });</script><div id="back-top"><a href="#"><img src="http://i36.servimg.com/u/f36/11/96/49/61/backto10.png"></a></div><div id="f-content"><ul id="social"><h1> <img src="http://i36.servimg.com/u/f36/11/96/49/61/users_10.png"> Encontre-nos em: </h1><li><a href="#" target="_blank"> <img src="http://i36.servimg.com/u/f36/11/96/49/61/facebo10.png" alt="Facebook">Curta nosso grupo do Facebook </a></li><li><a href="#" target="_blank"> <img src="http://i36.servimg.com/u/f36/11/96/49/61/twitte10.png" alt="Twitter">Siga-nos no Twitter </a></li></ul><div id="connect"><div id="user-panel"><h1> <img src="http://i36.servimg.com/u/f36/11/96/49/61/commen10.png"> Painel do usuario </h1><script>jQuery(document).ready(function(){jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {link = jQuery('.frm-set dl:first img', data).attr('src');jQuery('#avatar').attr('src', link);});});</script><a href="/profile?mode=editprofile&page_profil=informations" target="_blank"> Meu Perfil </a><br><a href="/search?search_id=watchsearch" target="_blank"> Tópico(s) sendo observado </a><br><a href="/search?search_id=egosearch" target="_blank">  Tópicos respondidos </a><br><a href="/search?search_id=newposts" target="_blank"> Novos tópicos <br> <small>(<span class="USERLASTVISIT"> </span>)</small> </a> </div></div><ul id="site-links"><h1> <img src="http://i36.servimg.com/u/f36/11/96/49/61/link10.png"> Fórum Links </h1><li><a href="/f1-avisos-e-regularmento"> Regras </a></li><li><a href="/c2-suporte-a-forumeiros"> Suporte á Forumeiros </a></li><li><a href="/f9-skins"> Skins </a></li><li><a href="/f8-criacao-grafica"> Criação Grafica </a></li><li><a href="/f10-dicas-e-tutoriais"> Dicas e Tutoriais </a></li><li><a href="/contact"> Contato </a></li></ul></div><div id="other"><h1> <img src="http://cdn4.iconfinder.com/data/icons/eleganticons/images/Questions.png"> Creditos</h1>Copyright - 2015 © Todos os direitos reservados!</div>  </div>
<a href="#"><img src="http://i36.servimg.com/u/f36/11/96/49/61/backto10.png"></a>
  <!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    FB.init({
      appId      : {switch_facebook_login.FACEBOOK_APP_ID},
      cookie     : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</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>
</html>

Após feito isto salve e publique (podes editar os textos no proprio template)

Acesse
Painel de controle Visualização Imagens e Cores Cores Folha de estilo
Adicione esse código CSS em sua folha de estilo:

Código:
#footer{
      width: 100%;
      min-width: 900px;
      color: white;
      height: 280px;
      background: #0c0d0d url(http://i36.servimg.com/u/f36/11/96/49/61/footer15.png) repeat-x;}

    #footer ul{list-style-type: none;}

    #footer a{color: white;}

    #footer h1{
      font-weight: normal;
      margin-bottom: 20px;
      font-family: 'Lobster';
      font-size: 24px;
      border-bottom: 3px dotted white;
      padding-bottom: 5px;}

    #footer h1 img{
      margin: 0 0 3px 0 !important;
      vertical-align: middle;
      height: 25px;}

    #back-top{
      text-align: center;
      margin-bottom: 8px;
      position: relative;
      top: -12px;}

    #f-content{
      float: center;
      margin: 0 auto;}
    
    #f-content fieldset.frm-set dl dd, #f-content fieldset.frm-set dl dt {padding: .3em;}

    #f-content #username, #f-content #password{
      color: #333333;
      text-shadow: 1px 1px 0 white;
      background: url(http://i36.servimg.com/u/f36/11/96/49/61/input10.png);
      width: 149px;
      height: 39px;
      border: 0;
      padding: 0 0 0 20px;}

    input:-webkit-autofill, input:-webkit-autofill, input-moz-autofill, input:-moz-autofill, input:-autofill, input:-autofill {
      background: none !important;}

    #f-content .button1{
      cursor: pointer;
      font-weight: normal !important;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px;
      color: white;
      text-align: center;
      border: 0 !important;
      text-shadow: 0 1px 5px black;
      background: url(http://i36.servimg.com/u/f36/11/96/49/61/login10.png);
      width: 53px;
      height: 25px;
      padding-bottom: 2px;
      -webkit-box-shadow: 0 0 0;
      -moz-box-shadow: 0 0 0;
      box-shadow: 0 0 0;}

    #f-content dd.login{
      margin-top: -40px;
      margin-left: 110px;}
    
    ul#social{
      margin-left: 25px;
      margin-right: 25px;
      text-shadow: 1px 1px 0 black;
      font-weight: bold;
      font-size: 15px;
      float: left;}

    ul#social li{
      margin-bottom: 10px;}

    ul#social img{
      -ms-interpolation-mode: bicubic;
      margin-right: 10px;
      margin-bottom: 3px;
      vertical-align: middle;
      height:25px;}

    #connect{
      margin-left: 25px;
      margin-right: 25px;
      float: left;}

    #user-panel #avatar{margin-right: 5px;}

    #site-links{
      text-align: center;
      margin-left: 25px;
      margin-right: 25px;
      float: left;}

    #site-links li{margin-bottom: 3px;}

    #site-links li a {
      font-size: 16px;}

    #other{
      float: left;
      margin-left: 25px;
      margin-right: 25px;}

Resultado:

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

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

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