ArtigosConstrução de footer
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Construção de footer
por IsmaelS. 30.12.15 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 --> | <!-- 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.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Sir_Undead- ***
- Membro desde : 06/01/2011
Mensagens : 138
Pontos : 217 -
Re: Construção de footer
por Sir_Undead 01.01.16 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á.
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 --> | <!-- 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- ***
- Membro desde : 06/01/2011
Mensagens : 138
Pontos : 217 -
Re: Construção de footer
por IsmaelS. 01.01.16 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.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Construção de footer
por Sir_Undead 01.01.16 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.
E sobre as redes sociais, mande os links que eu já coloco.
Sir_Undead- ***
- Membro desde : 06/01/2011
Mensagens : 138
Pontos : 217 -
Re: Construção de footer
por Sir_Undead 01.01.16 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 --> | <!-- 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- ***
- Membro desde : 06/01/2011
Mensagens : 138
Pontos : 217 -
Re: Construção de footer
por Sir_Undead 01.01.16 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- ***
- Membro desde : 06/01/2011
Mensagens : 138
Pontos : 217 -
Re: Construção de footer
por IsmaelS. 01.01.16 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...
- 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.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Construção de footer
por Sir_Undead 01.01.16 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?
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 --> | <!-- 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- ***
- Membro desde : 06/01/2011
Mensagens : 138
Pontos : 217 -
Re: Construção de footer
por IsmaelS. 01.01.16 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.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Construção de footer
por Sir_Undead 01.01.16 23:19
Ah desculpe esqueci de mudar o tamanho das imagens e fazer upload.
Já diminui. O texto está bom?
Veja como fica agora.
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 --> | <!-- 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- ***
- Membro desde : 06/01/2011
Mensagens : 138
Pontos : 217 -
Re: Construção de footer
por IsmaelS. 01.01.16 23:24
Gostava de diminuir mais, mas podes dizer na parte do códigos onde posso fazer isso?
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Construção de footer
por Sir_Undead 02.01.16 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.
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 --> | <!-- 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- ***
- Membro desde : 06/01/2011
Mensagens : 138
Pontos : 217 -
Re: Construção de footer
por IsmaelS. 02.01.16 16:51
Esta quase já estive a fazer umas alterações até deixo aqui o código:
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:
- 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 --> | <!-- 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.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Construção de footer
por RafaelS. 02.01.16 19:02
Olá!^
Troque por este:
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 --> | <!-- 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.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Construção de footer
por IsmaelS. 02.01.16 19:17
Falta colocar o texto mais pequeno e se reparares o footer tem muito espaço para baixo é possível encolher?
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Construção de footer
por RafaelS. 02.01.16 23:21
Olá!
Troque por este:
Até mais.
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 --> | <!-- 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.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Construção de footer
por RafaelS. 02.01.16 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.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Tópicos semelhantesFórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos