Construção de rodapé

3 participantes

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

Tópico resolvido Construção de rodapé

Mensagem por IsmaelS. 28.08.17 16:08

Detalhes da questão


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

Descrição


Olá!

Gostaria de deixar o footer desta forma:
Construção de rodapé 112
- http://www.graphicballoon.com/

Podem deixar as cores e texto que depois eu mesmo modifico.

overall_footer_begin
Código:
<!-- BEGIN html_validation -->
<div>
   <div>
      <div>
         <div>
            <div>
               <div>
                  <div>
                     <div>
<!-- END html_validation -->
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div id="{ID_RIGHT}">
            <!-- BEGIN giefmod_index2 -->
            {giefmod_index2.MODVAR}
            <!-- BEGIN saut -->
            <div style="height:{SPACE_ROW}px"></div>
            <!-- END saut -->
            <!-- END giefmod_index2 -->
         </div>
      </div>
   </div>
</div>
<div id="pun-foot">
   <div id="pun-about" class="clearfix">
      <form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}" id="qjump">
         <fieldset>
            <p><label>{L_JUMP_TO}:&nbsp;</label></p>
            {S_JUMPBOX_SELECT}&nbsp;<input type="submit" value="{L_GO}" />
         </fieldset>
      </form>
      <ul>
         <li>
<!-- BEGIN html_validation -->
         </li>
      </ul>
   </div>
</div>
<!-- END html_validation -->

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">
    $(document).ready( function() {
        $('div.fb-login-button, span.fb-login-button').attr({
            "data-scope": "{switch_facebook_login.FB_SCOPE}",
            "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
            "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
            "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
            "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
        });
        $('div.fb-login-button, span.fb-login-button').each(function() {
            if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
                $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
            }
            if($(this).html() == '') {
                $(this).html('{switch_facebook_login.FB_LABEL}');
            }
        });
       
        FB.init({
            appId  : "{switch_facebook_login.FB_APP_ID}",
            cookie  : {switch_facebook_login.FB_COOKIE},
            xfbml  : {switch_facebook_login.FB_XFBML},
            oauth  : {switch_facebook_login.FB_OAUTH},
            version : '{switch_facebook_login.FB_VERSION}'
        });
       
        (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/{switch_facebook_login.FB_LOCAL}/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    });
    function onLoginFB() {
        window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
    }
</script>
<!-- END switch_facebook_login -->

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

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 29.08.17 23:22

UP!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por Kyo Panda 30.08.17 18:36

Os links do Forumeiros ficariam antes ou depois do rodapé?
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 31.08.17 9:45

Kyo Panda escreveu:Os links do Forumeiros ficariam antes ou depois do rodapé?

Bom dia!

Como na print também depois do footer.
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por Kyo Panda 01.09.17 13:11

overall_footer_begin:

Código:
<!-- BEGIN html_validation -->
<div>
   <div>
      <div>
         <div>
            <div>
               <div>
                  <div>
                     <div>
<!-- END html_validation -->
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div id="{ID_RIGHT}">
            <!-- BEGIN giefmod_index2 -->
            {giefmod_index2.MODVAR}
            <!-- BEGIN saut -->
            <div style="height:{SPACE_ROW}px"></div>
            <!-- END saut -->
            <!-- END giefmod_index2 -->
         </div>
      </div>
   </div>
</div>
<div id="pun-foot">
   <div id="pun-about" class="clearfix">
      <div class="fa-footer">
         <div class="fa-footer-inner">
            <div class="fa-footer-column">
               <div class="fa-footer-title">
                  Lorem
               </div>
               <div class="fa-footer-content">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet consequat purus. Pellentesque hendrerit tellus vitae maximus imperdiet.
               </div>
            </div>
            <div class="fa-footer-column">
               <div class="fa-footer-title">
                  Lorem
               </div>
               <ul class="fa-footer-content">
                  <li><a href="#">Lorem</a></li>
                  <li><a href="#">Lorem</a></li>
                  <li><a href="#">Lorem</a></li>
                  <li><a href="#">Lorem</a></li>
               </ul>
            </div>
            <div class="fa-footer-column">
               <div class="fa-footer-title">
                  Lorem
               </div>
               <ul class="fa-footer-content">
                  <li><a href="#">Lorem</a></li>
                  <li><a href="#">Lorem</a></li>
                  <li><a href="#">Lorem</a></li>
                  <li><a href="#">Lorem</a></li>
               </ul>
            </div>
            <div class="fa-footer-column">
               <div class="fa-footer-title">
                  Lorem
               </div>
            </div>
         </div>
      </div>
      <div class="fa-copyright">
         <div class="fa-copyright-inner">
            <div class="fa-copyright-forum">
               © {SITENAME},
            </div>
            <ul class="fa-copyright-links">
               <li>
