Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Membro
Mensagens : 175
Pontos : 8186
Reputação : 1
Ver perfil do usuário

Rodapé

em 22.12.15 14:09
Gostaria de saber como faço um rodapé assim: http://prntscr.com/9h9jv6 , claro que não quero igualzinho, gostaria da caixa preta com bordas arredondadas, um pouco menor pra não sobrar muito espaço em baixo e pode ter aqueles títulos lá mesmo, e não precisa do Back to Top !
avatar
Ajudeiro
Mensagens : 136
Pontos : 7723
Reputação : 41
Ver perfil do usuáriohttp://beststyle.forumeiros.com

Re: Rodapé

em 23.12.15 19:09
Olá,

Tente adicionar em sua folha de estilo CSS:

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

Se possível poderia me enviar o link de seu fórum para resolver?
avatar
Membro
Mensagens : 175
Pontos : 8186
Reputação : 1
Ver perfil do usuário

Re: Rodapé

em 23.12.15 20:34
Não mudou nada, cara.
avatar
Ajudeiro
Mensagens : 136
Pontos : 7723
Reputação : 41
Ver perfil do usuáriohttp://beststyle.forumeiros.com

Re: Rodapé

em 23.12.15 21:09


Vamos com calma que estou resolvendo...

Adicione em sua folha de estilo CSS:

Código:
#footer {
    background: hsl(180, 4%, 5%) url(http://i36.servimg.com/u/f36/11/96/49/61/footer15.png) repeat-x;
    color: hsl(0, 100%, 100%);
    height: 280px;
    min-width: 900px;
    width: 100%;
}
ul#social {
    float: left;
    font-size: 15px;
    font-weight: 700;
    margin-left: 25px;
    margin-right: 25px;
}
#footer h1 {
    border-bottom: 3px dotted hsl(0, 100%, 100%);
    font-family: Lobster;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 20px;
    padding-bottom: 5px;
}
#connect {
    float: left;
    margin-left: 25px;
    margin-right: 25px;
  }
#site-links {
    float: left;
    margin-left: 25px;
    margin-right: 25px;
    text-align: center;
  }
#footer a {
    color: hsl(0, 100%, 100%);
}
a {
text-decoration: none !important;
}


E altere o seu template: "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;<!-- 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>

Fiz testes em meu fórum com estes mesmos codes e faltam apenas ajustes, se puder me mandar o link do seu fórum seria mais fácil..

Até!
avatar
Membro
Mensagens : 175
Pontos : 8186
Reputação : 1
Ver perfil do usuário

Re: Rodapé

em 24.12.15 13:47
baixacidade.forumeiros.com
avatar
Administrador
Mensagens : 441
Pontos : 9921
Reputação : 120
Ver perfil do usuáriohttp://beststyle.forumeiros.com

Re: Rodapé

em 24.12.15 22:20
Não sei pra quem pediu permissão pra passar Fael... exatamente como está o meu, mas enfim, deixe o template passado pelo nosso amigo (overall_footer_end)

e poe esse codigo css:

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;}
avatar
Membro
Mensagens : 175
Pontos : 8186
Reputação : 1
Ver perfil do usuário

Re: Rodapé

em 25.12.15 11:02
Resolvido, pode fechar !
avatar
Administrador
Mensagens : 441
Pontos : 9921
Reputação : 120
Ver perfil do usuáriohttp://beststyle.forumeiros.com

Re: Rodapé

em 28.12.15 0:54
Topico Resolvido e Bloqueado
Topico Movido para Arquivados
Conteúdo patrocinado

Re: Rodapé

Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum