Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Meriteiro

Agosto de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
» [Pedido] Banner
Ontem à(s) 23:59 por -xGabriel..

» Como centralizar e separar os ícones dos tópicos
Ontem à(s) 23:25 por luuuiiiz

» Personalizar footer do fórum
Ontem à(s) 21:34 por while

» Mudar fundo do forabg dos tópicos
Ontem à(s) 21:33 por while

» Como deixa assim?
Ontem à(s) 21:17 por Nean

» Tópico duplicado
Ontem à(s) 21:12 por Glauco Vitorino

» Glitter Automático
Ontem à(s) 20:46 por Maori

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Os membros mais ativos da semana
Cream
 
while
 
Shek
 
Holkis
 
-xGabriel..
 
Mr.Probz
 
Sennior
 
Nogueira SSA
 
GollD
 
Nean
 

Quem está conectado
115 usuários online :: 8 usuários cadastrados, 2 Invisíveis e 105 Visitantes :: 2 Motores de busca

-xGabriel.., Belissimo, Harleen, Holkis, idarkdg, iScroll, Nean, Southier

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez - 15:05

Construção de footer

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

Resolvido Construção de footer

Mensagem por IsmaelS. em Qua 30 Dez - 16:31

Detalhes da questão


Endereço do fórum: http://webgrafic.forumeiro.com/
Versão do fórum: PunBB

Descrição


Eu já fiz um exemplar pelo Photoshop e era como gostava de deixar, já tenho basicamente a estrutura adicionada, apenas queria agora colocar os ícones em efeito hover com um fundo redondo atrás, assim:

No fórum já consegui deixar assim, onde está a vermelho é onde desejo os 3 ícones em efeito hover:

O efeito de hover apenas quero deixar as iniciais das redes sociais mais a seta de voltar ao topo em branco e depois de passar o mouse em cima mudar para outra cor.

Deixo os códigos com as alterações já feitas:

.CSS:
Código:
/* Footer */
#subscribers a{color: #ccc !important}
#subscribers a:hover{color: #D69200 !important}
#subscribers {margin-top: -9px !important} #back-top { top: -12px !important; }
.num3 h3:before {font-weight: normal !important;}
.num4 h3:before {font-weight: normal !important;}

.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>
<div id='subscribers'>
<div class="num1" id='catalog1'>
<p><font color="#A3AAAE"><font size="3px"><strong>© WEBGRAFIC - Todos os Direitos Reservados</strong></font><br>
Este tema foi construído pelo WEBGRAFIC com a utilização de alguns utilitários<br>dos fóruns WEBTOOLS e WASD a cópia total ou parcial de qualquer conteúdo do fórum é proíbida.<br></p></div>
</div><style>
  .num1 h3::before {
    content: "\f129 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num2 h3::before {
    content: "\f1e0 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num3 h3::before {
    content: "\f0c1 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num4 h3::before {
    content: "\f1f9 ";
    font-family: "fontawesome";
font-weight: 100;
}
#subscribers h3 {
    padding: 10px 10px 0px 0px;
    color: #C3C3C3;
    display: block;
    font-family: "Trebuchet MS","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    border-bottom: 1px solid;
    margin-bottom: 5px;
}
 
#catalog3 {
float: left;
margin-left: 20px;
padding-right: 50px;
height: 100px;}
#catalog2 {
float: left;
margin-left: 20px;
padding-right: 50px;
height: 100px;
}
#catalog1 {
float: left;
padding-right: 50px;
height: 100px;
}
#subscribers {
    height: 100px;
    width: auto;
    padding: 20px;
    background: #2A2C33;
    border-top: 3px solid #D69200;
}
#subbox {
padding: 10px;
border: 1px solid #D2D2D3;
color: #d2d2d2;
}
#subbutton {
padding: 10px;
color: #fff;
font-weight: 800;
background: #0091d6;
}
    div#catalog2 img {
  width: 241px;
  height: 100px;
    }
  .teammembers { padding: 0px; margin: 0px; }
    ul.teammembers li img { height: 60px;
width: 63px;
border-radius: 50%;
-moz-border-radius: 50%;}
ul.teammembers li {
display: block;
padding: 0px;
margin: 0px;
float: left;
margin-right: 22px;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
ul.teammembers li img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);}
.post-body h2 {
font-size: 30px;
font-weight: 600;
color: #0091d6;
margin: 0px;
line-height: 35px;
}
</style>
<!-- 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>

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2608
Pontos Ativos : 5022

http://suportedesign.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em Sex 1 Jan - 11:50

UP!

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2608
Pontos Ativos : 5022

http://suportedesign.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em Sex 1 Jan - 13:46

Irei fazê-lo, em breve postarei aqui.

Sir_Undead
Nível 8

Masculino
Inscrito dia : 06/01/2011
Mensagens : 138
Pontos Ativos : 2306

http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em Sex 1 Jan - 14:28

Está pronto, agora gostaria de saber o que quer que aconteça quando clique nos botões das redes sociais. Quer que abra sua página no facebook? Ou quer que seja um botão para compartilhar o fórum?
Sobre o botão para o topo, terá que haver um JS nele, vou providenciar.


Código, adicionei o CSS junto à estrutura uma vez que já havia lá.
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>
<div id='subscribers'>
<div class="num1" id='catalog1'>
<p><font color="#A3AAAE"><font size="3px"><strong>© WEBGRAFIC - Todos os Direitos Reservados</strong></font><br>
Este tema foi construído pelo WEBGRAFIC com a utilização de alguns utilitários<br>dos fóruns WEBTOOLS e WASD a cópia total ou parcial de qualquer conteúdo do fórum é proíbida.</p></div>
<div id='icones-footer'>
<ul>
<li><img title="Topo" src="http://i.imgur.com/mXI7R1h.png" /></li>
<li><img title="Facebook" src="http://i.imgur.com/6ZSU5Eq.png" /></li>
<li><img title="Twitter" src="http://i.imgur.com/su8656w.png" /></li>
</ul>
</div>
</div><style>
#icones-footer{
list-style-type: none;
float: right;
margin-right: 10%;
margin-top: 23px;
}
#icones-footer li {
float: left;
display: inline-block;
margin-left: 10px;
}
#icones-footer img{
   width:47px;   
   opacity: 0.8;
   transition: 0.3s;
}
#icones-footer img:hover{
   opacity:1.0;
}
  .num1 h3::before {
    content: "\f129 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num2 h3::before {
    content: "\f1e0 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num3 h3::before {
    content: "\f0c1 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num4 h3::before {
    content: "\f1f9 ";
    font-family: "fontawesome";
font-weight: 100;
}
#subscribers h3 {
    padding: 10px 10px 0px 0px;
    color: #C3C3C3;
    display: block;
    font-family: "Trebuchet MS","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    border-bottom: 1px solid;
    margin-bottom: 5px;
}
 
#catalog3 {
float: left;
margin-left: 20px;
padding-right: 50px;
height: 100px;}
#catalog2 {
float: left;
margin-left: 20px;
padding-right: 50px;
height: 100px;
}
#catalog1 {
float: left;
padding-right: 50px;
height: 100px;
}
#subscribers {
    height: 100px;
    width: auto;
    padding: 20px;
    background: #2A2C33;
    border-top: 3px solid #D69200;
}
#subbox {
padding: 10px;
border: 1px solid #D2D2D3;
color: #d2d2d2;
}
#subbutton {
padding: 10px;
color: #fff;
font-weight: 800;
background: #0091d6;
}
    div#catalog2 img {
  width: 241px;
  height: 100px;
    }
  .teammembers { padding: 0px; margin: 0px; }
    ul.teammembers li img { height: 60px;
width: 63px;
border-radius: 50%;
-moz-border-radius: 50%;}
ul.teammembers li {
display: block;
padding: 0px;
margin: 0px;
float: left;
margin-right: 22px;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
ul.teammembers li img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);}
.post-body h2 {
font-size: 30px;
font-weight: 600;
color: #0091d6;
margin: 0px;
line-height: 35px;
}
</style>
<!-- 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>

Sir_Undead
Nível 8

Masculino
Inscrito dia : 06/01/2011
Mensagens : 138
Pontos Ativos : 2306

http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em Sex 1 Jan - 15:22

Apenas queria os botões a ir para a páginas de rede sociais. Não consegue deixar os botões como na print que mostrei?

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2608
Pontos Ativos : 5022

http://suportedesign.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em Sex 1 Jan - 15:24

Consigo sim, deixei essas por que achei melhor. Posso pegar exatamente as mesmas imagens aliás.
E sobre as redes sociais, mande os links que eu já coloco.

Sir_Undead
Nível 8

Masculino
Inscrito dia : 06/01/2011
Mensagens : 138
Pontos Ativos : 2306

http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em Sex 1 Jan - 16:22