<!-- BEGIN html_validation -->
               </li>
            </ul>
         </div>
      </div>
   </div>
</div>
<!-- END html_validation -->

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>
                  <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 -->
                  <script>
                     (function($) {
                        'use strict';
                        
                        $('.fa-copyright-forum').append((new Date()).getFullYear());
                     })(jQuery);
                  </script>
               </div>
               <br />
               <p class="center">
                  <strong>{ADMIN_LINK}</strong>
               </p>
            </div>
            {PROTECT_FOOTER}
         </div>
      </div>
   
      <!-- BEGIN switch_facebook_login -->
      <div id="fb-root"></div>
      <script type="text/javascript">
          $(document).ready( function() {
              $('div.fb-login-button, span.fb-login-button').attr({
                  "data-scope": "{switch_facebook_login.FB_SCOPE}",
                  "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
                  "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
                  "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
                  "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
              });
              $('div.fb-login-button, span.fb-login-button').each(function() {
                  if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
                      $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
                  }
                  if($(this).html() == '') {
                      $(this).html('{switch_facebook_login.FB_LABEL}');
                  }
              });
             
              FB.init({
                  appId   : "{switch_facebook_login.FB_APP_ID}",
                  cookie  : {switch_facebook_login.FB_COOKIE},
                  xfbml   : {switch_facebook_login.FB_XFBML},
                  oauth   : {switch_facebook_login.FB_OAUTH},
                  version : '{switch_facebook_login.FB_VERSION}'
              });
             
              (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/{switch_facebook_login.FB_LOCAL}/sdk.js";
                  fjs.parentNode.insertBefore(js, fjs);
              }(document, 'script', 'facebook-jssdk'));
          });
          function onLoginFB() {
              window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
          }
      </script>
      <!-- END switch_facebook_login -->
      
      <script type="text/javascript">
      //<![CDATA[
         fa_endpage();
      //]]>
      </script>
   </body>
</html>

Aplique-o para que possa fazer o CSS.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 02.09.17 12:07

Bom dia,

Já foi adicionado.
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 04.09.17 19:21

UP!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por Kyo Panda 06.09.17 13:03

CSS:

Código:
#pun-about {
    padding: 0;
    border: none;
}

.fa-footer {
    background-color: #71ccc7;
    margin-top: 40px;
}

.fa-footer-inner {
    overflow: hidden;
}

.fa-footer-column {
    float: left;
    width: 25%;
    text-align: left;
    padding: 30px;
    box-sizing: border-box;   
    line-height: 1.2rem;
}

.fa-footer-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #fff;
    border-bottom: 1px #fff solid;
}

#pun-about .fa-footer-content > li {
    display: block;
}

#pun-about .fa-copyright::before {
    display: none;
}

#pun-about .fa-copyright br {
    display: none;
}

#pun-about .fa-copyright {
    background-color: #696969;
    padding: 15px 0;
    text-align: center;
}

.fa-copyright-links {
    margin-top: 10px;
}

E no overall_footer_begin, troque SITENAME por L_INDEX.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 07.09.17 0:00

Esta quase só queria umas pequenas modificações nos links esta a azul e sublinhado e também o tipo de letra deixa desta forma: http://www.graphicballoon.com/

Outra coisa na última aba da direita queria poderia colocar links também?
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Construção de rodapé

Mensagem por Fraise 09.09.17 4:28

Boa noite!

Adicione em sua folha de estilos:
Código:

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
.fa-footer {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
}
ul.fa-footer-content a {
    text-decoration: none;
    color: #000;
}

Abraço,
Fraise.
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 09.09.17 12:17

Já agradou mas só queria fazer mais umas alterações:
Construção de rodapé Sem_ty11

Onde tem os quadrados em vermelho queria colocar ícones font-awsome podem colocar o mesmo para todos eu depois altero, outra coisa onde esta o quadrado em azul queria deixar as letras mais pequenas e com melhor aspeto como neste fórum: http://www.graphicballoon.com/

overall_footer_begin
Código:
<!-- BEGIN html_validation -->
<div>
  <div>
      <div>
        <div>
            <div>
              <div>
                  <div>
                    <div>
<!-- END html_validation -->
                    </div>
                  </div>
              </div>
            </div>
        </div>
        <div id="{ID_RIGHT}">
            <!-- BEGIN giefmod_index2 -->
            {giefmod_index2.MODVAR}
            <!-- BEGIN saut -->
            <div style="height:{SPACE_ROW}px"></div>
            <!-- END saut -->
            <!-- END giefmod_index2 -->
        </div>
      </div>
  </div>
</div>
<div id="pun-foot">
  <div id="pun-about" class="clearfix">
      <div class="fa-footer">
        <div class="fa-footer-inner">
            <div class="fa-footer-column">
              <div class="fa-footer-title">
                  SOBRE NÓS
              </div>
              <div class="fa-footer-content">
                  Suporte Design é um fórum de suporte aos usuários que pretendem aprimorar seus conhecimentos na área de design gráfico, realizamos concursos para melhorar a criação de suas imagens. Somos pequenos, mas com grandes sonhos que, com sua ajuda, poderemos evoluir.
              </div>
            </div>
            <div class="fa-footer-column">
              <div class="fa-footer-title">
                  NAVEGAÇÃO
              </div>
              <ul class="fa-footer-content">
                  <li><a href="#">Lorem</a></li>
                  <li><a href="#">Lorem</a></li>
                  <li><a href="#">Lorem</a></li>
                  <li><a href="#">Lorem</a></li>
              </ul>
            </div>
            <div class="fa-footer-column">
              <div class="fa-footer-title">
                  REDES SOCIAIS
              </div>
              <ul class="fa-footer-content">
                  <li><a href="#">Facebook</a></li>
                  <li><a href="#">Twitter</a></li>
              </ul>
            </div>
            <div class="fa-footer-column">
              <div class="fa-footer-title">
                  EQUIPA MODERAÇÃO
              </div>
              <ul class="fa-footer-content">
                  <li><a href="#">Administradores</a></li>
                  <li><a href="#">Moderadaores</a></li>
                  <li><a href="#">Designers</a></li>
              </ul>
            </div>
        </div>
      </div>
      <div class="fa-copyright">
        <div class="fa-copyright-inner">
            <div class="fa-copyright-forum">
              © Suporte Design | 2012-2017 {L_INDEX},
            </div>
            <ul class="fa-copyright-links">
              <li>
<!-- BEGIN html_validation -->
              </li>
            </ul>
        </div>
      </div>
  </div>
</div>
<!-- END html_validation -->

Outra coisa é que o footer só esta esticado na página inicial dentro das páginas não: http://ismaels.forumeiros.com/f1-seu-primeiro-forum
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Construção de rodapé

Mensagem por Fraise 10.09.17 4:53

Tudo bem. Adicione mais este código em sua folha de estilos:
Código:
#pun-about .fa-copyright a {
    text-decoration: none;
    color: #45494B;
}

#pun-about .fa-copyright {
    font-size: 11px;
    font-family: 'Oswald', sans-serif;
}

#fa-footer-title1:before {
    content: '\f007 ';
    font-family: FontAwesome;
}

#fa-footer-title2:before {
    content: '\f14d ';
    font-family: FontAwesome;
}

#fa-footer-title3:before {
    content: '\f081 ';
    font-family: FontAwesome;
}

#fa-footer-title4:before {
    content: '\f183 ';
    font-family: FontAwesome;
}

E troque o seu overall_footer_begin por este:
Código:
<!-- BEGIN html_validation -->
<div>
  <div>
      <div>
        <div>
            <div>
              <div>
                  <div>
                    <div>
<!-- END html_validation -->
                    </div>
                  </div>
              </div>
            </div>
        </div>
        <div id="{ID_RIGHT}">
            <!-- BEGIN giefmod_index2 -->
            {giefmod_index2.MODVAR}
            <!-- BEGIN saut -->
            <div style="height:{SPACE_ROW}px"></div>
            <!-- END saut -->
            <!-- END giefmod_index2 -->
        </div>
      </div>
  </div>
