Personalizar fim do footer

por PrisoN†BreaK 27.07.16 1:46

Detalhes da questão

Endereço do fórum: brasilplayfreedomofc.forumeiros.com
Versão do fórum: PunBB

Descrição

Bom, eu gostaria do fim do footer dessa maneira: https://imgur.com/05qnE4f

Só que com um botão de TOPO no meio dessa parte transparente;

e eu gostaria dessa pequena barra azul embaixo.

por while 27.07.16 1:53

Olá, poderia me passar o fórum onde viu esse efeito?
Até mais.

por PrisoN†BreaK 27.07.16 1:55

maisweb.forumais.com aqui está, porém eu gostaria dele diferente para evitar ''copias''

por while 27.07.16 2:16

Olá, fiz um pouco diferente... pelo menos na cor do fundo, o resto você muda.

Troque seu template overall_footer_end por este:

Código::  <!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>  </li> </ul>  <ul> <li>   |  {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>  </li> </ul>  </div> <br /> <p class="center"> <strong>{ADMIN_LINK}</strong> </p> </div> {PROTECT_FOOTER} </div> </div> </div> </div>  <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>   <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>  <footer><div class="social"><a href="https://www.facebook.com/pages/Mais-Info/1431860630442132"><i class="fa fa-facebook"></i></a></div><div class="social"><a href="https://twitter.com/MaisForum"><i class="fa fa-twitter"></i></a></div><span class="copy">Desenvolvido por RafaelS. | Proibida à copia parcial ou total deste tema.</footer><script type="text/javascript">//<![CDATA[ fa_endpage();//]]></script><script type="text/javascript"> var vglnk = { api_url: 'http://api.viglink.com/api', key: 'e2aa2ae88c2bcc3c33577d636d209bf8' }; (function(d, t) { var s = d.createElement(t); s.type = 'text/javascript'; s.async = true; s.src = ('https:' == document.location.protocol ? vglnk.api_url : 'http://cdn.viglink.com/api') + '/vglnk.js'; var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r); }(document, 'script')); </script></body></html> <style> .social .fa-facebook, .social .fa-twitter { background: transparent none repeat scroll 0 0; display: block!important; color: #fff!important; height: 23px!important; line-height: 28px!important; padding: 10px 20px!important; margin-top: -15px!important; font-size: 21px!important; transition: .5s; } .fa-facebook-f:before, .fa-facebook:before { content: "\f09a"; } .social { text-align: left; float: left; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .social .fa-twitter:hover { background: #00a0cb!important; } .fa-twitter:before { content: "\f099"; } footer { margin-top: 5px; background: rgba(0,0,0,0.4); color: #FFF; padding: 15px; } .copy { display: block; text-align: right; line-height: 100%; } .social .fa-facebook:hover { background: #3b5998!important; } </style>

Todas alterações devem ser feita nesse template, inclusive cores... etc, todo css no fim.
Até mais.

por PrisoN†BreaK 27.07.16 2:21

Meio que ficou muito grande: https://imgur.com/2gYYO5I

e Teria como vc ajusta ele com a linha preta que coloquei?

por while 27.07.16 4:15

Adicione esse código em sua folha de estilo css:

Código:: footer {width:98%!important;height:20px!important;margin-bottom:-10px!important;} .social {margin-top:4px!important;margin-left:50px!important;} body > footer > span {margin-right:60px!important;} body > footer > div:nth-child(2) > a > i {margin-left:-50px!important;}

Até mais.

por PrisoN†BreaK 27.07.16 13:34

Perfeito, obrigado, pode fecha.

por while 27.07.16 15:02

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.

Personalizar fim do footer