Menu de Navegação igual ao do Facebook

por Pattricia 20.09.15 19:17

Detalhes da questão

Endereço do fórum: http://winxclubfairies.forumeiros.com/forum
Versão do fórum: PhpBB3

Descrição

Olá!
Queria que o menu de navegação ficasse assim, igual a do Facebook:

Menu de Navegação igual ao do Facebook 30nbznb

Gostaria que colocassem o código do menu no template overall_header, o meu template é este:

Código:: <!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" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}> <head> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" />  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />  {META_FAVICO} {META} {META_FB_LIKE} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JQUERY_PATH}" type="text/javascript"></script> <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>  <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[ /* Definir le sens de direction en fonction du panneau admin */ var tickerDirParam = "{switch_ticker.DIRECTION}"; var slid_vert = false; var auto_dir = 'next'; var h_perso = parseInt({switch_ticker.HEIGHT}); switch( tickerDirParam ) { case 'top' : slid_vert = true; break; case 'left': break; case 'bottom': slid_vert = true; auto_dir = 'prev'; break; case 'right': auto_dir = 'prev'; break; default: slid_vert = true; } $(document).ready(function() { $('#fa_ticker_content').css('display','block'); var width_max = $('ul#fa_ticker_content').width(); var width_item = Math.floor(width_max / {switch_ticker.SIZE}); if (width_max > 0) { $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () { if ($(this).width() > width_item) { var ratio = $(this).width() / width_item; var new_height = Math.round($(this).height() / ratio); $(this).height(new_height).width(width_item); } }); if (slid_vert) { var height_max = h_perso; $('ul#fa_ticker_content li').each( function () { if ($(this).height() > height_max) { height_max = $(this).height(); } } ); $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto'); $('ul#fa_ticker_content li').height(height_max); } $('#fa_ticker_content').jcarousel({ vertical: slid_vert, wrap: 'circular', auto: {switch_ticker.STOP_TIME}, auto_direction: auto_dir, scroll: 1, size: {switch_ticker.SIZE}, height_max: height_max, animation: {switch_ticker.SPEED} }); } else { $('ul#fa_ticker_content li:not(:first)').css('display','none'); $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center'); } }); //]]> </script>  <script type="text/javascript">//<![CDATA[ $(document).ready(function(){  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); if(pm != null) { pm.focus(); }   report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); if(report != null) { report.focus(); }   $(document).ready(function() { Ticker.start({ height : {switch_ticker.HEIGHT}, spacing : {switch_ticker.SPACING}, speed : {switch_ticker.SPEED}, direction : '{switch_ticker.DIRECTION}', pause : {switch_ticker.STOP_TIME} }); });  });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;   $(document).ready( function() { $(window).resize(function() { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup"); $("#login_popup").css({ "left": windowWidth/2 - popupWidth/2 }); }); });  //]]> </script> {GREETING_POPUP} <style type="text/css"> #page-footer, div.navbar, div.navbar ul.linklist { display: block !important; } ul.linklist li.rightside, ul.linklist li.rightside a.copyright { display: inline !important; }  .jcarousel-skin-tango .jcarousel-item { text-align:center; width: 10px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; }  </style> {HOSTING_JS}  <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]); _gaq.push(["_trackPageview"]); _gaq.push(['_trackPageLoadTime']);  _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']); _gaq.push(['b._trackPageview']);  (function() { var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true; ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script>  </head> <body id="phpbb">  <div id="hitskin_preview" style="display: block;"> <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br /> <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div>   <div id="login_popup" style="z-index: 10000 !important;"> <div class="h3">{SITENAME}</div> {LOGIN_POPUP_MSG} <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="button1" value="{L_LOGIN}" /> <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" /> <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" /> </form> </div> </div>  <div class="conteneur_minwidth_IE"> <div class="conteneur_layout_IE"> <div class="conteneur_container_IE"> <div id="wrap"> <a id="top" name="top" accesskey="t"></a> {JAVASCRIPT} <div id="page-header"> <div class="headerbar"> <div class="inner"><span class="corners-top"><span></span></span> <div id="logo-desc"> <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>  <div id="site-title">{switch_h1.MAIN_SITENAME}</div>   <p>{switch_desc.SITE_DESCRIPTION}</p>  </div> <span class="corners-bottom"><span></span></span></div> </div> <div class="navbar"> <div class="inner"><span class="corners-top"><span></span></span> <ul class="linklist navlinks{NAVBAR_BORDERLESS}"> <li>{GENERATED_NAV_BAR}</li> </ul>  <div id="search-box"> <form method="get" action="{ACTION_SEARCH}" id="search"> <p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="{L_SEARCH}..." onclick="if (this.value == '{L_SEARCH}...') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}...';" /> {JS_SESSION_ID_INPUT} <input class="button2" type="submit" value="{L_SEARCH}" /></p> </form> </div>  <span class="corners-bottom"><span></span></span></div> </div>  <div id="fa_ticker_blockD" style="margin-top:4px;"> <div class="module"> <div class="inner"> <span class="corners-top"><span></span></span> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">  <li>{switch_ticker.ticker_row.ELEMENT}</li>  </ul> </div> <span class="corners-bottom"><span></span></span> </div> </div> </div>   <div id="fa_ticker_block" style="margin-top:4px;"> <div class="module"> <div class="inner"> <span class="corners-top"><span></span></span> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> <span class="corners-bottom"><span></span></span> </div> </div> </div>  </div> <div id="page-body"> <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <div id="outer-wrapper"> <div id="wrapper"> <div id="container"> <div id="content"> <div id="{ID_LEFT}">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> <div id="main"> <div id="main-content">