</div>
<div id="pun-foot">
  <div id="pun-about" class="clearfix">
      <div class="fa-footer">
        <div class="fa-footer-inner">
            <div class="fa-footer-column">
              <div class="fa-footer-title">
                  <div id="fa-footer-title1">SOBRE NÓS</div>
              </div>
              <div class="fa-footer-content">
                  Suporte Design é um fórum de suporte aos usuários que pretendem aprimorar seus conhecimentos na área de design gráfico, realizamos concursos para melhorar a criação de suas imagens. Somos pequenos, mas com grandes sonhos que, com sua ajuda, poderemos evoluir.
              </div>
            </div>
            <div class="fa-footer-column">
              <div class="fa-footer-title">
                  <div id="fa-footer-title2">NAVEGAÇÃO</div>
              </div>
              <ul class="fa-footer-content">
                  <li><a href="#">Lorem</a></li>
                  <li><a href="#">Lorem</a></li>
                  <li><a href="#">Lorem</a></li>
                  <li><a href="#">Lorem</a></li>
              </ul>
            </div>
            <div class="fa-footer-column">
              <div class="fa-footer-title">
                  <div id="fa-footer-title3">REDES SOCIAIS</div>
              </div>
              <ul class="fa-footer-content">
                  <li><a href="#">Facebook</a></li>
                  <li><a href="#">Twitter</a></li>
              </ul>
            </div>
            <div class="fa-footer-column">
              <div class="fa-footer-title">
                  <div id="fa-footer-title4">EQUIPA MODERAÇÃO</div>
              </div>
              <ul class="fa-footer-content">
                  <li><a href="#">Administradores</a></li>
                  <li><a href="#">Moderadaores</a></li>
                  <li><a href="#">Designers</a></li>
              </ul>
            </div>
        </div>
      </div>
      <div class="fa-copyright">
        <div class="fa-copyright-inner">
            <div class="fa-copyright-forum">
              ©️ Suporte Design | 2012-2017 {L_INDEX},
            </div>
            <ul class="fa-copyright-links">
              <li>
<!-- BEGIN html_validation -->
              </li>
            </ul>
        </div>
      </div>
  </div>
</div>
<!-- END html_validation -->
Seta Salve e publique!

Abraço,
Fraise.
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 10.09.17 12:37

Resultou só falta colocar os ícones trás dos links das Redes Sociais e Equipa Moderação como na print anterior mostrei, outra coisa é que dentro das categorias e tópicos continua encolhido o footer: http://ismaels.forumeiros.com/f3-teste | http://ismaels.forumeiros.com/t2-jjjjjjjjjjjjj

Outra coisa se encolher a resolução o fotoer não fica para todas as resoluções.
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 12.09.17 12:50

UP!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por Kyo Panda 12.09.17 13:58

Adicione ao CSS:

Código:
.pun > #pun-foot {
    margin-left: -1%;
    margin-right: -1%;
}

@media (max-width: 960px) {
    .fa-footer-column {
        float: none;
        width: auto;
    }
}

E quanto aos ícones, é só ir lá no link do template e colocar:

Código:
<a href="#"><i class="fa fa-facebook"></i> Facebook</a>

Código:
<a href="#"><i class="fa fa-twitter"></i> Twitter</a>
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 12.09.17 15:14

Só falta mesmo este pequeno problema veja que quando diminuo a resolução ainda aparece um espaço em branco:
Construção de rodapé Sem_ty12
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por Kyo Panda 12.09.17 15:30

Adicione ao CSS:

Código:
html,
body,
.minwidth_IE,
.layout_IE,
.container_IE,
.pun {
    height: 100%;
}

.pun {
    display: flex;
    flex-direction: column;
}

.pun > #pun-foot {
    margin-top: auto;
}

#pun-about::after {
    display: none;
}

Tem alguma coisa quebrada no seu index_body, precisaria que o senhor colocasse ele aqui.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 12.09.17 15:46