Está tudo pronto e arrumado. Coloquei meu facebook/twitter altere ali depois tudo bem?



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>
<div id='subscribers'>
<div class="num1" id='catalog1'>
<p><font color="#A3AAAE"><font size="4px"><strong>© WEBGRAFIC - Todos os Direitos Reservados</strong></font><br>
<font size="3px">Este tema foi construído pelo WEBGRAFIC com a utilização de alguns utilitários<br>dos fóruns WEBTOOLS e WASD a cópia total ou parcial de qualquer conteúdo do fórum é proíbida.</font></p></div>
<div id='icones-footer'>
<ul>
<li class="seta-icone" title="Topo da Página" onclick="$('html,body').animate({scrollTop: $('#top').offset().top}, 2000);"></li>
<a href="https://facebook.com/Undeath5" target="_blank"><li title="Facebook" class="facebook-icone"></li></a>
<a href="https://twitter.com/Undeath5" target="_blank"><li title="Twitter" class="twitter-icone"></li></a>
</ul>
</div>
</div><style>
#icones-footer{
list-style-type: none;
float: right;
margin-right: 3%;
margin-top: 21px;
}
#icones-footer li {
float: left;
display: inline-block;
margin-left: 10px;
width:65px;
opacity: 0.8;
transition: 0.3s;
height:65px;
}
#icones-footer li:hover{
 opacity:1.0;
}
seta-icone {
 background: url("http://i.imgur.com/EHqULq8.png") no-repeat;
}
seta-icone:hover {
 background: url("http://i.imgur.com/0EWJ1P2.png") no-repeat;
}
.twitter-icone {
 background: url("http://i.imgur.com/QwfDWJq.png") no-repeat;
}
.twitter-icone:hover {
 background: url("http://i.imgur.com/3zH671m.png") no-repeat;
}
.facebook-icone {
 background: url("http://i.imgur.com/9EY0HOc.png") no-repeat;
}
.facebook-icone:hover {
 background: url('http://i.imgur.com/Pjznaby.png');
}
  .num1 h3::before {
    content: "\f129 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num2 h3::before {
    content: "\f1e0 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num3 h3::before {
    content: "\f0c1 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num4 h3::before {
    content: "\f1f9 ";
    font-family: "fontawesome";
font-weight: 100;
}
#subscribers h3 {
    padding: 10px 10px 0px 0px;
    color: #C3C3C3;
    display: block;
    font-family: "Trebuchet MS","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    border-bottom: 1px solid;
    margin-bottom: 5px;
}
 
#catalog3 {
float: left;
margin-left: 20px;
padding-right: 50px;
height: 100px;}
#catalog2 {
float: left;
margin-left: 20px;
padding-right: 50px;
height: 100px;
}
#catalog1 {
    float: left;
    padding-right: 50px;
    height: 100px;
    margin-left: 3%;
    margin-top: 21px;
}
#subscribers {
    height: 100px;
    width: auto;
    padding: 20px;
    background: #2A2C33;
    border-top: 3px solid #D69200;
}
#subbox {
padding: 10px;
border: 1px solid #D2D2D3;
color: #d2d2d2;
}
#subbutton {
padding: 10px;
color: #fff;
font-weight: 800;
background: #0091d6;
}
    div#catalog2 img {
  width: 241px;
  height: 100px;
    }
  .teammembers { padding: 0px; margin: 0px; }
    ul.teammembers li img { height: 60px;
width: 63px;
border-radius: 50%;
-moz-border-radius: 50%;}
ul.teammembers li {
display: block;
padding: 0px;
margin: 0px;
float: left;
margin-right: 22px;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
ul.teammembers li img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);}
.post-body h2 {
font-size: 30px;
font-weight: 600;
color: #0091d6;
margin: 0px;
line-height: 35px;
}
</style>
<!-- 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>

Sir_Undead
Nível 8

Masculino
Inscrito dia : 06/01/2011
Mensagens : 138
Pontos Ativos : 2306

http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em Sex 1 Jan - 16:58

Só não entendi uma coisa, o fórum é sobre programação e tudo mais e você não sabia fazer algo tão simples?

Sir_Undead
Nível 8

Masculino
Inscrito dia : 06/01/2011
Mensagens : 138
Pontos Ativos : 2306

http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em Sex 1 Jan - 18:54

O tamanho ficou muito grande veja:
- http://webgrafic.forumeiro.com/

Enquanto ao fórum ser de Programação isso é com outras pessoas que de momento não estão disponíveis, a minha área é design, e tem outros usuários que são de programação...

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2608
Pontos Ativos : 5022

http://suportedesign.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em Sex 1 Jan - 22:22

