ArtigosEdição no Footer
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Edição no Footer
por iScroll 26.10.17 1:24
Detalhes da questão
Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: ModernBB
Descrição
Bom, não caprichei na imagem pois é apenas uma "demonstração" de como quero, basicamente só iria alterar as cores de fundo de algumas partes, acrescentar uma parte ou outra e mover uma coisa ou outra pra cima e pros lados '-'
Veja o exemplo de como desejo: https://i.imgur.com/fLkNrp9.png
O painel de controle poderia deixar embaixo dos ícones do lado do icone do topo, mas se quiserem deixar isso ai eu faço tranquilo.
Ficarei no aguardo.
Obs: por incrivel que pareça, eu buguei tudo ao tentar fazer audsahduashsd
Overall:
- 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 />
</div>
{PROTECT_FOOTER}
</div>
</div>
</div>
</div>
<center><div class="clear"></div><div class="footer-row"><hr>
<span class="adm-painel-ultimate"><p class="center">{ADMIN_LINK}</p></span>
<span class="copy-ultimate">© Copyright 2017 Ultimate Life RP | Todos os Direitos Reservados</span>
<a id="copy-youtube" href="https://www.youtube.com/user/BrasilPlayUltimateSA"><span class="copy-youtube"><i class="fa fa-youtube-play"></i></span>
<a id="copy-facebook" href="#"><span class="copy-facebook"><i class="fa fa-facebook-square"></i></span>
<div id="footerBackToTop"></div></div></div></div></div></center>
<!-- 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 = 'https://{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>
<div id="page-footer-ultimate" itemscope itemtype="http://schema.org/Review"><span style="display: none !important;" itemprop="author" itemscope itemtype="http://schema.org/Person"><span style="display: none !important;" itemprop="name"></span></span>
<div id="forum" class="footer-container" itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing">
<div class="footer-row">
<div class="ultimatelife"><a href="/forum" class=""><img src="http://i.imgur.com/gTGtEm4.png" media-simple="true" class=""></a> </div></div>
<div class="footer-col"><strong class="footer-title" itemprop="name">Missão</strong><ul class="footer-list"><li><span class="text-ultimate1">Somos um servidor para criar diversão e entretenimento entre os jogadores, visando sempre o melhor para a diversão de todos.</span></li></ul></div>
<div class="footer-col"><strong class="footer-title">Visão</strong><ul class="footer-list"><li><span class="text-ultimate1">Criar uma rede de jogos onde a diversão venha sempre em primeiro lugar.</span></li></ul></div>
<div class="footer-col"><strong class="footer-title">Ouvidoria</strong><ul class="footer-list"><li><a href="/f6-denuncias" target="_blank" data-original-title="Denúncias" itemprop="sameAs">Denúncias</a></li><li><a href="/f130-revisao-de-punicao" target="_blank" data-original-title="Revisões" itemprop="sameAs">Revisões de Punição</a></li><li><a href="/f8-duvidas" target="_blank" data-original-title="Dúvidas" itemprop="sameAs">Dúvidas</a></li><li><a href="/f14-problemas-com-a-conta" target="_blank" data-original-title="Problemas com a conta" itemprop="sameAs">Problemas com a conta</a></li><li><a href="/h47-formulario-de-queixas" target="_blank" data-original-title="Queixas" itemprop="sameAs">Fazer Queixas</a></li></ul></div>
<div class="footer-col"><strong class="footer-title">Player</strong><ul class="footer-list"><li><a href="/f51-apresentacoes" target="_blank">Apresentações</a></li><span class="gensmall"></span><li><a href="f28-discussoes-gerais" target="_blank">Discurssões</a></li><li><a name="bottom" href="/f10-votacoes" target="_blank">Votações</a></li><li><a name="bottom" href="#" rel="nofollow">Doar</a></li><style>#pun-about {display:none;}</style>
<!-- BEGIN cookies_alert -->
<script type="text/javascript" src="https://illiweb.com/rs3/29/frm/cookiechoices.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {
cookieChoices.showCookieConsentBar("Ao continuar a navegação, você concorda com a utilização de serviços de terceiros que podem instalar cookies.",
"Ok", "Saiba mais", "/faq");
});
</script>
<!-- END cookies_alert --><li></li></ul></div></div><div class="clear"></div></div></a></div></div></div></div></div></div></div></div><div class="footer-row"><div class="footer-copyright">
<script type="text/javascript">//<![CDATA[
fa_endpage();//]]></script></body></html>
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Re: Edição no Footer
por Luiz 26.10.17 16:13
O senhor pode colar o template overall_footer_end padrão?
Não vejo razão em usar este já que iremos reconstruir o footer.
Não vejo razão em usar este já que iremos reconstruir o footer.
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Edição no Footer
por iScroll 26.10.17 16:28
- 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>
<ul>
<li>
<!-- END html_validation -->
</li>
</ul>
<!-- BEGIN switch_footer_links -->
<ul class="footerbar-user">
<li><i class="ion-clock"></i>{CURRENT_TIME}</li>
<!-- BEGIN footer_link -->
<li class="rightside">
<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>
</li>
<!-- END footer_link -->
</ul>
<!-- END switch_footer_links -->
</div>
<div class="copyright">
<div class="wrap">
<div class="copyright-body">
{ADMIN_LINK}
</div>
</div>
</div>
</div>
{PROTECT_FOOTER}
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(window).scroll(function() {
var header_top = $('#headerbar-top');
if (header_top.hasClass('w-toolbar')) {
if ($(window).scrollTop() >= 42) {
header_top.addClass('is-sticky');
} else {
header_top.removeClass('is-sticky');
}
} else {
if ($(window).scrollTop() >= 1) {
header_top.addClass('is-sticky');
} else {
header_top.removeClass('is-sticky');
}
}
});
});
//]]>
</script>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready( function() {
$('div.fb-login-button, span.fb-login-button').attr({
"data-scope": "{switch_facebook_login.FB_SCOPE}",
"data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
"data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
"data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
"data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
});
$('div.fb-login-button, span.fb-login-button').each(function() {
if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
$(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
}
if($(this).html() == '') {
$(this).html('{switch_facebook_login.FB_LABEL}');
}
});
FB.init({
"appId" : "{switch_facebook_login.FB_APP_ID}",
"cookie" : {switch_facebook_login.FB_COOKIE},
"xfbml" : {switch_facebook_login.FB_XFBML},
"oauth" : {switch_facebook_login.FB_OAUTH},
"version" : "{switch_facebook_login.FB_VERSION}"
});
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
function onLoginFB() {
window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
}
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<script type="text/javascript">
$(document).ready( function() {
$('div.ti-connect, span.ti-connect').attr({
"data-loc": "{switch_topicit_connect.TOPICIT_URL}",
"data-login": "{switch_topicit_connect.BOARD_LOGIN}",
"data-version": "{switch_topicit_connect.TOPICIT_VERSION}",
"data-lang": "{switch_topicit_connect.BOARD_LANG}"
});
(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 = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'topicit-connect'));
});
</script>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
fa_endpage();
//]]>
</script>
</body>
</html>
Prefira deixar do outro jeito para ninguém ter acesso aos códigos gerais, mas enfim... Vamos nessa
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Re: Edição no Footer
por Luiz 27.10.17 17:07
Troque por este:
Seria legal não remover a atribuição.
Edit:
Uma pequena correção:
- Código:
--- Edit ---
Seria legal não remover a atribuição.
Edit:
Uma pequena correção:
- 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>
<ul>
<li>
<!-- END html_validation -->
</li>
</ul>
<!-- BEGIN switch_footer_links -->
<ul class="footerbar-user">
<li><i class="ion-clock"></i>{CURRENT_TIME}</li>
<!-- BEGIN footer_link -->
<li class="rightside">
<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>
</li>
<!-- END footer_link -->
</ul>
<!-- END switch_footer_links -->
</div>
<div class="copyright">
<div class="wrap">
<div class="copyright-body">
{ADMIN_LINK}
</div>
</div>
</div>
</div>
{PROTECT_FOOTER}
<div class="fa-footer">
<div class="fa-footer-row">
<div class="fa-footer-col fa-primary-footer-col">
<div class="fa-footer-logo">
<img src="https://i.imgur.com/gTGtEm4.png" class="logo" />
</div>
<div class="fa-footer-copyright">
Copyright
Nome do Fórum
</div>
<div class="fa-footer-social">
<a href="#">
<i class="fa fa-facebook"></i>
</a>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<a href="#">
<i class="fa fa-youtube"></i>
</a>
</div>
<a class="fa-footer-back-to-top">
<i class="fa fa-angle-up"></i>
</a>
</div>
<div class="fa-footer-col">
<strong class="lead">Título da coluna 01.</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="fa-footer-col">
<strong class="lead">Título da coluna 02.</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="fa-footer-col">
<strong class="lead">Título da coluna 03.</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="fa-footer-col">
<strong class="lead">Título da coluna 04.</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="fa-footer-attr">
Tema feito por {{Forum_Author}}. Créditos adicionais aos <a href="http://ajuda.forumeiros.com/memberlist">membros do Fórum dos Fóruns</a>.
</div>
<script>
(function ($) {
'use strict';
$(function () {
$('.fa-footer-back-to-top').on('click', function () {
$('html, body').stop().animate({
scrollTop: 0
}, 'fast');
});
});
}(jQuery));
</script>
</div>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready( function() {
$('div.fb-login-button, span.fb-login-button').attr({
"data-scope": "{switch_facebook_login.FB_SCOPE}",
"data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
"data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
"data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
"data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
});
$('div.fb-login-button, span.fb-login-button').each(function() {
if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
$(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
}
if($(this).html() == '') {
$(this).html('{switch_facebook_login.FB_LABEL}');
}
});
FB.init({
"appId" : "{switch_facebook_login.FB_APP_ID}",
"cookie" : {switch_facebook_login.FB_COOKIE},
"xfbml" : {switch_facebook_login.FB_XFBML},
"oauth" : {switch_facebook_login.FB_OAUTH},
"version" : "{switch_facebook_login.FB_VERSION}"
});
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
function onLoginFB() {
window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
}
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<script type="text/javascript">
$(document).ready( function() {
$('div.ti-connect, span.ti-connect').attr({
"data-loc": "{switch_topicit_connect.TOPICIT_URL}",
"data-login": "{switch_topicit_connect.BOARD_LOGIN}",
"data-version": "{switch_topicit_connect.TOPICIT_VERSION}",
"data-lang": "{switch_topicit_connect.BOARD_LANG}"
});
(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 = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'topicit-connect'));
});
</script>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
fa_endpage();
//]]>
</script>
</body>
</html>
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Edição no Footer
por iScroll 27.10.17 19:54
Perfeito, criei algum CSS base pro cima, mas preciso de ajuda com uns detalhes.
Veja: http://prntscr.com/h2uxx4
Gostaria da parte destacada em vermelho ficasse igual a que criei em verde, seria possível?
Veja: http://prntscr.com/h2uxx4
Gostaria da parte destacada em vermelho ficasse igual a que criei em verde, seria possível?
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Re: Edição no Footer
por Luiz 27.10.17 19:58
Como assim? õ-ÕGostaria da parte destacada em vermelho ficasse igual a que criei em verde, seria possível?
Não podemos alterar os links do rodapé.
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Edição no Footer
por iScroll 27.10.17 20:03
Seria só a cor, deixando-o "centralizado" junto com o background, assim: http://prntscr.com/h2v21d
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Edição no Footer
por iScroll 27.10.17 20:24
Bom, como de costume, tive problemas com a resolução de tela de usuários.
Algumas partes como: http://prntscr.com/h2vbpl
Ficam diferentes em outras telas: http://prntscr.com/h2vcbz
A imagem também se reparar da na mesma.
Algumas partes como: http://prntscr.com/h2vbpl
Ficam diferentes em outras telas: http://prntscr.com/h2vcbz
A imagem também se reparar da na mesma.
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Edição no Footer
por iScroll 27.10.17 20:33
Tentei utilizar e não consegui com sucesso :/
Teria como dar um Help ?
Teria como dar um Help ?
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Re: Edição no Footer
por Luiz 27.10.17 20:37
Certo. Nesse caso, eu prefiro fazer o CSS do footer zero para não ter que ficar usando !important toda hora, tudo bem?
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Edição no Footer
por iScroll 27.10.17 20:39
Neste caso, eu não gostaria do CSS divulgado já que eu mesmo planejei e ja o fiz em si..
Não poderia focar no atual ?
Não poderia focar no atual ?
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Re: Edição no Footer
por Luiz 27.10.17 20:40
O seu CSS não vai ser divulgado.
Basta removê-lo para que eu possa fazer outro.
Basta removê-lo para que eu possa fazer outro.
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Edição no Footer
por iScroll 27.10.17 20:41
Certo, pode faze-lo contudo da maneira do atual, tudo bem?
Já posso remove-lo?
Já posso remove-lo?
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Edição no Footer
por iScroll 27.10.17 20:43
Ah, só uma coisa, no caso do media quieres eu não aceitei usar kkk, não disse que não funcionou, caso o senhor veja que é menos trabalhoso assim poderia tenta-lo.
Deixarei responder esta antes de remover.
Deixarei responder esta antes de remover.
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Re: Edição no Footer
por Luiz 27.10.17 20:44
Não creio que seja necessário usá-las, desde que o CSS seja formulado de outra forma.
Por favor, remova, se quiser que eu faça, como pedi acima.
Por favor, remova, se quiser que eu faça, como pedi acima.
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Re: Edição no Footer
por Luiz 27.10.17 20:48
Troque o template novamente por este:
-> https://ajuda.forumeiros.com/t110603-edicao-no-footer#779173
-> https://ajuda.forumeiros.com/t110603-edicao-no-footer#779173
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Re: Edição no Footer
por Luiz 27.10.17 21:25
Adicione na sua folha de estilos:
188 linhas de trabalho, 100% responsivo e sem erros.
Agora a personalização restante fica por sua conta (se ainda desejar).
Qualquer coisa, só dizer. o7
- Código:
/**
* Definições Iniciais:
*/
.fa-footer,
.fa-footer * {
box-sizing: border-box;
}
.fa-footer {
background-color: #212529;
font-family: "Segoe UI", "Open Sans", "Helvetica Neue", "Ubuntu", "Helvetica", "Arial", "Trebuchet MS", sans-serif;
font-size: 14px;
color: #a0a8b0;
line-height: 1.5;
}
/**
* Tags Genéricas:
*/
.fa-footer a {
text-decoration: none;
border-bottom: solid 1px #0786e7;
color: #0786e7;
transition: all 200ms linear;
}
.fa-footer a:hover {
box-shadow: inset 0 -25px #0786e7;
color: #fff;
}
/**
* Sistema de Grid e ajustes das colunas genéricas:
*/
.fa-footer .fa-footer-row {
display: flex;
flex-direction: row;
padding: 0 15px;
}
.fa-footer .fa-footer-row .fa-footer-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 30px;
padding: 15px 0;
}
.fa-footer .fa-footer-row .fa-footer-col:last-child {
margin-right: 10px;
}
.fa-footer .fa-footer-row .fa-footer-col .lead {
text-transform: uppercase;
font-size: 16px;
color: #0786e7;
margin-bottom: 10px;
}
.fa-footer .fa-footer-row .fa-footer-col p {
font-size: 14px;
line-height: 1.6;
text-align: center;
}
/**
* Ajustes para a a coluna primária:
*/
.fa-footer .fa-footer-row .fa-primary-footer-col {
border-right: solid 1px #2a2e32;
position: relative;
flex-grow: 1;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo {
display: flex;
justify-content: center;
align-items: center;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo img {
width: 205px;
margin: 0 30px;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-social {
margin: 18px 0 5px 0;
display: flex;
width: 100%;
justify-content: space-around;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-social a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 37px;
height: 37px;
border-bottom: none;
border-radius: 100px;
box-shadow: none;
border: solid 1px #0786e7;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-social a:hover {
color: #fff;
background-color: #0786e7;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-back-to-top {
position: absolute;
right: -20px;
bottom: -20px;
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: #212529;
border: solid 1px #2a2e32;
color: #0786e7;
font-size: 23px;
border-radius: 20px;
z-index: 3;
box-shadow: 1px 1px 2px rgba(11, 13, 15, 0.84);
cursor: pointer;
transition: all 100ms linear;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-back-to-top .fa {
margin-top: -3px;
}
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-back-to-top:hover {
background-color: #0786e7;
color: #fff;
}
/**
* Atribuição final:
*/
.fa-footer .fa-footer-attr {
text-align: center;
padding: 20px;
font-size: 16px;
border-top: solid 1px #2a2e32;
background-color: #24282b;
}
/**
* Ajustes para o footer do FA:
*/
#page-footer {
background-color: #212529;
border-top: solid 1px #2a2e32;
border-bottom: solid 1px #2a2e32;
}
.statistics {
box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.37);
}
/**
* Responsive:
*/
@media screen and (max-width: 1000px) {
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo img {
margin: 0px;
}
}
@media screen and (max-width: 850px) {
.fa-footer .fa-footer-row {
flex-wrap: wrap;
}
.fa-footer .fa-footer-row .fa-primary-footer-col {
border-right: none;
}
}
188 linhas de trabalho, 100% responsivo e sem erros.
Agora a personalização restante fica por sua conta (se ainda desejar).
Qualquer coisa, só dizer. o7
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Edição no Footer
por iScroll 28.10.17 0:12
Opa, deixarei de seu modo pois tive umas ideias e ficou mais legal também kkkkkk.
Pode fechar ai que resolvo aqui, qualquer coisa eu abro outro post
Valeu Luiz
Deixaria os créditos de vocês no final, agradeço desde já.
Pode fechar ai que resolvo aqui, qualquer coisa eu abro outro post
Valeu Luiz
Deixaria os créditos de vocês no final, agradeço desde já.
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Re: Edição no Footer
por Luiz 28.10.17 0:29
| Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas. |
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Tópicos semelhantesFórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos