![[TUTORIAL]Menu Footer Elegante Buddy_Group](https://2img.net/h/cdn1.iconfinder.com/data/icons/df_On_Stage_Icon_Set/128/Buddy_Group.png){kind=icon}
Suporte Forumeiros
Início
Entrar
Cadastre-se
Mensagens
Moedas![[TUTORIAL]Menu Footer Elegante Ecrire10](https://i.servimg.com/u/f66/15/86/37/09/ecrire10.png) | Menu Footer Elegante |
Versão: Punbb / Não testado: phpBB2
--> Tutoriais sobre Programação <--
Menu Footer Elegante
Menu Footer Elegante
1º - CSS
- Código:
.module {
text-shadow: 1px 1px 0 white;
background: #f5f5f5;
-moz-box-shadow: 0px 0px 7px 0px #dcdcdc;
-webkit-box-shadow: 0px 0px 7px 0px #dcdcdc;
box-shadow: 0px 0px 7px 0px #ababab;
border: 1px solid white;}
.module .main-head{
margin-bottom: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
color: #333 !important;
background: #EAEAEA;
border-bottom: 1px solid white;}
.module .main-head div, .portal .module .main-head h1, .portal .module .main-head h2, .portal .module .main-head h3, .portal .module .main-head h4{
color: #333 !important;}
.module .main-content{
background: #f5f5f5;
border-top: 1px solid #D9D9D9;}
.portal .module.mod_news{
margin: 0 !important;
-moz-box-shadow: 0;
-webkit-box-shadow: 0;
box-shadow: 0;
border: 0;}
.portal .module {
margin: 10px !important;}
#footer{
width: 100%;
min-width: 900px;
color: white;
height: 280px;
background: #0c0d0d url(http://i36.servimg.com/u/f36/11/96/49/61/footer15.png) repeat-x;}
#footer ul{list-style-type: none;}
#footer a{color: white;}
#footer h1{
font-weight: normal;
margin-bottom: 20px;
font-family: 'Lobster';
font-size: 24px;
border-bottom: 3px dotted white;
padding-bottom: 5px;}
#footer h1 img{
margin: 0 0 3px 0 !important;
vertical-align: middle;
height: 25px;}
#back-top{
text-align: center;
margin-bottom: 8px;
position: relative;
top: -12px;}
#f-content{
float: center;
margin: 0 auto;}
#f-content fieldset.frm-set dl dd, #f-content fieldset.frm-set dl dt {padding: .3em;}
#f-content #username, #f-content #password{
color: #333333;
text-shadow: 1px 1px 0 white;
background: url(http://i36.servimg.com/u/f36/11/96/49/61/input10.png);
width: 149px;
height: 39px;
border: 0;
padding: 0 0 0 20px;}
input:-webkit-autofill, input:-webkit-autofill, input-moz-autofill, input:-moz-autofill, input:-autofill, input:-autofill {
background: none !important;}
#f-content .button1{
cursor: pointer;
font-weight: normal !important;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
color: white;
text-align: center;
border: 0 !important;
text-shadow: 0 1px 5px black;
background: url(http://i36.servimg.com/u/f36/11/96/49/61/login10.png);
width: 53px;
height: 25px;
padding-bottom: 2px;
-webkit-box-shadow: 0 0 0;
-moz-box-shadow: 0 0 0;
box-shadow: 0 0 0;}
#f-content dd.login{
margin-top: -40px;
margin-left: 110px;}
ul#social{
margin-left: 25px;
margin-right: 25px;
text-shadow: 1px 1px 0 black;
font-weight: bold;
font-size: 15px;
float: left;}
ul#social li{
margin-bottom: 10px;}
ul#social img{
-ms-interpolation-mode: bicubic;
margin-right: 10px;
margin-bottom: 3px;
vertical-align: middle;
height:25px;}
#connect{
margin-left: 25px;
margin-right: 25px;
float: left;}
#user-panel #avatar{margin-right: 5px;}
#site-links{
text-align: center;
margin-left: 25px;
margin-right: 25px;
float: left;}
#site-links li{margin-bottom: 3px;}
#site-links li a {
font-size: 16px;}
#other{
float: left;
margin-left: 25px;
margin-right: 25px;}
2º - overall_footer_end (Substitua toda a página)
- 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="footer">
<script type="text/javascript">
$(function() {
$('#back-top').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
<div id="back-top">
<a href="#"><img src="http://i36.servimg.com/u/f36/11/96/49/61/backto10.png"/></a>
</div>
<div id="f-content">
<ul id="social">
<h1> <img src="http://i36.servimg.com/u/f36/11/96/49/61/users_10.png"/> Encontre-nos em: </h1>
<li>
<a href="#" target="_blank"> <img src="http://i36.servimg.com/u/f36/11/96/49/61/facebo10.png" alt="Facebook"/>
Encontre-nos no Facebook </a>
</li>
<li>
<a href="#" target="_blank"> <img src="http://i36.servimg.com/u/f36/11/96/49/61/twitte10.png" alt="Twitter"/>
Siga-nos no Twitter </a>
</li>
<li>
<a href="/rss"> <img src="http://i36.servimg.com/u/f36/11/96/49/61/rss11.png" alt="RSS"/>
RSS Feed </a>
</li>
<li>
<a href="/sitemap.xml"> <img src="http://i36.servimg.com/u/f36/11/96/49/61/portal10.png" alt="Sitemap"/>
Sitemap </a>
</li>
</ul>
<div id="connect">
<!-- BEGIN switch_user_logged_out -->
<h1> <img src="http://i36.servimg.com/u/f36/11/96/49/61/lock12.png"/> Conectar-se </h1>
<form action="/login" method="post" autocomplete="off"><fieldset class="frm-set login"><dl> <dd><input type="text" placeholder="Nome do usuario" tabindex="1" name="username" id="username" size="20" maxlength="40" value="" class="inputbox autowidth" autocomplete="off" autofill="off"/></dd></dl><dl><dd><input type="password" placeholder="Senha" tabindex="2" id="password" name="password" size="20" maxlength="25" class="inputbox autowidth" autocomplete="off" autofill="off"/></dd><dd><a href="/profile?mode=sendpassword" rel="nofollow">Recuperar senha</a></dd></dl><dl><dd><label for="autologin"><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" checked="checked"/> Lembre-me </label></dd></dl><dl><dd class="login"><input type="submit" name="login" tabindex="6" value="Entrar" class="button1"/></dd></dl></fieldset></form>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div id="user-panel">
<h1> <img src="http://i36.servimg.com/u/f36/11/96/49/61/commen10.png"/> Painel do usuario </h1>
<script>
jQuery(document).ready(function(){
jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
link = jQuery('.frm-set dl:first img', data).attr('src');
jQuery('#avatar').attr('src', link);
});
});
</script>
<span><img id="avatar" src="http://i36.servimg.com/u/f36/11/96/49/61/no_ava10.gif" align="left" width="45"/><span class="USERLINK"></span><br />
<b>Mensagens:</b> <span class="USERCOUNTPOST"></span><br />
<br /> </span>
<a href="/profile?mode=editprofile&page_profil=informations" target="_blank"> Meu Perfil </a>
<br />
<a href="/search?search_id=watchsearch" target="_blank"> Tópico(s) sendo observado </a>
<br />
<a href="/search?search_id=egosearch" target="_blank"> Tópicos respondidos </a>
<br />
<a href="/search?search_id=newposts" target="_blank"> Novos tópicos <br /> <small>(<span class="USERLASTVISIT"> </span>)</small> </a> </div>
<!-- END switch_user_logged_in -->
</div>
<ul id="site-links">
<h1> <img src="http://i36.servimg.com/u/f36/11/96/49/61/link10.png"/> Fórum Links </h1>
<li>
<a href="f2-regras"> Regras </a>
</li>
<li>
<a href="f1-anuncios"> Anúncios </a>
</li>
<li>
<a href="/forum?mode=delete_cookies"> Excluir os cookies </a>
</li>
<li>
<a href="/faq"> Ajuda </a>
</li>
<li>
<a href="/memberlist?mode=overall_posters"> Top Usuários </a>
</li>
<li>
<a href="/contact"> Contato </a>
</li>
</ul>
</div>
<div id="other">
<h1> <img src="http://i36.servimg.com/u/f36/11/96/49/61/star_o10.png"/> Videos do fórum</h1>
<iframe width="180" height="150" src="http://www.youtube.com/embed/jGGWZJe8Vbw" frameborder="0" allowfullscreen></iframe>
</div>
<h1> <img src="http://cdn4.iconfinder.com/data/icons/eleganticons/images/Questions.png"/> Creditos</h1>
<center>Rodapé Elaborado por:<a href="http://firstcheats.forumais.com/u1"> Haizen </a></center>
Copyright - 2012 © Todos os direitos reservados ao fórum central !
<img src="http://i.imgur.com/gbWVG.png"/>
</div> </div>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
appId: '{switch_facebook_login.FACEBOOK_APP_ID}',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
//]]>
</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 -->
- Créditos?
Haizen
- Resultado...?
![[TUTORIAL]Menu Footer Elegante Y2ILy](https://i.imgur.com/y2ILy.png)