Está exatamente como na imagem.... Achei que era pra ficar grande quando disse que queria igual a imagem. O primeiro jeito que fiz eu não deixei tão grande.
Tenta esse ai. E a seta você que removeu?
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>
<div id='subscribers'>
<div class="num1" id='catalog1'>
<p><font color="#A3AAAE"><font size="3px"><strong>© WEBGRAFIC - Todos os Direitos Reservados</strong></font><br>
Este tema foi construído pelo WEBGRAFIC com a utilização de alguns utilitários<br>dos fóruns WEBTOOLS e WASD a cópia total ou parcial de qualquer conteúdo do fórum é proíbida.</p></div>
<div id='icones-footer'>
<ul>
<li class="seta-icone" title="Topo da Página" onclick="$('html,body').animate({scrollTop: $('#top').offset().top}, 2000);"></li>
<a href="https://facebook.com/Undeath5" target="_blank"><li title="Facebook" class="facebook-icone"></li></a>
<a href="https://twitter.com/Undeath5" target="_blank"><li title="Twitter" class="twitter-icone"></li></a>
</ul>
</div>
</div><style>
#icones-footer{
list-style-type: none;
float: right;
margin-right: 3%;
margin-top: 21px;
}
#icones-footer li {
float: left;
display: inline-block;
margin-left: 10px;
width:49px;
opacity: 0.8;
transition: 0.3s;
height:49px;
}
#icones-footer li:hover{
 opacity:1.0;
}
seta-icone {
 background: url("http://i.imgur.com/EHqULq8.png") no-repeat;
}
seta-icone:hover {
 background: url("http://i.imgur.com/0EWJ1P2.png") no-repeat;
}
.twitter-icone {
 background: url("http://i.imgur.com/QwfDWJq.png") no-repeat;
}
.twitter-icone:hover {
 background: url("http://i.imgur.com/3zH671m.png") no-repeat;
}
.facebook-icone {
 background: url("http://i.imgur.com/9EY0HOc.png") no-repeat;
}
.facebook-icone:hover {
 background: url('http://i.imgur.com/Pjznaby.png');
}
  .num1 h3::before {
    content: "\f129 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num2 h3::before {
    content: "\f1e0 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num3 h3::before {
    content: "\f0c1 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num4 h3::before {
    content: "\f1f9 ";
    font-family: "fontawesome";
font-weight: 100;
}
#subscribers h3 {
    padding: 10px 10px 0px 0px;
    color: #C3C3C3;
    display: block;
    font-family: "Trebuchet MS","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    border-bottom: 1px solid;
    margin-bottom: 5px;
}
 
#catalog3 {
float: left;
margin-left: 20px;
padding-right: 50px;
height: 100px;}
#catalog2 {
float: left;
margin-left: 20px;
padding-right: 50px;
height: 100px;
}
#catalog1 {
    float: left;
    padding-right: 50px;
    height: 100px;
    margin-left: 3%;
    margin-top: 21px;
}
#subscribers {
    height: 100px;
    width: auto;
    padding: 20px;
    background: #2A2C33;
    border-top: 3px solid #D69200;
}
#subbox {
padding: 10px;
border: 1px solid #D2D2D3;
color: #d2d2d2;
}
#subbutton {
padding: 10px;
color: #fff;
font-weight: 800;
background: #0091d6;
}
    div#catalog2 img {
  width: 241px;
  height: 100px;
    }
  .teammembers { padding: 0px; margin: 0px; }
    ul.teammembers li img { height: 60px;
width: 63px;
border-radius: 50%;
-moz-border-radius: 50%;}
ul.teammembers li {
display: block;
padding: 0px;
margin: 0px;
float: left;
margin-right: 22px;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
ul.teammembers li img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);}
.post-body h2 {
font-size: 30px;
font-weight: 600;
color: #0091d6;
margin: 0px;
line-height: 35px;
}
</style>
<!-- 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>

Sir_Undead
Nível 8

Masculino
Inscrito dia : 06/01/2011
Mensagens : 138
Pontos Ativos : 2306

http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em Sex 1 Jan - 22:45

Sim queria igual a imagem mas como disse também, era apenas um exemplo, será que poderia me dizer onde posso diminuir o tamanho? E os ícones aparecem cortados e não tirei a seta apenas não está a aparecer.

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2608
Pontos Ativos : 5022

http://suportedesign.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em Sex 1 Jan - 23:19

Ah desculpe esqueci de mudar o tamanho das imagens e fazer upload.
Já diminui. O texto está bom?
Veja como fica agora.
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>
<div id='subscribers'>
<div class="num1" id='catalog1'>
<p><font color="#A3AAAE"><font size="3px"><strong>© WEBGRAFIC - Todos os Direitos Reservados</strong></font><br>
Este tema foi construído pelo WEBGRAFIC com a utilização de alguns utilitários<br>dos fóruns WEBTOOLS e WASD a cópia total ou parcial de qualquer conteúdo do fórum é proíbida.</p></div>
<div id='icones-footer'>
<ul>
<li class="seta-icone" title="Topo da Página" onclick="$('html,body').animate({scrollTop: $('#top').offset().top}, 2000);"></li>
<a href="https://facebook.com/Undeath5" target="_blank"><li title="Facebook" class="facebook-icone"></li></a>
<a href="https://twitter.com/Undeath5" target="_blank"><li title="Twitter" class="twitter-icone"></li></a>
</ul>
</div>
</div><style>
#icones-footer{
list-style-type: none;
float: right;
margin-right: 3%;
margin-top: 21px;
}
#icones-footer li {
float: left;
display: inline-block;
margin-left: 10px;
width:49px;
opacity: 0.8;
transition: 0.3s;
height:49px;
}
#icones-footer li:hover{
 opacity:1.0;
}
.seta-icone {
 background: url("http://i.imgur.com/cxhUelO.png") no-repeat;
}
.seta-icone:hover {
 background: url("http://i.imgur.com/phMFS9N.png") no-repeat;
}
.twitter-icone {
 background: url("http://i.imgur.com/KqHAp6d.png") no-repeat;
}
.twitter-icone:hover {
 background: url("http://i.imgur.com/KqHAp6d.png") no-repeat;
}
.facebook-icone {
 background: url("http://i.imgur.com/JhHZbmy.png") no-repeat;
}
.facebook-icone:hover {
 background: url('http://i.imgur.com/e1Kn1Zr.png');
}
  .num1 h3::before {
    content: "\f129 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num2 h3::before {
    content: "\f1e0 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num3 h3::before {
    content: "\f0c1 ";
    font-family: "fontawesome";
font-weight: 100;
}
.num4 h3::before {
    content: "\f1f9 ";
    font-family: "fontawesome";
font-weight: 100;
}
#subscribers h3 {
    padding: 10px 10px 0px 0px;
    color: #C3C3C3;
    display: block;
    font-family: "Trebuchet MS","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    border-bottom: 1px solid;
    margin-bottom: 5px;
}
 