Coloquei o .CSS e ficou estranho mas deixo aqui o index_body:
Código:
{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
  <ul>
        <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
        <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
      <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
  </ul>
  <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
  <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
  <!-- BEGIN message_admin_titre -->
  <div class="main-head">
      <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
  </div>
  <!-- END message_admin_titre -->

  <!-- BEGIN message_admin_txt -->
  <div id="pun-announcement">
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
  </div>
  <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> &nbsp;
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> &nbsp;
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
  </div>
</form>
</div>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<script>
$(function() {
    var membroNovoUrl = $('#tabelaMembro #membroNovo a').attr('href');
    console.log(membroNovoUrl);
    $('#tabelaMembro').append('<span style="display:none" id="avatarImg"></span><span style="display:none" id="registoData"></span>');
    $('#avatarImg').load(membroNovoUrl + ' #profile-advanced-right .main-content.clearfix.center img:first-child', function() {
        console.log('Avatar carregado com sucesso!');
        var avatarSrc = $('#avatarImg img').attr('src');
        $('#membroNovoImg').attr('src', avatarSrc);
    });
    $('#registoData').load(membroNovoUrl + ' #profile-advanced-details #field_id-4 .field_uneditable', function() {
        console.log('Data de registro carregada com sucesso!');
        var dataLoad = $('#registoData').text();
        $('#tabelaRegistro span').text('Registado em ' + dataLoad + '');
    });
});
</script>
<script>
$(function() {
    $('#pun-info').before('<div style="display:none" id="topicCountDiv"></div>');
    $('.table .col_c_stats li:contains("Tópicos") strong').each(function() {
        var findStrong = $(this).html();
        $(this).after('<div id="strongContador" style="display:inline;font-weight:700;">' + findStrong + '</div>');
        var countDiv = $('#topicCountDiv');
        $(this).appendTo(countDiv);
    });
    var countDiv2 = $('#topicCountDiv');
    var countDiv3 = $('#topicCountDiv').find('strong');
    var sumar = 0;
    $(countDiv3).each(function() {
        sumar += parseFloat($(this).text());
    });
    countDiv2.html(sumar);
    console.log(sumar);
    $('#contarTopicos').html(sumar);
});
</script>
<script>
$(function() {
    var totalPosts = $('#tabelaStats #totalPosts strong').html();
    $('#tabelaStats #totalPosts').html(totalPosts);
    var totalUsers = $('#tabelaStats #totalUsers strong').html();
    $('#tabelaStats #totalUsers').html(totalUsers);
    var recordUsers = $('#tabelaStats #recordUsers strong').html();
    $('#tabelaStats #recordUsers').html(recordUsers);
    var membroNovo = $('#tabelaStats #membroNovo a');
    $('#tabelaStats #membroNovo').html(membroNovo);
});
</script>
<div class="ipsWidget ipsWidget_horizontal ipsBox" id="statsHancki">
    <table id="tabelaStats">
        <tr>
            <h3 class="ipsType_reset ipsWidget_title"></h3>
            <div class="ipsWidget_inner">

                <td>
                    <div class="ipsGrid ipsGrid_collapsePhone ipsWidget_stats">
                        <div class="ipsGrid_span2 ipsType_center">
                            <span class="ipsType_large ipsWidget_statsCount" id="contarTopicos">0</span>
                            <br>
                            <span class="ipsType_light ipsType_medium">Tópicos</span>
                        </div>
                </td>
                <td>
                    <div class="ipsGrid_span2 ipsType_center">
                      <span class="ipsType_large ipsWidget_statsCount"><span id="totalPosts">{TOTAL_POSTS}</span></span>
                        <br>
                        <span class="ipsType_light ipsType_medium">Mensagens</span>
                    </div>
                </td>
                <td>
                    <div class="ipsGrid_span2 ipsType_center">
                      <span class="ipsType_large ipsWidget_statsCount"><span id="totalUsers">{TOTAL_USERS}</span></span>
                        <br>
                        <span class="ipsType_light ipsType_medium">Membros</span>
                    </div>
                </td>
                <td>
                    <div class="ipsGrid_span2 ipsType_center">
                      <span class="ipsType_large ipsWidget_statsCount"><span id="recordUsers">{RECORD_USERS}</span></span>
                        <br>
                        <span class="ipsType_light ipsType_medium">Recorde Usuários Online</span>
                    </div>
                </td>
                <td>
                    <div class="ipsGrid_span3 ipsType_left ipsPhotoPanel ipsPhotoPanel_mini cNewestMember">

                        <table id="tabelaMembro">
                            <tr>
                                <td rowspan="3" id="tabelaAvatar"> <img id="membroNovoImg" src="http://www.loskatchorros.com.br/ipb/uploads/set_resources_2/84c1e40ea0e759e3f1505eb1788ddf3c_default_photo.png" alt="">
                                </td>
                                <td id="tabelaMembroMaisNovo"> <span class="ipsType_minorHeading">último Usuário registado</span>
                                </td>
                            </tr>
                            <tr>
                                <td id="tabelaNomeMembro"> <span class="ipsType_normal" id="membroNovo">{NEWEST_USER}</span>
                                </td>
                            </tr>
                            <tr>
                                <td id="tabelaRegistro"> <span class="ipsType_small ipsType_light">Registado em ...</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
                </div>

            </div>
        </tr>
    </table>
</div>

<style>
    .ipsType_minorHeading {
        color: #868686;
        text-transform: uppercase;
        font-size: 11px;
        margin: 0;
    }
   
    #tabelaMembro #tabelaMembroMaisNovo,
    #tabelaMembro #tabelaNomeMembro,
    #tabelaMembro #tabelaRegistro {
        width: 250px;
    }
   
    #tabelaMembro {
        width: auto;
    }
   
    .ipsType_light {
        color: #9c9c9c;
        font-size: 13px;
    }
   
    .ipsType_center {
        text-align: center;
    }
   
    #tabelaStats td {
        width: 10%;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
   
    #tabelaStats td:nth-child(5) {
        width: 20% !important;
    }
   
    .ipsBox:not(.ipsBox_transparent) {
        background-color: #fff;
    }
   
    .ipsWidget.ipsWidget_horizontal .ipsWidget_title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 10px;
        border-radius: 3px 3px 0 0;
    }
   
    .ipsWidget_horizontal .ipsWidget_statsCount {
        font-size: 22px;
        line-height: 32px !important;
        font-weight: 300;
    }
   
    .ipsType_medium:not(.ipsType_richText) {
        line-height: 20px;
    }
   
    .ipsWidget_horizontal .cNewestMember {
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        padding-left: 15px;
    }
    #tabelaStats #membroNovo a {
        font-size: 14px !important;
        text-decoration: none;
    }
    .ipsBox {
        padding-bottom: 20px;
        border-width: 1px;
        border-style: solid;
        border-color: #f2f2f2;
        border-radius: 3px;
    }
   
    #membroNovoImg {
        box-shadow: 0px 0px 0px 1px #e2e2e2;
        width: 44px;
        background: #fff;
        vertical-align: middle;
        display: inline-block;
        line-height: 1px;
        position: relative;
        margin: 2px;
        border-radius: 150px;
        float: left;
        border: 1px solid white;
    }