Obrigada

por Hancki 21.09.15 2:08

Olá!

Depois de 2h à volta disso (porque eu tinha que conseguir), fiz algo bem parecido. Óbvio que não tem todas as funções, mas é bem melhor que nada!

Crie uma página Javascript, investida em "Todas as páginas", com o seguinte código:

Código:: $(window).load(function() { $('#fa_toolbar #fa_search #fa_textarea').attr('placeholder', 'Realize pesquisas no fórum'); var avatarSrc = $('#fa_usermenu img').attr('src'); var nomeID = _userdata["username"]; var numberID = _userdata["user_id"]; $('#fa_toolbar #fa_share').after('<div id="userBar" style="display:inline;"><a href="/u' + numberID + '"><span id="avatarNome"><img src="' + avatarSrc + '" style="width:21px;height:21px;"/><span id="nomeUser">' + nomeID + '</span></span></a><a href="/forum" id="linkForum">Página inicial</a><span id="whiteSpace">    </span><span id="botoesBar"><a href="/profile?mode=editprofile&page_profil=friendsfoes" id="amigosBar"></a><a href="#" id="mensagensBar"></a><a href="#" id="notiBar"></a></span><span id="whiteSpace">  </span><span id="botoesFim"><a href="/profile?mode=editprofile&page_profil=friendsfoes" title="Privacidade" id="botaoPrivacidade"></a></span></div>'); $('#fa_toolbar #userBar #botoesBar #notiBar').click(function() { $('#fa_right #notif_list').attr('style', 'right: 300px'); $('#fa_notifications').click(); $(this).css('background', 'url(http://i.imgur.com/LjPRhpX.png) no-repeat -0'); var notifStyle = $('.fa_tbMainElement.notification'); if (!notifStyle.length > 0) { $(this).css('background', 'url(http://i.imgur.com/wZMlYjI.png) no-repeat -0'); } }); }); $(window).load(function() { var iAmount = 10; var oConfig = { sInfo: '', sContent: '<div class="ipsHeaderMenu boxShadow" id="user_inbox_link_menucontent" style="display: none; width: 31%; position: absolute; z-index: 9999;">' + '<h4 class="ipsType_sectiontitle">Caixa de Entrada' + '<p class="ipsPad_half ipsType_smaller right">' + '<a class="configure" href="/privmsg?folder=inbox">Mensagens</a> · <a href="/privmsg?mode=post" title="Nova mensagem">Nova mensagem</a>' + '</p>' + '</h4>' + '<ul class="ipsList_withminiphoto"><img src="http://i55.servimg.com/u/f55/18/17/62/92/ajax-l10.gif" alt="- Load" style="display: block; margin-left: auto; margin-right: auto;"></ul>' + '</div>', sCSS: '<style>' + '.ipsHeaderMenu {' + 'background-color: #FFFFFF;' + 'border-radius: 0 0 6px 6px;' + 'overflow: hidden;' + 'padding: 10px;' + 'width: 340px;' + '}' + '.boxShadow {' + 'box-shadow: 0 12px 25px rgba(0, 0, 0, 0.58);' + '}' + '.ipsHeaderMenu .ipsType_sectiontitle {' + 'margin-bottom: 8px;' + '}' + '.ipsType_sectiontitle {' + 'border-bottom: 1px solid #ECECEC;' + 'color: #595959;' + 'font-size: 16px;' + 'font-weight: 400;' + 'padding: 5px 0;' + '}' + '.ipsType_smaller, .ipsType_smaller a {' + 'font-size: 11px !important;' + '}' + '.ipsPad_half {' + 'padding: 4px !important;' + '}' + '.right {' + 'float: right;' + '}' + '.ipsList_withminiphoto > li {' + 'margin-bottom: 8px;' + '}' + '.ipsType_small {' + 'font-size: 12px;' + '}' + '.ipsUserPhoto {' + 'background: none repeat scroll 0 0 #FFFFFF;' + 'border: 1px solid #D5D5D5 !important;' + 'box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);' + 'padding: 1px;' + '}' + '.ipsUserPhoto_mini {' + 'height: 30px;' + 'width: 30px;' + '}' + '.left {' + 'float: left;' + '}' + '.ipsList_withminiphoto > li .list_content {' + 'margin-left: 40px;' + '}' + '#user_inbox_link_menucontent ul.ipsList_withminiphoto {' + 'list-style: none outside none;' + 'padding-left: 0 !important;' + '}' + '.desc.lighter, .desc.lighter.blend_links a {' + 'color: #A4A4A4;' + 'padding: 1px;' + '}' + '.ipsType_smaller, .ipsType_smaller a {' + 'font-size: 11px !important;' + '}' + '.menu_active {' + 'color: #595959 !important;' + 'background-color: #FFFFFF;' + 'background-position: center bottom;' + 'border-radius: 3px 3px 0 0;' + 'padding: 4px;' + '}' + '</style>', sTarget: '', sSearch: '', sExpression0: '', sExpression1: '', sExpression2: '', sGetIMG: '' }; jQuery(oConfig.sCSS).insertBefore('body'); jQuery('body').append(oConfig.sInfo + oConfig.sContent); var phpBB2 = jQuery('.bodyline'); var phpBB3 = jQuery('#wrap'); var punbb = jQuery('#pun-intro'); var invision = jQuery('#ipbwrapper'); if (phpBB2.length) { oConfig.sSearch = 'form[name="privmsg_list"] .forumline tr'; oConfig.sTarget = 'tr'; oConfig.sExpression0 = 'memDiv.find("tr:first, tr:last").remove();'; oConfig.sExpression1 = 'jQuery(this).find("a.topictitle").html()'; oConfig.sExpression2 = 'jQuery(this).find("td .name").html() + " - " + jQuery(this).find("td .postdetails").html()'; oConfig.sGetIMG = ' #emptyidcc .row1.gensmall img:eq(0)' } else if (phpBB3.length) { oConfig.sSearch = '.topiclist.pmlist.bg_none li'; oConfig.sTarget = '.icon dt'; oConfig.sExpression1 = '\'<a class="topictitle" href="\' + jQuery(this).find("a.topictitle").attr(\'href\') + \'">\' + jQuery(this).find("a.topictitle").text() + \'</a>\''; oConfig.sExpression2 = 'jQuery(this).find("em").html()'; oConfig.sGetIMG = ' #profile-advanced-right img:eq(0)' } else if (punbb.length) { oConfig.sSearch = '.main-content tr .tcl.tdtopics'; oConfig.sGetIMG = ' #profile-advanced-right .main-content img:first' } else if (invision.length) { oConfig.sSearch = '.borderwrap table.ipbtable tbody tr:not(":empty")'; oConfig.sTarget = 'tr'; oConfig.sExpression1 = '\'<a class="topictitle" href="\' + jQuery(this).find("td:eq(2) a.topictitle").attr(\'href\') + \'">\' + jQuery(this).find("td:eq(2) a.topictitle").text() + \'</a>\''; oConfig.sExpression2 = 'jQuery(this).find("td:eq(2)").text().substr(jQuery(this).find("td:eq(2) a.topictitle").text().length)'; oConfig.sGetIMG = ' #profile-advanced-right .box-content.profile.center img:first' }; jQuery('#fa_toolbar #userBar #botoesBar #mensagensBar').click(function() { var oClicked = jQuery(this); var oTarget = jQuery('#user_inbox_link_menucontent'); if (oTarget[0].style.display == 'none') { oClicked.addClass('menu_active'); if (!jQuery('#user_inbox_link_menucontent ul.ipsList_withminiphoto > li').length) { var memDiv = jQuery('<div>'); memDiv.load('/privmsg?folder=inbox ' + oConfig.sSearch + ':lt(' + iAmount + ')', function() { if (punbb.length) { memDiv.html(memDiv.html().replace(/\<\/a\> por/g, '</a></br><span class="ipsType_smaller desc lighter">').replace(/\<\/td\>/g, '</span></div></li>').replace(/\<td class="tcl tdtopics"\>/g, '<li class=" ipsType_small clearfix"><img class="ipsUserPhoto ipsUserPhoto_mini left" alt="User image" src="http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png"><div class="list_content">')).find('span.status').remove() } else { if (oConfig.sExpression0) { eval(oConfig.sExpression0) } var sHtml = ''; oConfig.sTarget = memDiv.find(oConfig.sTarget); jQuery.each(oConfig.sTarget, function(index, value) { sHtml += '<li class=" ipsType_small clearfix">' + '<img class="ipsUserPhoto ipsUserPhoto_mini left" alt="User image" src="http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png">' + '<div class="list_content">' + eval(oConfig.sExpression1) + '<br>' + '<span class="ipsType_smaller desc lighter">' + eval(oConfig.sExpression2) + '</span>' + '</div>' + '</li>' }); memDiv.html(sHtml) } jQuery('#user_inbox_link_menucontent ul.ipsList_withminiphoto').html(memDiv.html()); var vazio = $('#user_inbox_link_menucontent span[class="ipsType_smaller desc lighter"]').text(); if (vazio == 'null') { $('#user_inbox_link_menucontent a.topictitle').text('Sem mensagens privadas').attr('href', '#'); $('#user_inbox_link_menucontent span[class="ipsType_smaller desc lighter"]').text('Quando receber novas mensagens, verá neste espaço.'); } var oImgTarget = oTarget.find('.ipsType_small.clearfix'); oImgTarget.each(function(index) { var UserURL = jQuery(this).find('.ipsType_smaller a'); if (UserURL.length) { UserURL = UserURL.attr('href'); var oImgTag = jQuery(this).find('.ipsUserPhoto'); var UserIMG = sessionStorage.getItem(UserURL); if (UserIMG) { jQuery(this).find('img').attr('src', UserIMG) } else { jQuery.get(UserURL, function(data) { var profile_img = jQuery(oConfig.sGetIMG, data).attr('src'); if (profile_img !== undefined) { oImgTag.attr('src', profile_img); sessionStorage.setItem(UserURL, profile_img) } }) } } }) }) } oTarget.css({ 'left': (oClicked.offset().left + oClicked.outerWidth()) - oTarget.outerWidth(), 'top': oClicked.offset().top + oClicked.outerHeight() }).fadeIn(0); jQuery(document).mousedown(function() { if (!oTarget.is(":hover")) { jQuery(document).unbind('mousedown'); oClicked.removeClass('menu_active'); oTarget.fadeOut(100) } }) } else { oClicked.removeClass('menu_active'); oTarget.fadeOut(100) } return false }) });

Feito isto, adicione este CSS no topo da sua folha de estilos:

Código:: body#phpbb { margin-top: 50px !important; } #fa_toolbar #userBar #botoesFim #botaoPrivacidade { border: 0px !important; background: url(http://i.imgur.com/HLwKgdW.png) 0px 50% no-repeat; padding-right: 20px; } #fa_toolbar #userBar #botoesFim #botaoPrivacidade:hover { background: url(http://i.imgur.com/oyCk4eK.png) 0px 50% no-repeat; } #fa_toolbar #fa_right.notification #notif_list { top: 43px !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; } #fa_toolbar #fa_right #notif_list:-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important; border-radius: 10px !important; background-color: #F5F5F5 !important; } #fa_toolbar #fa_right #notif_list:-webkit-scrollbar { width: 12px !important; background-color: #F5F5F5 !important; } #fa_toolbar #fa_right #notif_list:-webkit-scrollbar-thumb { border-radius: 10px !important; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3) !important; background-color: #555 !important; } #fa_toolbar #fa_right #notif_list { overflow: hidden; height: 400px !important; overflow-x: hidden !important; } #fa_toolbar #fa_right #notif_list:hover { overflow: scroll !important; overflow-x: hidden !important; } #fa_toolbar #fa_right #notif_list li.unread { background-color: #EEEFF4 !important; } #fa_toolbar #fa_right #notif_list li .contentText { color: #333 !important; height: 50px !important; } .notifFaceavatar { float:left !important; margin:0 5px !important; padding:2px !important; } .notifFaceavatar img { height: 45px !important; width: 45px !important; } #fa_toolbar #fa_right #notif_list { border: 1px solid #e0e0e0 !important; -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius: 5px !important; } #fa_toolbar #fa_right #notif_list li.see_all { text-align: center !important; background-color: #f7f7f7 !important; -webkit-border-bottom-right-radius: 5px !important; -webkit-border-bottom-left-radius: 5px !important; -moz-border-radius-bottomright: 5px !important; -moz-border-radius-bottomleft: 5px !important; border-bottom-right-radius: 5px !important; border-bottom-left-radius: 5px !important; } #fa_toolbar #fa_right #notif_list a { color: #3B5998 !important; } #fa_toolbar #fa_right #notif_list li a.delete { background: url('http://i.imgur.com/b5E2MD2.jpg') no-repeat !important; } #fa_toolbar #fa_right #notif_list li a.delete:hover { background: url('http://i.imgur.com/ydpwRs2.jpg') no-repeat !important; } #fa_toolbar #fa_right #notif_list li { border-top: 1px solid #dddddd !important; border-left: 0px !important; border-bottom: 0px !important; border-right: 0px !important; } #fa_toolbar #fa_right #notif_list li hr { border: 0px !important; } #fa_toolbar #userBar #botoesBar #mensagensBar.menu_active, #fa_toolbar #userBar #botoesBar #mensagensBar.menu_active:hover { background: url('http://i.imgur.com/Wmcm9eT.png') no-repeat -0 } #fa_toolbar #userBar #botoesBar #amigosBar { border: 0px !important; padding-right: 27px; height: 17px !important; background: url('http://i.imgur.com/Wo3nTZR.png') no-repeat -0px; } #fa_toolbar #userBar #botoesBar #amigosBar:hover { background: url('http://i.imgur.com/4kyH1Mo.png') no-repeat -0px; } #fa_toolbar #userBar #botoesBar #mensagensBar { border: 0px !important; padding-right: 27px; height: 17px !important; background: url('http://i.imgur.com/zQRcayp.png') no-repeat -0px; } #fa_toolbar #userBar #botoesBar #mensagensBar:hover { background: url('http://i.imgur.com/kbH6EK6.png') no-repeat -0px; } #fa_toolbar #userBar #botoesBar #notiBar { border-right: 1px solid #3b5998; padding-right: 35px; height: 17px !important; background: url('http://i.imgur.com/wZMlYjI.png') no-repeat -0px; } #fa_toolbar #userBar #botoesBar #notiBar:hover { background: url('http://i.imgur.com/RjsCnze.png') no-repeat -0px; } #fa_toolbar #userBar a { border-radius: 3px; padding-top: 7px; padding-bottom: 10px; padding-left: 5px; padding-right: 8px; font-size: 12px !important; text-decoration: none !important; font-weight: 700; margin-bottom: -10px !important; position: relative; } #fa_toolbar #userBar a:first-child { border-right: 1px solid #3b5998; } #fa_toolbar #userBar a:hover { background: #3b5998; } #fa_toolbar #userBar { height: 40px !important; position: relative; margin-left: 200px; margin-top: -10px; } #fa_toolbar #userBar #avatarNome img { margin-bottom: -7px !important; padding-right: 7px; } #fa_toolbar { background-image: url(http://i.imgur.com/dc7OJx5.png); background-repeat: repeat-x; background-size: auto; background-position: 0 0; background-color: #3a5795; border-bottom: 1px solid #133783; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .52); height: 43px !important; } #fa_toolbar div, #fa_toolbar span { margin-top: 7px !important; } #fa_toolbar #fa_search #fa_textarea { text-indent: 5px !important; width: 400px !important; height: 25px; font-size: 14px; } #fa_toolbar #fa_search { margin-left: 5px; } #fa_toolbar #fa_share, #fa_toolbar #fa_service, #fa_toolbar #fa_menu #fa_welcome, #fa_toolbar #fa_right a.rightHeaderLink { display: none !important; font-size: 0px !important; } #fa_toolbar #fa_icon { margin-left: 40px; } #fa_search #fa_magnifier { margin-left: 370px; background: url('http://i.imgur.com/Ap7FuC4.png') no-repeat -0px !important; }