#catalog3 {
float: left;
margin-left: 20px;
padding-right: 50px;
height: 100px;}
#catalog2 {
float: left;
margin-left: 20px;
padding-right: 50px;
height: 100px;
}
#catalog1 {
    float: left;
    padding-right: 50px;
    height: 100px;
    margin-left: 3%;
    margin-top: 21px;
}
#subscribers {
    height: 100px;
    width: auto;
    padding: 20px;
    background: #2A2C33;
    border-top: 3px solid #D69200;
}
#subbox {
padding: 10px;
border: 1px solid #D2D2D3;
color: #d2d2d2;
}
#subbutton {
padding: 10px;
color: #fff;
font-weight: 800;
background: #0091d6;
}
    div#catalog2 img {
  width: 241px;
  height: 100px;
    }
  .teammembers { padding: 0px; margin: 0px; }
    ul.teammembers li img { height: 60px;
width: 63px;
border-radius: 50%;
-moz-border-radius: 50%;}
ul.teammembers li {
display: block;
padding: 0px;
margin: 0px;
float: left;
margin-right: 22px;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
ul.teammembers li img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);}
.post-body h2 {
font-size: 30px;
font-weight: 600;
color: #0091d6;
margin: 0px;
line-height: 35px;
}
</style>
<!-- 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>

Sir_Undead
Nível 8

Masculino
Inscrito dia : 06/01/2011
Mensagens : 138
Pontos Ativos : 2306

http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em Sex 1 Jan - 23:24

Gostava de diminuir mais, mas podes dizer na parte do códigos onde posso fazer isso?

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2608
Pontos Ativos : 5022

http://suportedesign.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em Sab 2 Jan - 6:13

Cole este código para que funcione.
Para diminuir, acesse #icones-footer li
Em width e height você coloca a mesma quantidade de px. Creio que 35px ficará bom.
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>
    <div id='subscribers'>
    <div class="num1" id='catalog1'>
    <p><font color="#A3AAAE"><font size="3px"><strong>© WEBGRAFIC - Todos os Direitos Reservados</strong></font><br>
    Este tema foi construído pelo WEBGRAFIC com a utilização de alguns utilitários<br>dos fóruns WEBTOOLS e WASD a cópia total ou parcial de qualquer conteúdo do fórum é proíbida.</p></div>
    <div id='icones-footer'>
    <ul>
    <li class="seta-icone" title="Topo da Página" onclick="$('html,body').animate({scrollTop: $('#top').offset().top}, 2000);"></li>
    <a href="https://facebook.com/Undeath5" target="_blank"><li title="Facebook" class="facebook-icone"></li></a>
    <a href="https://twitter.com/Undeath5" target="_blank"><li title="Twitter" class="twitter-icone"></li></a>
    </ul>
    </div>
    </div><style>
    #icones-footer{
    list-style-type: none;
    float: right;
    margin-right: 3%;
    margin-top: 21px;
    }
    #icones-footer li {
    float: left;
    display: inline-block;
    margin-left: 10px;
    width:35px; /* MUDE O TAMANHO AQUI */
    height:35px; /*  E AQUI TAMBÉM */
    opacity: 0.8;
    transition: 0.3s;
    background-size: contain;
    }
    #icones-footer li:hover{
     opacity:1.0;
    }
    .seta-icone {
     background: url("http://i.imgur.com/cxhUelO.png") no-repeat;
    }
    .seta-icone:hover {
     background: url("http://i.imgur.com/phMFS9N.png") no-repeat;
    }
    .twitter-icone {
     background: url("http://i.imgur.com/KqHAp6d.png") no-repeat;
    }
    .twitter-icone:hover {
     background: url("http://i.imgur.com/KqHAp6d.png") no-repeat;
    }
    .facebook-icone {
     background: url("http://i.imgur.com/JhHZbmy.png") no-repeat;
    }
    .facebook-icone:hover {
     background: url('http://i.imgur.com/e1Kn1Zr.png');
    }
      .num1 h3::before {
        content: "\f129 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    .num2 h3::before {
        content: "\f1e0 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    .num3 h3::before {
        content: "\f0c1 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    .num4 h3::before {
        content: "\f1f9 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    #subscribers h3 {
        padding: 10px 10px 0px 0px;
        color: #C3C3C3;
        display: block;
        font-family: "Trebuchet MS","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 17px;
        text-transform: uppercase;
        border-bottom: 1px solid;
        margin-bottom: 5px;
    }
    
    #catalog3 {
    float: left;
    margin-left: 20px;
    padding-right: 50px;
    height: 100px;}
    #catalog2 {
    float: left;
    margin-left: 20px;
    padding-right: 50px;
    height: 100px;
    }
    #catalog1 {
        float: left;
        padding-right: 50px;
        height: 100px;
        margin-left: 3%;
        margin-top: 21px;
    }
    #subscribers {
        height: 100px;
        width: auto;
        padding: 20px;
        background: #2A2C33;
        border-top: 3px solid #D69200;
    }
    #subbox {
    padding: 10px;
    border: 1px solid #D2D2D3;
    color: #d2d2d2;
    }
    #subbutton {
    padding: 10px;
    color: #fff;
    font-weight: 800;
    background: #0091d6;
    }
        div#catalog2 img {
      width: 241px;
      height: 100px;
        }
      .teammembers { padding: 0px; margin: 0px; }
        ul.teammembers li img { height: 60px;
    width: 63px;
    border-radius: 50%;
    -moz-border-radius: 50%;}
    ul.teammembers li {
    display: block;
    padding: 0px;
    margin: 0px;
    float: left;
    margin-right: 22px;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }
    ul.teammembers li img:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);}
    .post-body h2 {
    font-size: 30px;
    font-weight: 600;
    color: #0091d6;
    margin: 0px;
    line-height: 35px;
    }
    </style>
    <!-- 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>

Sir_Undead
Nível 8

Masculino
Inscrito dia : 06/01/2011
Mensagens : 138
Pontos Ativos : 2306

http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em Sab 2 Jan - 16:51

Esta quase já estive a fazer umas alterações até deixo aqui o código:
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>
    <div id='subscribers'>
    <div class="num1" id='catalog1'>
    <p><font color="#A3AAAE"><font size="3px"><strong>© WEBGRAFIC - Todos os Direitos Reservados</strong></font><br>
    Este tema foi construído pelo WEBGRAFIC com a utilização de alguns utilitários<br>dos fóruns WEBTOOLS e WASD a cópia total ou parcial de qualquer conteúdo do fórum é proíbida.</p></div>
    <div id='icones-footer'>
    <ul>
    <li class="seta-icone" title="Topo da Página" onclick="$('html,body').animate({scrollTop: $('#top').offset().top}, 2000);"></li>
    <a href="https://facebook.com/Undeath5" target="_blank"><li title="Facebook" class="facebook-icone"></li></a>
    <a href="https://twitter.com/Undeath5" target="_blank"><li title="Twitter" class="twitter-icone"></li></a>
    </ul>
    </div>
    </div><style>
    #icones-footer{
    list-style-type: none;
    float: right;
    margin-right: 3%;
    }
    #icones-footer li {
    float: left;
    display: inline-block;
    margin-left: 10px;
    width:35px; /* MUDE O TAMANHO AQUI */
    height:35px; /*  E AQUI TAMBÉM */
    opacity: 0.8;
    transition: 0.3s;
    background-size: contain;
    }
    #icones-footer li:hover{
    opacity:1.0;
    }
    .seta-icone {
    background: url("http://i.imgur.com/cxhUelO.png") no-repeat;
    }
    .seta-icone:hover {
    background: url("http://i.imgur.com/phMFS9N.png") no-repeat;
    }
    .twitter-icone {
    background: url("http://i.imgur.com/KqHAp6d.png") no-repeat;
    }
    .twitter-icone:hover {
    background: url("http://i.imgur.com/KqHAp6d.png") no-repeat;
    }
    .facebook-icone {
    background: url("http://i.imgur.com/JhHZbmy.png") no-repeat;
    }
    .facebook-icone:hover {
    background: url('http://i.imgur.com/e1Kn1Zr.png');
    }
      .num1 h3::before {
        content: "\f129 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    .num2 h3::before {
        content: "\f1e0 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    .num3 h3::before {
        content: "\f0c1 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    .num4 h3::before {
        content: "\f1f9 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    #subscribers h3 {
        padding: 10px 10px 0px 0px;
        color: #C3C3C3;
        display: block;
        font-family: "Trebuchet MS","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 17px;
        text-transform: uppercase;
        border-bottom: 1px solid;
        margin-bottom: 5px;
    }
   
    #catalog3 {
    float: left;
    margin-left: 20px;
    padding-right: 50px;
    height: 100px;}
    #catalog2 {
    float: left;
    margin-left: 20px;
    padding-right: 50px;
    height: 100px;
    }
    #catalog1 {
        float: left;
        padding-right: 50px;
        height: 100px;
        margin-left: 3%;
    }
    #subscribers {
        height: 100px;
        width: auto;
        padding: 20px;
        background: #2A2C33;
        border-top: 3px solid #D69200;
    }
    #subbox {
    padding: 10px;
    border: 1px solid #D2D2D3;
    color: #d2d2d2;
    }
    #subbutton {
    padding: 10px;
    color: #fff;
    font-weight: 800;
    background: #0091d6;
    }
        div#catalog2 img {
      width: 241px;
      height: 100px;
        }
      .teammembers { padding: 0px; margin: 0px; }
        ul.teammembers li img { height: 60px;
    width: 63px;
    border-radius: 50%;
    -moz-border-radius: 50%;}
    ul.teammembers li {
    display: block;
    padding: 0px;
    margin: 0px;
    float: left;
    margin-right: 22px;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }
    ul.teammembers li img:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);}
    .post-body h2 {
    font-size: 30px;
    font-weight: 600;
    color: #0091d6;
    margin: 0px;
    line-height: 35px;
    }
    </style>
    <!-- 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>