</style>
      <!-- BEGIN switch_chatbox_activate -->
      <div id="onlinechat">
        <p class="page-bottom">
        {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
        {CHATTERS_LIST}<br />
        <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
              insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            </script>
        <!-- END switch_chatbox_popup -->
        </p>
      </div>
      <!-- END switch_chatbox_activate -->
  </div>
</div>
<!-- END disable_viewonline -->

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> &nbsp;
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> &nbsp;
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
  </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<ul id="pun-legend">
  <li>
      <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />&nbsp;{L_NEW_POSTS}
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />&nbsp;{L_NO_NEW_POSTS}
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />&nbsp;{L_FORUM_LOCKED}
  </li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_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_fb_index_login -->
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por Kyo Panda 12.09.17 15:52

Troque por esse:

Código:
{JAVASCRIPT}

<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
      <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
      <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
      <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
   </ul>
   <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->

<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
   <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
   <!-- BEGIN message_admin_titre -->
   <div class="main-head">
      <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
   </div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
   <div id="pun-announcement">
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
   </div>
   <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form main-box center">
         <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> &nbsp;
         <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> &nbsp;
         <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
         {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_fb_connect -->
         <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
         <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
         <!-- END switch_fb_connect -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<script>
$(function() {
    var membroNovoUrl = $('#tabelaMembro #membroNovo a').attr('href');
    console.log(membroNovoUrl);
    $('#tabelaMembro').append('<span style="display:none" id="avatarImg"></span><span style="display:none" id="registoData"></span>');
    $('#avatarImg').load(membroNovoUrl + ' #profile-advanced-right .main-content.clearfix.center img:first-child', function() {
        console.log('Avatar carregado com sucesso!');
        var avatarSrc = $('#avatarImg img').attr('src');
        $('#membroNovoImg').attr('src', avatarSrc);
    });
    $('#registoData').load(membroNovoUrl + ' #profile-advanced-details #field_id-4 .field_uneditable', function() {
        console.log('Data de registro carregada com sucesso!');
        var dataLoad = $('#registoData').text();
        $('#tabelaRegistro span').text('Registado em ' + dataLoad + '');
    });

    $('#pun-info').before('<div style="display:none" id="topicCountDiv"></div>');
    $('.table .col_c_stats li:contains("Tópicos") strong').each(function() {
        var findStrong = $(this).html();
        $(this).after('<div id="strongContador" style="display:inline;font-weight:700;">' + findStrong + '</div>');
        var countDiv = $('#topicCountDiv');
        $(this).appendTo(countDiv);
    });
    var countDiv2 = $('#topicCountDiv');
    var countDiv3 = $('#topicCountDiv').find('strong');
    var sumar = 0;
    $(countDiv3).each(function() {
        sumar += parseFloat($(this).text());
    });
    countDiv2.html(sumar);
    console.log(sumar);
    $('#contarTopicos').html(sumar);

    var totalPosts = $('#tabelaStats #totalPosts strong').html();
    $('#tabelaStats #totalPosts').html(totalPosts);
    var totalUsers = $('#tabelaStats #totalUsers strong').html();
    $('#tabelaStats #totalUsers').html(totalUsers);
    var recordUsers = $('#tabelaStats #recordUsers strong').html();
    $('#tabelaStats #recordUsers').html(recordUsers);
    var membroNovo = $('#tabelaStats #membroNovo a');
    $('#tabelaStats #membroNovo').html(membroNovo);
});
</script>

<div class="ipsWidget ipsWidget_horizontal ipsBox" id="statsHancki">
    <table id="tabelaStats">
        <tr>
         <td>
            <div class="ipsGrid ipsGrid_collapsePhone ipsWidget_stats">
               <div class="ipsGrid_span2 ipsType_center">
                  <span class="ipsType_large ipsWidget_statsCount" id="contarTopicos">0</span>
                  <br />
                  <span class="ipsType_light ipsType_medium">Tópicos</span>
               </div>
            </div>
         </td>
         <td>
            <div class="ipsGrid_span2 ipsType_center">
               <span class="ipsType_large ipsWidget_statsCount"><span id="totalPosts">{TOTAL_POSTS}</span></span>
               <br />
               <span class="ipsType_light ipsType_medium">Mensagens</span>
            </div>
         </td>
         <td>
            <div class="ipsGrid_span2 ipsType_center">
               <span class="ipsType_large ipsWidget_statsCount"><span id="totalUsers">{TOTAL_USERS}</span></span>
               <br />
               <span class="ipsType_light ipsType_medium">Membros</span>
            </div>
         </td>
         <td>
            <div class="ipsGrid_span2 ipsType_center">
               <span class="ipsType_large ipsWidget_statsCount"><span id="recordUsers">{RECORD_USERS}</span></span>
               <br />
               <span class="ipsType_light ipsType_medium">Recorde Usuários Online</span>
            </div>
         </td>
         <td>
            <div class="ipsGrid_span3 ipsType_left ipsPhotoPanel ipsPhotoPanel_mini cNewestMember">
               <table id="tabelaMembro">
                  <tr>
                     <td rowspan="3" id="tabelaAvatar">
                        <img id="membroNovoImg" src="http://www.loskatchorros.com.br/ipb/uploads/set_resources_2/84c1e40ea0e759e3f1505eb1788ddf3c_default_photo.png" alt="" />
                     </td>
                     <td id="tabelaMembroMaisNovo">
                        <span class="ipsType_minorHeading">Último Usuário registrado</span>
                     </td>
                  </tr>
                  <tr>
                     <td id="tabelaNomeMembro">
                        <span class="ipsType_normal" id="membroNovo">{NEWEST_USER}</span>
                     </td>
                  </tr>
                  <tr>
                     <td id="tabelaRegistro">
                        <span class="ipsType_small ipsType_light">Registado em ...</span>
                     </td>
                  </tr>
               </table>
            </div>
         </td>
        </tr>
    </table>
</div>

<style>
    .ipsType_minorHeading {
        color: #868686;
        text-transform: uppercase;
        font-size: 11px;
        margin: 0;
    }
   
    #tabelaMembro #tabelaMembroMaisNovo,
    #tabelaMembro #tabelaNomeMembro,
    #tabelaMembro #tabelaRegistro {
        width: 250px;
    }
   
    #tabelaMembro {
        width: auto;
    }
   
    .ipsType_light {
        color: #9c9c9c;
        font-size: 13px;
    }
   
    .ipsType_center {
        text-align: center;
    }
   
    #tabelaStats td {
        width: 10%;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
   
    #tabelaStats td:nth-child(5) {
        width: 20% !important;
    }
   
    .ipsBox:not(.ipsBox_transparent) {
        background-color: #fff;
    }
   
    .ipsWidget.ipsWidget_horizontal .ipsWidget_title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 10px;
        border-radius: 3px 3px 0 0;
    }
   
    .ipsWidget_horizontal .ipsWidget_statsCount {
        font-size: 22px;
        line-height: 32px !important;
        font-weight: 300;
    }
   
    .ipsType_medium:not(.ipsType_richText) {
        line-height: 20px;
    }
   
    .ipsWidget_horizontal .cNewestMember {
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        padding-left: 15px;
    }
    #tabelaStats #membroNovo a {
        font-size: 14px !important;
        text-decoration: none;
    }
    .ipsBox {
        padding-bottom: 20px;
        border-width: 1px;
        border-style: solid;
        border-color: #f2f2f2;
        border-radius: 3px;
    }
   
    #membroNovoImg {
        box-shadow: 0px 0px 0px 1px #e2e2e2;
        width: 44px;
        background: #fff;
        vertical-align: middle;
        display: inline-block;
        line-height: 1px;
        position: relative;
        margin: 2px;
        border-radius: 150px;
        float: left;
        border: 1px solid white;
    }
</style>

<!-- BEGIN switch_chatbox_activate -->
<div id="onlinechat">
   <p class="page-bottom">
      {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
      {CHATTERS_LIST}<br />
      
      <!-- BEGIN switch_chatbox_popup -->
      <div id="chatbox_popup"></div>
      <script type="text/javascript">
         insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
      </script>
      <!-- END switch_chatbox_popup -->
   </p>
</div>
<!-- END switch_chatbox_activate -->

<!-- END disable_viewonline -->

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> &nbsp;
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> &nbsp;
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
  </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<ul id="pun-legend">
  <li>
      <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />&nbsp;{L_NEW_POSTS}
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />&nbsp;{L_NO_NEW_POSTS}
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />&nbsp;{L_FORUM_LOCKED}
  </li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_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_fb_index_login -->
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 12.09.17 16:05

O header ficou encolhido mas nos sub-fóruns esta direito:
- http://ismaels.forumeiros.com/
- http://ismaels.forumeiros.com/f1-seu-primeiro-forum
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por Kyo Panda 12.09.17 18:53

Adicione ao CSS:

Código:
#pun-intro {
  min-height: 200px;
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 12.09.17 21:38

Só falta este pequeno pormenor e fica arrumado amigo no lado direito ainda aparece um branco em todas as páginas veja:
Construção de rodapé Sem_ty13
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por Kyo Panda 12.09.17 21:45

Adicione ao CSS:

Código:
.container_IE, .layout_IE, .minwidth_IE, .pun, body, html {
    box-sizing: border-box;
}

E troque:

Código:
.pun > #pun-foot {
    margin-left: -1%;
    margin-right: -1%;
    margin-top: auto;
}

