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.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Mudar cor da fonte/letra do perfil
Ontem à(s) 10:13 pm por Ketholy123

» Notificação de novas mensagens
Ontem à(s) 08:18 pm por Luiz

» Questão sobre aspeto de blog
Ontem à(s) 08:14 pm por Luiz

» Como mudar a cor e imagem desta caixinha?
Ontem à(s) 07:32 pm por Luiz

» Como fixa a mensagem
Ontem à(s) 06:37 pm por Luiz

» Como remover as mensagens de informação do chatbox
Ontem à(s) 06:36 pm por Luiz

» Slides bugado
Ontem à(s) 06:24 pm por iScroll

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
iScroll
 
Matt Shultz
 
Harleen
 
Ketholy123
 
T1ag0
 
zHugh
 
PlayWillian
 
ranzatti
 
Lecxa
 

Quem está conectado
236 usuários online :: 7 usuários cadastrados, Nenhum Invisível e 229 Visitantes :: 2 Motores de busca

CesarWatsom2, iScroll, soldado, uvmyyvpew, weverson lopes, xDominiC_., zHugh

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

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 30/12/15, 02:31 pm

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.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2951
Pontos Ativos : 4091

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em 01/01/16, 09:50 am

UP!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2951
Pontos Ativos : 4091

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em 01/01/16, 11:46 am

Irei fazê-lo, em breve postarei aqui.
avatar

Sir_Undead
Nível 8

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

Ver perfil do usuário http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em 01/01/16, 12:28 pm

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>
avatar

Sir_Undead
Nível 8

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

Ver perfil do usuário http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em 01/01/16, 01:22 pm

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.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2951
Pontos Ativos : 4091

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em 01/01/16, 01:24 pm

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.
avatar

Sir_Undead
Nível 8

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

Ver perfil do usuário http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em 01/01/16, 02:22 pm

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>
avatar

Sir_Undead
Nível 8

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

Ver perfil do usuário http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em 01/01/16, 02:58 pm

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?
avatar

Sir_Undead
Nível 8

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

Ver perfil do usuário http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em 01/01/16, 04:54 pm

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.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2951
Pontos Ativos : 4091

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em 01/01/16, 08:22 pm

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>
avatar

Sir_Undead
Nível 8

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

Ver perfil do usuário http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em 01/01/16, 08:45 pm

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.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2951
Pontos Ativos : 4091

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em 01/01/16, 09:19 pm

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>
avatar

Sir_Undead
Nível 8

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

Ver perfil do usuário http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em 01/01/16, 09:24 pm

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

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2951
Pontos Ativos : 4091

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por Sir_Undead em 02/01/16, 04:13 am

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>
avatar

Sir_Undead
Nível 8

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

Ver perfil do usuário http://www.heroisdoolimporpg.com https://www.facebook.com//Undeath5

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em 02/01/16, 02:51 pm

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.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2951
Pontos Ativos : 4091

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por Rafael em 02/01/16, 05:02 pm

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>
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3116
Pontos Ativos : 4027

Ver perfil do usuário http://maisforum.forumeiros.com

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em 02/01/16, 05:17 pm

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

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2951
Pontos Ativos : 4091

Ver perfil do usuário http://suporte-design.forumeiros.com/
  • 0

Resolvido Re: Construção de footer

Mensagem por Rafael em 02/01/16, 09:21 pm

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.
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3116
Pontos Ativos : 4027

Ver perfil do usuário http://maisforum.forumeiros.com

Resolvido Re: Construção de footer

Mensagem por IsmaelS. em 02/01/16, 09:55 pm

Ficou óptimo obrigado!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2951
Pontos Ativos : 4091

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Construção de footer

Mensagem por Rafael em 02/01/16, 09:57 pm

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

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

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3116
Pontos Ativos : 4027

Ver perfil do usuário 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