Queria diminuir mais um pouco o tamanho das letras e veja os traços a vermelho queria colocar mais para dentro o texto e os ícones:

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2608
Pontos Ativos : 5022

http://suportedesign.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por RafaelS. em Sab 2 Jan - 19:02

Olá!^

Troque 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;|&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='subscribers'>
    <div class="num1" id='catalog1'>
    <p><font color="#A3AAAE"><font size="3px"><strong>© WEBGRAFIC - Todos os Direitos Reservados</strong></font><br>
    Este tema foi construído pelo WEBGRAFIC com a utilização de alguns utilitários<br>dos fóruns WEBTOOLS e WASD a cópia total ou parcial de qualquer conteúdo do fórum é proíbida.</p></div>
    <div id='icones-footer'>
    <ul>
    <li class="seta-icone" title="Topo da Página" onclick="$('html,body').animate({scrollTop: $('#top').offset().top}, 2000);"></li>
    <a href="https://facebook.com/Undeath5" target="_blank"><li title="Facebook" class="facebook-icone"></li></a>
    <a href="https://twitter.com/Undeath5" target="_blank"><li title="Twitter" class="twitter-icone"></li></a>
    </ul>
    </div>
    </div><style>
    #icones-footer{
    list-style-type: none;
    float: right;
    margin-right: 3%;
    }
    #icones-footer li {
    float: left;
    display: inline-block;
    margin-left: 10px;
    width:35px; /* MUDE O TAMANHO AQUI */
    height:35px; /*  E AQUI TAMBÉM */
    opacity: 0.8;
    transition: 0.3s;
    background-size: contain;
    }
    #icones-footer li:hover{
    opacity:1.0;
    }
    .seta-icone {
    background: url("http://i.imgur.com/cxhUelO.png") no-repeat;
    }
    .seta-icone:hover {
    background: url("http://i.imgur.com/phMFS9N.png") no-repeat;
    }
    .twitter-icone {
    background: url("http://i.imgur.com/KqHAp6d.png") no-repeat;
    }
    .twitter-icone:hover {
    background: url("http://i.imgur.com/KqHAp6d.png") no-repeat;
    }
    .facebook-icone {
    background: url("http://i.imgur.com/JhHZbmy.png") no-repeat;
    }
    .facebook-icone:hover {
    background: url('http://i.imgur.com/e1Kn1Zr.png');
    }
      .num1 h3::before {
        content: "\f129 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    .num2 h3::before {
        content: "\f1e0 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    .num3 h3::before {
        content: "\f0c1 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    .num4 h3::before {
        content: "\f1f9 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    #subscribers h3 {
        padding: 10px 10px 0px 0px;
        color: #C3C3C3;
        display: block;
        font-family: "Trebuchet MS","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 17px;
        text-transform: uppercase;
        border-bottom: 1px solid;
        margin-bottom: 5px;
    }
   
    #catalog3 {
    float: left;
    margin-left: 20px;
    padding-right: 50px;
    height: 100px;}
    #catalog2 {
    float: left;
    margin-left: 20px;
    padding-right: 50px;
    height: 100px;
    }
    #catalog1 {
        float: left;
        padding-right: 50px;
        height: 100px;
        margin-left: 3%;
    }
    #subscribers {
        height: 100px;
        width: auto;
        padding: 20px 91px;
        background: #2A2C33;
        border-top: 3px solid #D69200;
    }
    #subbox {
    padding: 10px;
    border: 1px solid #D2D2D3;
    color: #d2d2d2;
    }
    #subbutton {
    padding: 10px;
    color: #fff;
    font-weight: 800;
    background: #0091d6;
    }
        div#catalog2 img {
      width: 241px;
      height: 100px;
        }
      .teammembers { padding: 0px; margin: 0px; }
        ul.teammembers li img { height: 60px;
    width: 63px;
    border-radius: 50%;
    -moz-border-radius: 50%;}
    ul.teammembers li {
    display: block;
    padding: 0px;
    margin: 0px;
    float: left;
    margin-right: 22px;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }
    ul.teammembers li img:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);}
    .post-body h2 {
    font-size: 30px;
    font-weight: 600;
    color: #0091d6;
    margin: 0px;
    line-height: 35px;
    }
    </style>
    <!-- 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>