Por:

Código:
.pun > #pun-foot {
    margin-left: calc(-1% - 5px);
    margin-right: calc(-1% - 5px);
    margin-top: auto;
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 12.09.17 21:52

Agora ficou encolhido e o header também :/
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por Kyo Panda 12.09.17 21:55

Existe uma opção lá na página do CSS que diz Melhorar seu CSS. Marque-a como Não.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 12.09.17 21:59

Coloquei e continua igual.
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por Kyo Panda 13.09.17 12:25

Nesses dois códigos:

Código:
#pun-intro {
    background-color: #1d1d29;
    background-size: cover;
    height: 200px;
    position: relative;
    box-sizing: border-box;
    margin-top: -0.5%;
    margin-left: -1%;
    margin-right: -1%;
}

Código:
#pun-head #pun-navlinks {
    padding: 0;
    line-height: 40px;
    background-color: #fff;
    margin-left: -1%;
    margin-right: -1%;
    margin-bottom: 1.5%;
}

Mude o margin-left e margin-right de 1% para calc(-1% - 5px), assim como fizemos no anterior.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 13.09.17 22:55

Resultou mas o lado direito não fica esticado nem o header nem o footer.
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por Kyo Panda 14.09.17 12:17

Não entendi o que quis dizer. Acessei o fórum e parece perfeitamente alinhado.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 14.09.17 13:09

Veja a print do header e footer:
Construção de rodapé Sem_ty14
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 16.09.17 0:56

UP!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 18.09.17 21:43

UP!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por Kyo Panda 20.09.17 12:37

Essa é a borda da barra de scroll do navegador:

Construção de rodapé 5vo60c6

Código:
::-webkit-scrollbar {
  width: 17px;
  height: 17px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: red;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}
::-webkit-scrollbar-track {
  background: blue;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por IsmaelS. 20.09.17 13:05

Eish pois é Irritado foi erro meu amigo desculpe pelo incomodo então, ficou resolvido então obrigado!!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Construção de rodapé

Mensagem por Kyo Panda 20.09.17 13:25

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

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

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

- Tópicos semelhantes

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