por Convidado Qua 05 Jun 2013, 9:50 am
Eu já tenho a barra pronta só ainda não a estou a utilizar porque ainda não está totalmente a 100%!
Graças os Daemon que me ajudou e eu disponibilizo aqui os códigos que estou a usar, mas ainda há coisas que quero mudar
1º- Ter as notificações em tempo real como acontece na barra do forumeiros (e isso é o mais importante!)
2º- Deixar a barra fixa
3º- Mudar a cor da barra
Aqui deixo os códigos usados
CSS
- Código:
/*header*/
#header_bar {
background: #242C34;
text-align: right;
border-bottom: 1px solid #131B23;
}
#user_navigation {
color: #9F9F9F;
font-size: 11px;
}
#user_navigation a {
color: #222;
float: left;
height: 36px;
line-height: 36px;
outline: medium none;
padding: 0 12px;
font-size: 12px;
color: #C7C7C7;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
position: relative;
}
#user_navigation a:hover {
background-color: #576B7E;
}
#user_link.menu_active, #notify_link.menu_active, #inbox_link.menu_active {
background-position: bottom;
background-color: white !important;
border-right: 1px solid #C5C5C5;
border-left: 1px solid #C5C5C5;
position: relative;
z-index: 999;
border-radius: 3px 3px 0 0;
}
#user_link.menu_active {
background: white;
color: #323232;
}
#user_navigation.not_logged_in #register_link:hover {
background-color: rgba(123,166,13,.7);
color: #fff;
}
#user_navigation.logged_in li:last-child a:hover {
background-color: rgba(200, 0, 0, 0.4);
}
#user_navigation > ul {
border-right: 1px solid #414E5A;
border-left: 1px solid #131B23;
}
#user_navigation li {
float: left;
margin: 0;
border-left: 1px solid #414E5A;
border-right: 1px solid #131B23;
float: left;
margin: 0;
}
#user_navigation > ul:last-child, #user_navigation li:last-child {border-right: 0px;}
#user_link_dd, .dropdownIndicator {
display: inline-block;
width: 9px;
height: 5px;
background: url(http://i78.servimg.com/u/f78/17/96/03/52/header10.png) no-repeat left;
}
#user_link.menu_active #user_link_dd, .menu_active .dropdownIndicator, li.active .dropdownIndicator {
background-position: right;
}
#inbox_link {
background: url(http://i78.servimg.com/u/f78/17/96/03/52/icon_i10.png) no-repeat top;
}
#notify_link {
background: url(http://i78.servimg.com/u/f78/17/96/03/52/icon_n10.png) no-repeat top;
}
#notify_link, #inbox_link {
padding: 0 20px !important;
}
Template Header ( colocar a cima de <div class="skinWrap"> )
- Código:
<div id="header_bar" class="clearfix">
<div class="wrapper">
<!-- BEGIN switch_user_logged_out -->
<div id="user_navigation" class="not_logged_in">
<ul class="ipsList_inline right">
<li><a href="/login" title="Entrar" onclick="jQuery('#login-bs').fadeToggle();return false;" id="sign_in">Entrar</a></li>
<li><a href="/register" title="Cadastre-se" id="register_link">Cadastre-se</a></li>
</ul>
</div>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div id="user_navigation" class="logged_in">
<ul class="ipsList_inline attach">
<li><a id="user_link" href="/profile?mode=editprofile" title="Meu Perfil" class=""><span class="USERNAME"></span> <span id="user_link_dd"></span></a></li>
<li><a id="inbox_link" href="/privmsg?folder=inbox" title="Mensageiro"></a></li>
<li><a id="notify_link" href="/profile?mode=editprofile&page_profil=notifications" title="Notificações"></a></li>
<li><a href="/login?logout">Sair</a></li>
</ul>
</div>
<!-- END switch_user_logged_in -->
</div>
</div>
Efeito em caixas JS.
- Código:
$(document).ready(function(){
jQuery('#inbox_link').click(function(){
$("#inbox_link").toggleClass("menu_active");
$("#notify_link").removeClass("menu_active");
$("#notification").hide();
$("#msg").load("/privmsg? td.tcl:lt(10)").html("<center><img src='http://i.imgur.com/z5MxZXb.gif'></center>").sleep(5000);
});
jQuery('#notify_link').click(function(){
$("#notify_link").toggleClass("menu_active");
$("#inbox_link").removeClass("menu_active");
$("#mppopup").hide();
$("#notif").load("/profile?mode=editprofile&page_profil=notifications td.tcr:lt(10), td.tc3:lt(10)").html("<center><img src='http://i.imgur.com/z5MxZXb.gif'></center>").sleep(5000);
});
jQuery('a#user_link').click(function(){
$("a#user_link").toggleClass("menu_active");
});
});
Widget
- Código:
<div id="mppopup" style="display: none"><div id="user_inbox_link_menucontent" class="ipsHeaderMenu boxShadow" style="width: 300px; position: absolute; z-index: 999; top: 41px; left: 856px;"><h4 class="ipsType_sectiontitle">Caixa de Entrada<p class="ipsPad_half ipsType_smaller attach"><a href="/privmsg?folder=inbox">Mensagens</a> · <a href="/privmsg?mode=post" title="Nova mensagem">Nova mensagem</a></p></h4><div id="msg"></div>
</div>
</div>
<script>jQuery('#inbox_link').click(function() {
jQuery('#mppopup').fadeToggle();return false;
});
</script>
<style>
#msg td {
padding: 5px;
display: block;
margin-bottom: 8px;
}
#msg td.tc2 {display: none;}
.boxShadow {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 7px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 5px 7px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 7px;
}
.ipsHeaderMenu {
background: white;
background: -moz-linear-gradient(top, white 0%, #F6F6F6 70%, #EDEDED 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(70%,#F6F6F6), color-stop(100%,#EDEDED));
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
padding: 10px;
overflow: hidden;
width: 340px;
}
#user_notifications_link_menucontent.ipsHeaderMenu, #user_inbox_link_menucontent.ipsHeaderMenu {
width: 300px;
}
.ipsHeaderMenu .ipsType_sectiontitle {
margin-bottom: 8px;
}
.ipsType_sectiontitle {
font-size: 16px;
font-weight: normal;
color: #595959;
padding: 5px 0;
border-bottom: 1px solid #ECECEC;
}
.ipsPad_half {
padding: 4px !important;
}
.ipsType_smaller, .ipsType_smaller a {
font-size: 11px !important;
}
</style>
<div id="notification" style="display: none"><div id="user_notifications_link_menucontent" class="ipsHeaderMenu boxShadow" style="width: 300px; position: absolute; z-index: 999; top: 41px; left: 900px; "><h4 class="ipsType_sectiontitle">Notificações
<p class="ipsPad_half ipsType_smaller right">
<a href="/profile?mode=editprofile&page_profil=notifications">Ver Todas Notificações</a>
</p>
</h4><div id="notif"></div>
</div>
</div>
<script>jQuery('#notify_link').click(function() {
jQuery('#notification').fadeToggle();return false;
});
</script>
<style>
#notif td {
padding-right: 5px;
padding-left: 5px;
display: block;
margin-bottom: 3px;
}
#notif td.tc2 {display: none;}
</style>
<div id="perfil" style="display: none;"><div id="user_link_menucontent" class="ipsHeaderMenu clearfix boxShadow" style="position: absolute; left: 772px; top: 41px; z-index: 999; color: rgb(34, 34, 34); display: block;"><a href="/u46" title="Your Profile" class="ipsUserPhotoLink left"><div id="avatar"></div></a><div class="left">
<ul id="links">
<li id="user_name" style="width: 100%;font-weight: bold;padding-bottom: 5px;">{USERNAME}</li>
<li id="user_profile"><a href="/profile?mode=editprofile" title="Meu perfil">Meu perfil</a></li>
<li id="user_ucp"><a href="/profile?mode=editprofile&page_profil=preferences" title="Editar preferências">Minhas configurações</a></li>
<li id="user_content"><a href="/spa/{USERNAME}" title="Meus posts">Meus Posts</a></li><li id="user_content"><a href="/st/{USERNAME}" title="Meus tópicos">Meus tópicos</a></li>
<li id="user_content"><a href="/search?search_id=watchsearch" title="Conteúdo que sigo">Conteúdo que sigo</a></li>
<li id="user_pm"><a href="/privmsg?folder=inbox">Mensagens Privadas</a></li>
</ul></div></div></div>
<script>
jQuery(document).ready(function(){
jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
link = jQuery('.frm dl dd img', data).attr('src');
if(link){
jQuery('#avatar').html('<a href="/profile?mode=editprofile&page_profil=avatars"><img src="'+link+'" alt="" /></a>');
}else{
jQuery('#avatar').html('');
}
});
jQuery('#user_link').click(function() {
jQuery('#perfil').fadeToggle();return false;
});
});
</script>
<style>
#avatar img {
height: 50px;
width: 50px;
padding: 1px;
border: 1px solid #d5d5d5;
background: #fff;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
#avatar img:hover {
border-color: #a1a1a1;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
}
#user_link_menucontent>div {
margin-left: 15px;
width: 265px;
text-align: left;
top: 50px;
}
#user_link_menucontent #links li {
width: 50%;
float: left;
margin: 3px 0;
text-shadow: 0px 1px 0 rgba(255,255,255,1);
white-space: nowrap;
}
</style>
E novamente um JS para efeito de contar as mensagens recebidas
- Código:
$(function(g) {
var tg = document.getElementById('i_icon_mini_new_message');if(!tg) return;
var mps = $(tg).attr("alt").match(/[0-9]+/);
$('li a[href^="/privmsg?folder=inbox"]').attr('data-counter', ''+mps+'');
});
Última edição por Helix em Qua 05 Jun 2013, 9:53 am, editado 1 vez(es)