RafaelS.
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3098
Pontos Ativos : 4876

http://maisforum.forumeiros.com

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em Sab 2 Jan - 19:17

Falta colocar o texto mais pequeno e se reparares o footer tem muito espaço para baixo é possível encolher?

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2608
Pontos Ativos : 5022

http://suportedesign.forumeiros.com/
  • 0

Resolvido Re: Construção de footer

Mensagem por RafaelS. em Sab 2 Jan - 23:21

Olá!

Troque 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;|&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='subscribers'>
    <div class="num1" id='catalog1'>
    <p><font color="#A3AAAE"><font size="3px"><strong>© WEBGRAFIC - Todos os Direitos Reservados</strong></font><br>
    Este tema foi construído pelo WEBGRAFIC com a utilização de alguns utilitários<br>dos fóruns WEBTOOLS e WASD a cópia total ou parcial de qualquer conteúdo do fórum é proíbida.</p></div>
    <div id='icones-footer'>
    <ul>
    <li class="seta-icone" title="Topo da Página" onclick="$('html,body').animate({scrollTop: $('#top').offset().top}, 2000);"></li>
    <a href="https://facebook.com/Undeath5" target="_blank"><li title="Facebook" class="facebook-icone"></li></a>
    <a href="https://twitter.com/Undeath5" target="_blank"><li title="Twitter" class="twitter-icone"></li></a>
    </ul>
    </div>
    </div><style>
    #icones-footer{
    list-style-type: none;
    float: right;
    margin-right: 3%;
    }
    #icones-footer li {
    float: left;
    display: inline-block;
    margin-left: 10px;
    width:35px; /* MUDE O TAMANHO AQUI */
    height:35px; /*  E AQUI TAMBÉM */
    opacity: 0.8;
    transition: 0.3s;
    background-size: contain;
    }
    #icones-footer li:hover{
    opacity:1.0;
    }
    .seta-icone {
    background: url("http://i.imgur.com/cxhUelO.png") no-repeat;
    }
    .seta-icone:hover {
    background: url("http://i.imgur.com/phMFS9N.png") no-repeat;
    }
    .twitter-icone {
    background: url("http://i.imgur.com/KqHAp6d.png") no-repeat;
    }
    .twitter-icone:hover {
    background: url("http://i.imgur.com/KqHAp6d.png") no-repeat;
    }
    .facebook-icone {
    background: url("http://i.imgur.com/JhHZbmy.png") no-repeat;
    }
    .facebook-icone:hover {
    background: url('http://i.imgur.com/e1Kn1Zr.png');
    }
      .num1 h3::before {
        content: "\f129 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    .num2 h3::before {
        content: "\f1e0 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    .num3 h3::before {
        content: "\f0c1 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    .num4 h3::before {
        content: "\f1f9 ";
        font-family: "fontawesome";
    font-weight: 100;
    }
    #subscribers h3 {
        padding: 10px 10px 0px 0px;
        color: #C3C3C3;
        display: block;
        font-family: "Trebuchet MS","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 17px;
        text-transform: uppercase;
        border-bottom: 1px solid;
        margin-bottom: 5px;
    }
    #catalog1 {
        float: left;
        padding-right: 50px;
        margin-left: 3%;
    }
#subscribers {
    height: 51px;
    width: auto;
    padding: 40px 102px;
    background: #2A2C33;
    border-top: 3px solid #D69200;
}
    #subbox {
    padding: 10px;
    border: 1px solid #D2D2D3;
    color: #d2d2d2;
    }
    #subbutton {
    padding: 10px;
    color: #fff;
    font-weight: 800;
    background: #0091d6;
    }
        div#catalog2 img {
      width: 241px;
      height: 100px;
        }
      .teammembers { padding: 0px; margin: 0px; }
        ul.teammembers li img { height: 60px;
    width: 63px;
    border-radius: 50%;
    -moz-border-radius: 50%;}
    ul.teammembers li {
    display: block;
    padding: 0px;
    margin: 0px;
    float: left;
    margin-right: 22px;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }
    ul.teammembers li img:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);}
    .post-body h2 {
    font-size: 30px;
    font-weight: 600;
    color: #0091d6;
    margin: 0px;
    line-height: 35px;
    }
    </style>
    <!-- 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>

Até mais.

RafaelS.
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3098
Pontos Ativos : 4876

http://maisforum.forumeiros.com

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em Sab 2 Jan - 23:55

Ficou óptimo obrigado!

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2608
Pontos Ativos : 5022

http://suportedesign.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por RafaelS. em Sab 2 Jan - 23:57

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".

RafaelS.
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3098
Pontos Ativos : 4876

http://maisforum.forumeiros.com

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

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5