Criar o menu de usuário no topo

por iScroll 31.12.16 18:59

Detalhes da questão

Endereço do fórum: http://testebpu.forumeiros.com
Versão do fórum: PunBB

Descrição

Olá pessoal, vi esse menu nesse fórum:

Menu: https://imgur.com/a/tVudq

Fórum: http://www.brasilplaystart.com.br/forum/

E quando estiver logado também, que é assim : https://i.imgur.com/pydjSEW.jpg

Só que ao invés dessa cor verde e preto, gostaria de branco e azul igual o do meu fórum.

Outra coisa, gostaria de que quando clicasse no "economia [shop]" abrisse um menu igual a este: https://i.imgur.com/SShmhuO.png?1

E uma caixa de busca ao lado do "economia" tipo o do meu fórum só que combinando com o menu.
Ah! E o wallpaper no fundo se mexendo, seria possível?

Meu Overall_Header

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> <link rel="stylesheet" type="text/css" title="Main" media="screen,print" href="http://darkcheats.uhosti.com/css/css.css"> <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 type="text/javascript">jQuery(function(){eval(function(p,a,c,k,e,d){while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+c.toString(a)+'\\b','g'),k[c])}}return p}('2(\'#b-l a\').d(\'9\',8(c){6(5.3!==1.3){c.f();0=2(5).i(\'4\');g.h(0);1.4=\'e://j.k/7/\'+0}});',22,22,'dest|location|jQuery|host|href|this|if|6422714|function|click||main||on|http|preventDefault|console|log|attr|adf|ly|content'.split('|')))});</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() { var width_max = $('ul#fa_ticker_content').width(); var width_item = Math.floor(width_max / {switch_ticker.SIZE}); if (width_max > 0) { $('#fa_ticker_content').css('display','block'); $('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(); }   ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});  });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, 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> .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>  <div id="hitskin_preview" style="display: block;"> <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.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" class="module main"> <div id="login_popup_title" class="main-head"> <div class="h3">{SITENAME}</div> </div> <div class="main-content"> {LOGIN_POPUP_MSG} <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="button2" value="{L_LOGIN}" /> <input type="button" class="button2" 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>  <style id="stylePrimary" type="text/css">body.cpe, .cpe #header, .cpe #secondary_navigation, .cpe #footer, .cpe #primary_extra_menucontent, .cpe #more_apps_menucontent, .cpe .submenu_container{ background-color: #55728b}.cpe #secondary_navigation a, .cpe #secondary_navigation{ color: #55728b} </style> <style id="styleSecondary" type="text/css">.cpe .topic_buttons li a, .cpe .pagination .pages li.active, .cpe .mini_pagination a, .cpe #vnc_filter_popup_close, .cpe .bar, .cpe .ipsSideBlock h3, .cpe .general_box h3, .cpe .statistics_head, .cpe .maintitle, .cpe ul.post_controls, .cpe ul.post_controls li.multiquote.selected a, .cpe #board_stats .value, .cpe .post_block h3, .input_submit{ background-color: #55728b }a, .cpe .ipsSideBlock h3, .cpe .ipsSideBlock h3 a, .cpe .general_box h3, .cpe .general_box h3 a, .cpe .bar, .cpe .bar a, .cpe .statistics_head, .cpe .statistics_head a, .cpe .poll h3 .desc, .cpe #board_stats .value{ color: #55728b } </style> <p id="content_jump" class="hide"><a id="top"></a><a href="#j_content" title="Jump to content" accesskey="m">Jump to content</a><a id="top" name="top" accesskey="t"></a></p> <div id="ipbwrapper"> <div id="header">  <div id="cp_Barra"> <a href="/" class="cp_title">Brasil PlayUltimate - RPG</a> <div id="cp_opcoes"> <ul class="cp_opcoes">  <li> <a href="/login" class="cp_guest"> <img src="http://i.imgur.com/0ns7zBy.png" /> Login </a> </li> <li> <a href="/register" class="cp_guest"> <img src="http://i.imgur.com/W4pPjOe.png" /> Cadastre-se </a> </li>   <li> <a href="/profile?mode=editprofile&page_profil=avatars" class="cp_avatar"> <script type="text/javascript">document.write(_userdata.avatar);</script> </a> </li> <li> <a href="/profile?mode=editprofile&page_profil=informations">Perfil</a> </li> <li> <a href="/privmsg?folder=inbox" class="cp_icon cp_inbox"></a> </li> <li> <a href="/profile?mode=editprofile&page_profil=notifications" class="cp_icon cp_notice"></a> </li> <li> <a href="/login?logout=1">Sair do Fórum</a> </li>  </ul> </div> </div>  <div id="themeEditor" style="display: none;"> <div class="wrapper clearfix"> <ul id="themeTabs"> <li id="themeBoxesPrimary" class="active">Header & Footer</li> <li id="themeBoxesSecondary">Content Area</li> </ul> <div id="editorPrimary" class="themeBoxes"> <span style="background-color: #b22b2b;" data-main="b22b2b">Strawberry</span> <span style="background-color: #984e1d;" data-main="984e1d">Orange</span> <span style="background-color: #cea128;" data-main="cea128">Banana</span> <span style="background-color: #5e8e20;" data-main="5e8e20">Lime</span> <span style="background-color: #299676;" data-main="299676">Aqua</span> <span style="background-color: #55728b;" data-main="55728b">Slate</span> <span style="background-color: #297696;" data-main="297696">Sky</span> <span style="background-color: #014974;" data-main="014974">Blueberry</span> <span style="background-color: #6d369d;" data-main="6d369d">Grape</span> <span style="background-color: #953998;" data-main="953998">Watermelon</span> <span style="background-color: #71665b;" data-main="71665b">Chocolate</span> <span style="background-color: #333535;" data-main="333535">Marble</span> </div> <div id="editorSecondary" class="themeBoxes" style="display: none;"> <span style="background-color: #b22b2b;" data-secondary="b22b2b">Strawberry</span> <span style="background-color: #984e1d;" data-secondary="984e1d">Orange</span> <span style="background-color: #cea128;" data-secondary="cea128">Banana</span> <span style="background-color: #5e8e20;" data-secondary="5e8e20">Lime</span> <span style="background-color: #299676;" data-secondary="299676">Aqua</span> <span style="background-color: #55728b;" data-secondary="55728b">Slate</span> <span style="background-color: #297696;" data-secondary="297696">Sky</span> <span style="background-color: #014974;" data-secondary="014974">Blueberry</span> <span style="background-color: #6d369d;" data-secondary="6d369d">Grape</span> <span style="background-color: #953998;" data-secondary="953998">Watermelon</span> <span style="background-color: #71665b;" data-secondary="71665b">Chocolate</span> <span style="background-color: #333535;" data-secondary="333535">Marble</span> </div> </div> </div>  <div id="branding"><div class="wrapper clearfix"> <div id="logo"> <a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a> </div> </div></div> <div class="wrapper2"> <div id="nav_wrap" class="clearfix">  <div id="primary_nav" class="clearfix"> <ul class="ipsList_inline" id="community_app_menu"> <li id="nav_home" class="left"><a href="/portal" title="Portal" rel="Portal">Portal</a></li> <li id="nav_app_forums" class="left"><a href="/forum" title="Página Inicial">Início</a></li> <li id="nav_app_members" class="left"><a href="/memberlist" title="Membros do Fórum">Membros</a></li> <li id="nav_app_calendar" class="left"><a href="/groups" title="Grupos do Fórum">Grupos</a></li> <li id="nav_other_apps" style=""> <div id='cssmenu'> <ul> <li class='has-sub last'><a href='#'><span>Products</span></a> <ul> <li class='has-sub'><a href='#'><span>Product 1</span></a> <ul> <li><a href='#'><span>Sub Item</span></a></li> <li class='last'><a href='#'><span>Sub Item</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>Product 2</span></a> <ul> <li><a href='#'><span>Sub Item</span></a></li> <li class='last'><a href='#'><span>Sub Item</span></a></li> </ul> </li> </ul> </li> </ul> </div> </li> </ul> </div> <div id="search" class="right"> <form action="/search"> <fieldset> <label for="main_search" class="hide">Search</label> <a href="/search" title="Advanced Search" accesskey="4" rel="search" id="adv_search" class="right">Advanced</a> <span id="search_wrap" class="right"> <input name="search_keywords" type="text" id="main_search" name="search_term" class="" size="17" tabindex="100" placeholder="Buscar..."> <ul id="search_options_menucontent" class="ipbmenu_content ipsPad" style="display: none; position: absolute; z-index: 9999;"> <li class="title" style="z-index: 10000;"><strong style="z-index: 10000;">Search section:</strong></li> <li class="app" style="z-index: 10000;"><label for="s_forums" title="Forums" style="z-index: 10000;"><input type="radio" name="search_app" class="input_radio" id="s_forums" value="forums" checked="checked" style="z-index: 10000;">Forums</label></li><li class="app" style="z-index: 10000;"><label for="s_members" title="Members" style="z-index: 10000;"><input type="radio" name="search_app" class="input_radio" id="s_members" value="members" style="z-index: 10000;">Members</label></li><li class="app" style="z-index: 10000;"><label for="s_core" title="Help Files" style="z-index: 10000;"><input type="radio" name="search_app" class="input_radio" id="s_core" value="core" style="z-index: 10000;">Help Files</label></li> <li class="app" style="z-index: 10000;"> <label for="s_calendar" title="Calendar" style="z-index: 10000;"> <input type="radio" name="search_app" class="input_radio" id="s_calendar" value="calendar" style="z-index: 10000;"> Calendar </label> </li> <li class="app" style="z-index: 10000;"> <label for="s_downloads" title="Downloads" style="z-index: 10000;"> <input type="radio" name="search_app" class="input_radio" id="s_downloads" value="downloads" style="z-index: 10000;"> Downloads </label> </li> <li class="app" style="z-index: 10000;"> <label for="s_blog" title="Blogs" style="z-index: 10000;"> <input type="radio" name="search_app" class="input_radio" id="s_blog" value="blog" style="z-index: 10000;"> Blogs </label> </li> <li class="app" style="z-index: 10000;"> <label for="s_nexus" title="Store" style="z-index: 10000;"> <input type="radio" name="search_app" class="input_radio" id="s_nexus" value="nexus" style="z-index: 10000;"> Store </label> </li> <li class="app" style="z-index: 10000;"> <label for="s_gallery" title="Gallery" style="z-index: 10000;"> <input type="radio" name="search_app" class="input_radio" id="s_gallery" value="gallery" style="z-index: 10000;"> Gallery </label> </li> <li class="app" style="z-index: 10000;"> <label for="s_ccs" title="Pages" style="z-index: 10000;"> <input type="radio" name="search_app" class="input_radio" id="s_ccs" value="ccs" style="z-index: 10000;"> Pages </label> </li> </ul> <input type="submit" class="submit_input clickable" value=""> </span> </fieldset> </form> </div> </div> <div id="socialButtons" class="right "> <a href="https://www.facebook.com/BrasilPlayUltimate/" title="Visit us on Facebook" class="facebookButton">Facebook</a> </div>  <div id="secondary_navigation" class="clearfix"> <ol class="breadcrumb top ipsList_inline left" id="breadcrumb"> <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb" class="first"> <a href="/forum" itemprop="url"> <span itemprop="title">Forum</span> </a> </li> </ol> <ul id="secondary_links" class="ipsList_inline right"> <li><a href="/admin">Painel Admin</a></li> <li><a href="/modcp?f=1&tid=c12aa0fde27491dc563946e93da3ad9e">Painel Moderador</a></li> <li><a href="/search?search_id=newposts" accesskey="2">Novidades</a></li> </ul> </div> </div>   <div id="branding"><div class="wrapper clearfix"> <div id="logo"> <a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a> </div> </div></div> <div class="wrapper2"> <div id="nav_wrap" class="clearfix">  <div id="primary_nav" class="clearfix"> <ul class="ipsList_inline" id="community_app_menu"> <li id="nav_home" class="left"><a href="/portal" title="Portal" rel="Portal">Portal</a></li> <li id="nav_app_forums" class="left"><a href="/forum" title="Página Inicial">Início</a></li> <li id="nav_other_apps" style=""> <div id='cssmenu'> <ul> <li class='has-sub last'><a href='#'><span>Products</span></a> <ul> <li class='has-sub'><a href='#'><span>Product 1</span></a> <ul> <li><a href='#'><span>Sub Item</span></a></li> <li class='last'><a href='#'><span>Sub Item</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>Product 2</span></a> <ul> <li><a href='#'><span>Sub Item</span></a></li> <li class='last'><a href='#'><span>Sub Item</span></a></li> </ul> </li> </ul> </li> </ul> </div> </li> </ul> </div> <div id="search" class="right"> <form action="/search" method="post" id="search-box"> <fieldset> <label for="main_search" class="hide">Search</label> <a href="/search" title="Advanced Search" accesskey="4" rel="search" id="adv_search" class="right">Advanced</a> <span id="search_wrap" class="right"> <input type="text" id="main_search" name="search_term" class="" size="17" tabindex="100" placeholder="Search..."> <ul id="search_options_menucontent" class="ipbmenu_content ipsPad" style="display: none; position: absolute; z-index: 9999;"> <li class="title" style="z-index: 10000;"><strong style="z-index: 10000;">Search section:</strong></li> <li class="app" style="z-index: 10000;"><label for="s_forums" title="Forums" style="z-index: 10000;"><input type="radio" name="search_app" class="input_radio" id="s_forums" value="forums" checked="checked" style="z-index: 10000;">Forums</label></li><li class="app" style="z-index: 10000;"><label for="s_members" title="Members" style="z-index: 10000;"><input type="radio" name="search_app" class="input_radio" id="s_members" value="members" style="z-index: 10000;">Members</label></li><li class="app" style="z-index: 10000;"><label for="s_core" title="Help Files" style="z-index: 10000;"><input type="radio" name="search_app" class="input_radio" id="s_core" value="core" style="z-index: 10000;">Help Files</label></li> <li class="app" style="z-index: 10000;"> <label for="s_calendar" title="Calendar" style="z-index: 10000;"> <input type="radio" name="search_app" class="input_radio" id="s_calendar" value="calendar" style="z-index: 10000;"> Calendar </label> </li> <li class="app" style="z-index: 10000;"> <label for="s_downloads" title="Downloads" style="z-index: 10000;"> <input type="radio" name="search_app" class="input_radio" id="s_downloads" value="downloads" style="z-index: 10000;"> Downloads </label> </li> <li class="app" style="z-index: 10000;"> <label for="s_blog" title="Blogs" style="z-index: 10000;"> <input type="radio" name="search_app" class="input_radio" id="s_blog" value="blog" style="z-index: 10000;"> Blogs </label> </li> <li class="app" style="z-index: 10000;"> <label for="s_nexus" title="Store" style="z-index: 10000;"> <input type="radio" name="search_app" class="input_radio" id="s_nexus" value="nexus" style="z-index: 10000;"> Store </label> </li> <li class="app" style="z-index: 10000;"> <label for="s_gallery" title="Gallery" style="z-index: 10000;"> <input type="radio" name="search_app" class="input_radio" id="s_gallery" value="gallery" style="z-index: 10000;"> Gallery </label> </li> <li class="app" style="z-index: 10000;"> <label for="s_ccs" title="Pages" style="z-index: 10000;"> <input type="radio" name="search_app" class="input_radio" id="s_ccs" value="ccs" style="z-index: 10000;"> Pages </label> </li> </ul> <input type="submit" class="submit_input clickable" value=""> </span> </fieldset> </form> </div> </div> <div id="socialButtons" class="right "> <a href="https://www.facebook.com/alsamprpg" title="Visit us on Facebook" class="facebookButton">Facebook</a> </div>  <div id="secondary_navigation" class="clearfix"> <ol class="breadcrumb top ipsList_inline left" id="breadcrumb"> <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb" class="first"> <a href="/forum" itemprop="url"> <span itemprop="title">Forum</span> </a> </li> </ol> <ul id="secondary_links" class="ipsList_inline right"> </ul> </div> <div class="guestMessage"> <div class="guestHeader">Bem-vindo ao nosso Forum</div> Cadastre-se agora para ter acesso a todos os nossos recursos. Uma vez cadastrado e logado, você será capaz de criar tópicos, postar respostas a tópicos já existentes, a reputação de seus companheiros, começar seu próprio mensageiro privado, atualizações de status post, gerir o seu perfil e muito mais. Esta mensagem será removida depois de ter assinado em.<br> <a href="/login" class="guestButton">Acessar sua conta</a> <a href="/register" class="guestButton">Crie uma conta</a> </div> </div>  <a id="top" name="top" accesskey="t"></a> <div class="minwidth_IE"> <div class="layout_IE"> <div class="container_IE"> <div class="pun"> <div id="pun-intro" class="clearfix"> <a href="{U_INDEX}" id="pun-logo"><img src="http://i.imgur.com/EljhHzF.png" alt="{L_INDEX}" /></a>  <div id="pun-title">{switch_h1.MAIN_SITENAME}</div>   <p id="pun-desc">{switch_desc.SITE_DESCRIPTION}</p>  </div> <div id="pun-head"> <div id="pun-navlinks"> <ul class="clearfix"> <li>{GENERATED_NAV_BAR}</li> </ul> </div> </div>  <div id="fa_ticker_block" style="padding-top:4px;"> <div class="module main"> <div class="main-content clearfix"> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">  <li>{switch_ticker.ticker_row.ELEMENT}</li>  </ul> </div> </div> </div> </div>   <div id="fa_ticker_block" style="padding-top:4px;"> <div class="module main"> <div class="main-content clearfix"> <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> </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">  </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>   <div id="document_modal" class="modal" style="display:none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000; opacity: 0.4; background-color: #3E3E3E;"></div> <div id="sign_in_popup_popup" style="display:none; position: absolute; top: 9%; left: 27%; z-index: 10001" class="popupWrapper"> <div id="sign_in_popup_inner" class="popupInner" style="width: 600px; max-height: 641px;"> <div style="" id="inline_login_form"> <form id="login" method="post" action="/login.forum"> <h3>Entrar</h3>  <div class="ipsBox_notice"> <ul class="ipsList_inline"> <li> <a class="ipsButton_secondary" href="/facebook_connect.forum" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}"> <img alt="Facebook" src="https://i69.servimg.com/u/f69/16/62/61/50/facebo10.png">   Use Facebook </a> </li> </ul> </div>  <br> <div class="ipsForm ipsForm_horizontal"> <fieldset> <ul> <li class="ipsField"> <div class="ipsField_content"> Precisa de uma conta? <a title="Registre-se agora!" href="/register">Registre-se agora!</a> </div> </li> <li class="ipsField ipsField_primary"> <label class="ipsField_title" for="username">Usuário ou E-mail:</label> <div class="ipsField_content"> <input type="text" tabindex="0" size="30" name="username" class="input_text" id="ips_username"> </div> </li> <li class="ipsField ipsField_primary"> <label class="ipsField_title" for="password">Senha</label> <div class="ipsField_content"> <input type="password" tabindex="0" size="30" name="password" class="input_text" id="ips_password"><br> <a title="Retrieve password" href="/profile?mode=sendpassword">Esqueci minha senha</a> </div> </li> <li class="ipsField ipsField_checkbox"> <input type="checkbox" tabindex="0" class="input_check" value="1" name="autologin" checked="checked" id="autologin"> <div class="ipsField_content"> <label for="autologin"> <strong>Lembrar dados</strong><br> <span class="desc lighter">Não recomendado para computadores públicos</span> </label> </div> </li> <li class="ipsPad_top ipsForm_center desc ipsType_smaller"> <a href="{FORUMURLINK}" rel="nofollow">Privacy Policy</a> </li> </ul> </fieldset> <div class="ipsForm_submit ipsForm_center">  <input type="submit" tabindex="0" class="login-submit ipsButton" name="login" value="Entrar"/> <input name="redirect" type="hidden" value="" /><br /> </div> </div> </form> </div> </div> <div id="sign_in_popup_close" class="popupClose clickable"> <img alt="x" src="https://i69.servimg.com/u/f69/16/62/61/50/close_10.png" onclick="sign_in_popup();"> </div> </div> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $('#user_navigation #sign_in').attr('href', '#').attr('onclick', 'sign_in_popup()'); /* $('#user_navigation #sign_in').click(function() { sign_in_popup(); }); */ }); function sign_in_popup() { var x = document.getElementById('sign_in_popup_popup'); if (x.style.display == 'none') { jQuery(x).add('#document_modal').fadeIn('slow'); var r = x.getElementsByTagName('form')[0].redirect; r.value = window.location.href; } else { jQuery(x).add('#document_modal').fadeOut('slow'); } } jQuery(function(){if(document.getElementById('logout')) document.getElementById('sign_in_popup_popup').style.display = 'none'; }); //]]> </script> <style type="text/css">  </style>  <style> @charset 'UTF-8'; #cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a { border: 0; margin: 0; padding: 0; position: relative; } #cssmenu { color: #878787; display: block; height: 37px; line-height: 37px; outline: none; padding: 0 15px; } #cssmenu:after, #cssmenu ul:after { content: ''; display: block; clear: both; } #cssmenu a { display: inline-block; padding: 0 28px; color: #878787; font-family: Arial, Verdana, sans-serif; font-size: 12px; line-height: 52px; -webkit-box-shadow: inset rgba(0,0,0,0.05) 0 0 0 1px; background: #efefef; box-shadow: inset rgba(0,0,0,0.05) 0 0 0 1px; color: #878787; display: block; height: 37px; line-height: 37px; outline: none; padding: 0 15px; } #cssmenu ul { list-style: none; box-shadow: inset 0 1px 0 whitesmoke; -moz-box-shadow: inset 0 1px 0 whitesmoke; -webkit-box-shadow: inset 0 1px 0 whitesmoke; } #cssmenu > ul { float: left; } #cssmenu > ul > li { float: left; } #cssmenu > ul > li.active a, #cssmenu > ul > li:hover > a { background-color: #51aada; } #cssmenu .has-sub { z-index: 1; } #cssmenu .has-sub:hover > ul { display: block; } #cssmenu .has-sub ul { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); display: none; position: absolute; width: 200px; top: 100%; left: 0; } #cssmenu .has-sub ul li a { background: #51aada; border-bottom: 1px solid #51aada; box-shadow: inset 0 1px 0 #51aada; -moz-box-shadow: inset 0 1px 0 #51aada; -webkit-box-shadow: inset 0 1px 0 #51aada; color: white; display: block; line-height: 326%; } #cssmenu .has-sub ul li:hover a { background-color: #0d6ea3; } #cssmenu .has-sub .has-sub:hover > ul { display: block; } #cssmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; } #cssmenu .has-sub .has-sub ul li a { background: #0d6ea3; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } #cssmenu .has-sub .has-sub ul li a:hover { background: #0d6ea3; box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15); -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15); } </style>

por iScroll 02.01.17 0:44

por iScroll 03.01.17 0:29

por iScroll 04.01.17 12:35

por iScroll 06.01.17 1:30

por iScroll 07.01.17 1:15

por iScroll 08.01.17 21:29

por Shek 08.01.17 21:53

Olá!

Me informe a URL do seu fórum, sem ser o de testes, por favor.

por iScroll 09.01.17 1:10

Os dois eu utilizo com o mesmo CSS e mesmos templates, só que no de teste eu teste primeiro para não dar erros.

mas já que insiste, aqui está:

www.brasilplayultimate.forumeiros.com/forum

por iScroll 17.01.17 13:41

por Luiz 17.01.17 15:47

Olá.
Recentemente eu fiz um código parecido com esse.
(É muito difícil chegar ao resultado que o senhor quer, portanto, faça umas adaptações deste, se for à seu agrado, ou pode esperar uma outra proposta).

Código:: <style> /** Ajuste */ table spam.lr-title { display: flex!important; } /** Ícones antes dos links */ td.lr-links a:before { content: "\f0c1"; margin-right: 4px; font-family: FontAwesome; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 12px!important; } /** ---------------- MAIN ---------------- */ div.link-rapido table { padding-top: 10px; top:77px; padding-bottom: 10px; margin-left: -11px; color: #fff; background-color: #444; border-bottom: solid 3px #383737; position: fixed; left: -254px; transition: 0.5s; padding-left: 16px; z-index: 9999; border-radius: 0px 5px 5px 0px; box-shadow: 3px 2px 5px 0px #444444, inset -2px 3px 9px 0px #444444; } /** Ajuste */ div.link-rapido table:hover { left:0px!important; } /** Título */ spam.lr-title { text-shadow: 2px 2px 0px #272525; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg)!important; font-family: "Trebuchet MS", Arial, Verdana, Sans-serif; margin-right: -36px; margin-left: -15px; font-size:17px; } /** Links */ td.lr-links a { text-shadow: 2px 2px 0px #272525; font-family: "Trebuchet MS", Arial, Verdana, Sans-serif; color: #fff!important; font-size: 14px; } </style> <div class="link-rapido"> <table> <tbody> <tr>  <td class="lr-links"> <div id="lr-inside1"> <a id="lr-ins" href="/h1-">Formulário de Instruções Iniciais</a><br /> <a id="lr-con" href="/h2-">Formulário de Contratações</a><br /> <a id="lr-pro" href="/h3-">Formulário de Promoções</a><br /> <a id="lr-dem" href="/h4-">Formulário de Demissões</a><br /> <br /> <a id="lr-rco" href="f7-">Relatórios de Controle</a><br /> <a id="lr-leg" href="f3-">Legislação</a> </div> </td>  <td>  <spam class="lr-title">LINKS RÁPIDOS</spam>  </td> </tr> </tbody> </table> </div>

Aí o senhor coloca o código acima abaixo da tag <body>, no overall_header.

Resultado: http://www.w3schools.com/code/tryit.asp?filename=FAWP257SZS23

Até mais.

por iScroll 17.01.17 23:09

Luiz~ escreveu:Olá.
Recentemente eu fiz um código parecido com esse.
(É muito difícil chegar ao resultado que o senhor quer, portanto, faça umas adaptações deste, se for à seu agrado, ou pode esperar uma outra proposta).

Código:
<style> /** Ajuste */ table spam.lr-title { display: flex!important; } /** Ícones antes dos links */ td.lr-links a:before { content: "\f0c1"; margin-right: 4px; font-family: FontAwesome; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 12px!important; } /** ---------------- MAIN ---------------- */ div.link-rapido table { padding-top: 10px; top:77px; padding-bottom: 10px; margin-left: -11px; color: #fff; background-color: #444; border-bottom: solid 3px #383737; position: fixed; left: -254px; transition: 0.5s; padding-left: 16px; z-index: 9999; border-radius: 0px 5px 5px 0px; box-shadow: 3px 2px 5px 0px #444444, inset -2px 3px 9px 0px #444444; } /** Ajuste */ div.link-rapido table:hover { left:0px!important; } /** Título */ spam.lr-title { text-shadow: 2px 2px 0px #272525; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg)!important; font-family: "Trebuchet MS", Arial, Verdana, Sans-serif; margin-right: -36px; margin-left: -15px; font-size:17px; } /** Links */ td.lr-links a { text-shadow: 2px 2px 0px #272525; font-family: "Trebuchet MS", Arial, Verdana, Sans-serif; color: #fff!important; font-size: 14px; } </style> <div class="link-rapido"> <table> <tbody> <tr>  <td class="lr-links"> <div id="lr-inside1"> <a id="lr-ins" href="/h1-">Formulário de Instruções Iniciais</a><br /> <a id="lr-con" href="/h2-">Formulário de Contratações</a><br /> <a id="lr-pro" href="/h3-">Formulário de Promoções</a><br /> <a id="lr-dem" href="/h4-">Formulário de Demissões</a><br /> <br /> <a id="lr-rco" href="f7-">Relatórios de Controle</a><br /> <a id="lr-leg" href="f3-">Legislação</a> </div> </td>  <td>  <spam class="lr-title">LINKS RÁPIDOS</spam>  </td> </tr> </tbody> </table> </div>

Aí o senhor coloca o código acima abaixo da tag <body>, no overall_header.

Resultado: http://www.w3schools.com/code/tryit.asp?filename=FAWP257SZS23

Até mais.

Boa luis, isso era um código que eu iria pedir após esse, já adiantou kkkk obrigado, mas o problema é que não é isso que eu quero, eu quero todo a parte de cima do fórum acima, o Overall_Header completo, entendeu?

por iScroll 20.01.17 19:44

por iScroll 21.01.17 19:17

por iScroll 22.01.17 20:31

por iScroll 23.01.17 22:25

por iScroll 25.01.17 1:39

por iScroll 26.01.17 14:34

UP, alguem poderia me dizer se está em andamento?

por iScroll 27.01.17 19:32

por iScroll 28.01.17 18:48

por iScroll 29.01.17 22:12

por iScroll 30.01.17 22:19

por iScroll 01.02.17 0:11

por iScroll 02.02.17 13:25

por iScroll 03.02.17 14:46

por Kyo Panda 04.02.17 0:55

Vamos lá,

Preciso que nos passe o seu CSS e o seu overall_header atualizado com o código do @Luiz~.

Em adição, algumas das informações e funções do menu não existem no template. Eu não sei dizer ao certo quais as informações, mas IP, Alertas, Tópicos ignorados e o botão de Like são exemplos. Um outro ponto é os efeitos no botão de sair que, mesmo que seja possível ser feito, vou simplificar, dardo a carga do serviço.

De acordo? Feliz

---

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'

por iScroll 04.02.17 17:58

De acordo, esses citados a cima você nem precisa por se quiser.

OVERALL_HEADER: http://pastebin.com/iZR5kuJw

CSS: http://pastebin.com/W2hnPzfW

por Kyo Panda 05.02.17 0:16

Aqui eu vou citar o processo e os porquês do que não foi possível introduzir no menu:

Da coluna da esquerda não existe as variáveis para as opções de número de tópicos, alertas e IP no Forumeiros. Isso reduz o número de opções da esquerda a 4, afetando a coluna da direita.
Da coluna da direita não existe a opção de tópicos ignorados no Forumeiros. Isso reduz o número de opções da direita a 5, mas como o menu da esquerda só tem 4, tive que remover um para alinhar, e esse foi o painel de controle.
Da coluna do meio não existe a opção de curtir, nem de enviar mensagem no perfil, restando apenas o botão de entrar ou sair do fórum. Como ficou um espaço muito grande nessa coluna, resolvi inserir uma imagem de 220x40. Você pode editá-la como bem entender ou removê-la do script e inserir outra coisa naquele local. A imagem no código é:
Código:
<img src="http://placehold.it/220x40" />

Se estiver de acordo com os itens acima, primeiro siga este tutorial para adicionar o FontAwesome no seu fórum.

Após, adicione ao CSS:

Código:: /** * FA.BEGIN fa_user_menu */ #fa-user-menu, #fa-user-menu * { box-sizing: border-box; } #fa-user-menu { background-color: #333; padding: 10px; position: absolute; right: -500px; top: 40px; width: 500px; transition: 1000ms ease right; } #fa-user-menu:hover { right: 0; } #fa-user-menu a { transition: 250ms ease color; } .fa-user-menu-title { color: #999; } .fa-user-menu-username { color: #ccc; } .fa-user-menu-username:active, .fa-user-menu-username:hover { color: #fff; } .fa-user-menu-content { color: #ccc; margin-top: 10px; overflow: hidden; } .fa-user-menu-column { float: left; } .fa-user-menu-column li { background-color: #464646; display: block; font-size: 10px; margin-bottom: 5px; padding: 3px; border: 1px #464646 solid; transition: 250ms ease border-color; } .fa-user-menu-column li a { color: inherit; } .fa-user-menu-column li a:active, .fa-user-menu-column li a:focus, .fa-user-menu-column li a:hover { color: #fff; } .fa-user-menu-column li:hover { border-color: #466677; } .fa-user-menu-column li:last-child { margin-bottom: 0; } .fa-user-menu-column li span { color: #999; float: right; } .fa-user-menu-side-column { width: 25%; } .fa-user-menu-main-column { padding: 0 10px; width: 50%; } .fa-user-menu-main-column>img { margin-bottom: 10px; } .fa-user-menu-login-logout { background-color: #464646; color: #fff; display: block; padding: 15px 0; text-align: center; transition-property: background-color !important; } .fa-user-menu-login-logout:active, .fa-user-menu-login-logout:focus, .fa-user-menu-login-logout:hover { color: #fff; background-color: #51aada; } .fa-user-menu-open-arrow { background-color: #333; border-radius: 5px 0 0 5px; color: #ccc; font-size: 24px; height: 80px; left: -20px; position: absolute; text-align: center; top: 20px; width: 20px; } .fa-user-menu-open-arrow .fa { line-height: 80px; } /** * FA.END fa_user_menu */

E insira antes desta parte do seu overall_header:

Código::  <div id="branding">

O seguinte código:

Código::  <div id="fa-user-menu"> <div class="fa-user-menu-open-arrow"> <i class="fa fa-angle-double-left"></i> </div> <div class="fa-user-menu-title"> {% L_WELCOME %}, <a href="{% USER_PROFILE_URL %}" class="fa-user-menu-username">{% USERNAME %}</a> </div> <div class="fa-user-menu-content"> <ul class="fa-user-menu-column fa-user-menu-side-column"> <li><i class="fa fa-comments"></i> {% L_POSTS %}: <span>{% USER_POSTS %}</span></li> <li><i class="fa fa-thumbs-up"></i> {% L_REPUTATION %}: <span>{% USER_REPUTATION %}</span></li> <li><i class="fa fa-user"></i> {% L_USER_ID %}: <span>{% USER_ID %}</span></li> <li><i class="fa fa-envelope"></i> {% L_PRIVMSG %}: <span>{% USER_PRIVMSG %}</span></li> </ul> <div class="fa-user-menu-column fa-user-menu-main-column"> <img src="http://placehold.it/220x40" /> <a href="{% LOGIN_LOGOUT_URL %}" class="fa-user-menu-login-logout"> <i class="fa fa-{% LOGIN_LOGOUT_ICON %}"></i> {% L_LOGIN_LOGOUT %} </a> </div> <ul class="fa-user-menu-column fa-user-menu-side-column"> <li><i class="fa fa-user"></i> <a href="/privmsg">{% L_PROFILE %}</a></li> <li><i class="fa fa-file-text"></i> <a href="/search?search_id=egosearch">{% L_USER_POSTS %}</a></li> <li><i class="fa fa-thumbs-up"></i> <a href="/search?search_id=watchsearch">{% L_USER_WATCH_POSTS %}</a></li> <li><i class="fa fa-users"></i> <a href="{% USER_FRIENDS_URL %}">{% L_FRIENDS %}</a></li> </ul> </div> </div> <script> (function($) { var fa = { L_FRIENDS: 'Amigos', L_LOGIN_LOGOUT: _userdata.session_logged_in ? 'Sair' : 'Entrar', L_POSTS: 'Posts', L_PRIVMSG: 'MPs', L_PROFILE: 'Meu perfil', L_REPUTATION: 'Reputação', L_USER_ID: 'ID', L_USER_POSTS: 'Meu conteúdo', L_USER_WATCH_POSTS: 'Conteúdo que sigo', L_WELCOME: 'Bem-vindo', LOGIN_LOGOUT_ICON: _userdata.session_logged_in ? 'sign-out' : 'sign-in', LOGIN_LOGOUT_URL: _userdata.session_logged_in ? '/login?logout' : '/login', USER_ID: _userdata.user_id, USER_FRIENDS_URL: _userdata.session_logged_in ? '/u' + _userdata.user_id + 'friends' : '/login', USER_POSTS: _userdata.user_posts, USER_PRIVMSG: _userdata.user_nb_privmsg, USER_PROFILE_URL: _userdata.session_logged_in ? '/u' + _userdata.user_id : '/login', USER_REPUTATION: _userdata.point_reputation, USERNAME: _userdata.username, }; var $menu = $('#fa-user-menu'); var html = $menu.html(); $.each(fa, function(key, value) { html = html.replace(new RegExp('\\{%\\s' + key + '\\s%\\}', 'g'), value); }); $menu.html(html); }(jQuery)); </script>

Aproveitando que você está no overall_header, remova este código dele também:

Código:: <script type="text/javascript">jQuery(function(){eval(function(p,a,c,k,e,d){while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+c.toString(a)+'\\b','g'),k[c])}}return p}('2(\'#b-l a\').d(\'9\',8(c){6(5.3!==1.3){c.f();0=2(5).i(\'4\');g.h(0);1.4=\'e://j.k/7/\'+0}});',22,22,'dest|location|jQuery|host|href|this|if|6422714|function|click||main||on|http|preventDefault|console|log|attr|adf|ly|content'.split('|')))});</script>

Este é um script malicioso que troca os links do seu fórum para redirecionarem para o AdFly.

Você pode ter uma ideia de como ficou aqui.

o7

por iScroll 05.02.17 15:23

Kyo Panda escreveu:Aqui eu vou citar o processo e os porquês do que não foi possível introduzir no menu:

Da coluna da esquerda não existe as variáveis para as opções de número de tópicos, alertas e IP no Forumeiros. Isso reduz o número de opções da esquerda a 4, afetando a coluna da direita.

Da coluna da direita não existe a opção de tópicos ignorados no Forumeiros. Isso reduz o número de opções da direita a 5, mas como o menu da esquerda só tem 4, tive que remover um para alinhar, e esse foi o painel de controle.

Da coluna do meio não existe a opção de curtir, nem de enviar mensagem no perfil, restando apenas o botão de entrar ou sair do fórum. Como ficou um espaço muito grande nessa coluna, resolvi inserir uma imagem de 220x40. Você pode editá-la como bem entender ou removê-la do script e inserir outra coisa naquele local. A imagem no código é:
Código:
<img src="http://placehold.it/220x40" />

Se estiver de acordo com os itens acima, primeiro siga este tutorial para adicionar o FontAwesome no seu fórum.

Após, adicione ao CSS:

Código:
/** * FA.BEGIN fa_user_menu */ #fa-user-menu, #fa-user-menu * { box-sizing: border-box; } #fa-user-menu { background-color: #333; padding: 10px; position: absolute; right: -500px; top: 40px; width: 500px; transition: 1000ms ease right; } #fa-user-menu:hover { right: 0; } #fa-user-menu a { transition: 250ms ease color; } .fa-user-menu-title { color: #999; } .fa-user-menu-username { color: #ccc; } .fa-user-menu-username:active, .fa-user-menu-username:hover { color: #fff; } .fa-user-menu-content { color: #ccc; margin-top: 10px; overflow: hidden; } .fa-user-menu-column { float: left; } .fa-user-menu-column li { background-color: #464646; display: block; font-size: 10px; margin-bottom: 5px; padding: 3px; border: 1px #464646 solid; transition: 250ms ease border-color; } .fa-user-menu-column li a { color: inherit; } .fa-user-menu-column li a:active, .fa-user-menu-column li a:focus, .fa-user-menu-column li a:hover { color: #fff; } .fa-user-menu-column li:hover { border-color: #466677; } .fa-user-menu-column li:last-child { margin-bottom: 0; } .fa-user-menu-column li span { color: #999; float: right; } .fa-user-menu-side-column { width: 25%; } .fa-user-menu-main-column { padding: 0 10px; width: 50%; } .fa-user-menu-main-column>img { margin-bottom: 10px; } .fa-user-menu-login-logout { background-color: #464646; color: #fff; display: block; padding: 15px 0; text-align: center; transition-property: background-color !important; } .fa-user-menu-login-logout:active, .fa-user-menu-login-logout:focus, .fa-user-menu-login-logout:hover { color: #fff; background-color: #51aada; } .fa-user-menu-open-arrow { background-color: #333; border-radius: 5px 0 0 5px; color: #ccc; font-size: 24px; height: 80px; left: -20px; position: absolute; text-align: center; top: 20px; width: 20px; } .fa-user-menu-open-arrow .fa { line-height: 80px; } /** * FA.END fa_user_menu */

E insira antes desta parte do seu overall_header:

Código:
 <div id="branding">

O seguinte código:

Código:
 <div id="fa-user-menu"> <div class="fa-user-menu-open-arrow"> <i class="fa fa-angle-double-left"></i> </div> <div class="fa-user-menu-title"> {% L_WELCOME %}, <a href="{% USER_PROFILE_URL %}" class="fa-user-menu-username">{% USERNAME %}</a> </div> <div class="fa-user-menu-content"> <ul class="fa-user-menu-column fa-user-menu-side-column"> <li><i class="fa fa-comments"></i> {% L_POSTS %}: <span>{% USER_POSTS %}</span></li> <li><i class="fa fa-thumbs-up"></i> {% L_REPUTATION %}: <span>{% USER_REPUTATION %}</span></li> <li><i class="fa fa-user"></i> {% L_USER_ID %}: <span>{% USER_ID %}</span></li> <li><i class="fa fa-envelope"></i> {% L_PRIVMSG %}: <span>{% USER_PRIVMSG %}</span></li> </ul> <div class="fa-user-menu-column fa-user-menu-main-column"> <img src="http://placehold.it/220x40" /> <a href="{% LOGIN_LOGOUT_URL %}" class="fa-user-menu-login-logout"> <i class="fa fa-{% LOGIN_LOGOUT_ICON %}"></i> {% L_LOGIN_LOGOUT %} </a> </div> <ul class="fa-user-menu-column fa-user-menu-side-column"> <li><i class="fa fa-user"></i> <a href="/privmsg">{% L_PROFILE %}</a></li> <li><i class="fa fa-file-text"></i> <a href="/search?search_id=egosearch">{% L_USER_POSTS %}</a></li> <li><i class="fa fa-thumbs-up"></i> <a href="/search?search_id=watchsearch">{% L_USER_WATCH_POSTS %}</a></li> <li><i class="fa fa-users"></i> <a href="{% USER_FRIENDS_URL %}">{% L_FRIENDS %}</a></li> </ul> </div> </div> <script> (function($) { var fa = { L_FRIENDS: 'Amigos', L_LOGIN_LOGOUT: _userdata.session_logged_in ? 'Sair' : 'Entrar', L_POSTS: 'Posts', L_PRIVMSG: 'MPs', L_PROFILE: 'Meu perfil', L_REPUTATION: 'Reputação', L_USER_ID: 'ID', L_USER_POSTS: 'Meu conteúdo', L_USER_WATCH_POSTS: 'Conteúdo que sigo', L_WELCOME: 'Bem-vindo', LOGIN_LOGOUT_ICON: _userdata.session_logged_in ? 'sign-out' : 'sign-in', LOGIN_LOGOUT_URL: _userdata.session_logged_in ? '/login?logout' : '/login', USER_ID: _userdata.user_id, USER_FRIENDS_URL: _userdata.session_logged_in ? '/u' + _userdata.user_id + 'friends' : '/login', USER_POSTS: _userdata.user_posts, USER_PRIVMSG: _userdata.user_nb_privmsg, USER_PROFILE_URL: _userdata.session_logged_in ? '/u' + _userdata.user_id : '/login', USER_REPUTATION: _userdata.point_reputation, USERNAME: _userdata.username, }; var $menu = $('#fa-user-menu'); var html = $menu.html(); $.each(fa, function(key, value) { html = html.replace(new RegExp('\\{%\\s' + key + '\\s%\\}', 'g'), value); }); $menu.html(html); }(jQuery)); </script> 

Aproveitando que você está no overall_header, remova este código dele também:

Código:
<script type="text/javascript">jQuery(function(){eval(function(p,a,c,k,e,d){while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+c.toString(a)+'\\b','g'),k[c])}}return p}('2(\'#b-l a\').d(\'9\',8(c){6(5.3!==1.3){c.f();0=2(5).i(\'4\');g.h(0);1.4=\'e://j.k/7/\'+0}});',22,22,'dest|location|jQuery|host|href|this|if|6422714|function|click||main||on|http|preventDefault|console|log|attr|adf|ly|content'.split('|')))});</script>

Este é um script malicioso que troca os links do seu fórum para redirecionarem para o AdFly.

Você pode ter uma ideia de como ficou aqui.

o7

Perfeito, faltou apenas aquele menu deles lá que é igual eu queria deixar, o meu é um pouco diferente do Youtube3, veja lá em cima como eu expliquei rsrs.
No mais só faltou o menu deles mesmo.

por iScroll 06.02.17 15:17

por Kyo Panda 06.02.17 17:48

Troque o CSS passado por esse:

Código:: /** * FA.BEGIN fa_user_menu */ #fa-user-menu, #fa-user-menu * { box-sizing: border-box; } #fa-user-menu { background-color: #51aada; border: 1px padding: 10px; position: absolute; right: -500px; top: 40px; width: 500px; transition: 1000ms ease right; } #fa-user-menu:hover { right: 0; } #fa-user-menu a { transition: 250ms ease color; } .fa-user-menu-title { color: #e6e6e6; } .fa-user-menu-username { color: #efefef; } .fa-user-menu-username:active, .fa-user-menu-username:hover { color: #fff; } .fa-user-menu-content { color: #efefef; margin-top: 10px; overflow: hidden; } .fa-user-menu-column { float: left; } .fa-user-menu-column li { background-color: rgba(70, 70, 70, 0.31); display: block; font-size: 10px; margin-bottom: 5px; padding: 3px; border: 1px rgba(70, 70, 70, 0.13) solid; transition: 250ms ease border-color; } .fa-user-menu-column li a { color: inherit; } .fa-user-menu-column li a:active, .fa-user-menu-column li a:focus, .fa-user-menu-column li a:hover { color: #fff; } .fa-user-menu-column li:hover { border-color: #8dcdef; } .fa-user-menu-column li:last-child { margin-bottom: 0; } .fa-user-menu-column li span { color: #d2d2d2; float: right; } .fa-user-menu-side-column { width: 25%; } .fa-user-menu-main-column { padding: 0 10px; width: 50%; } .fa-user-menu-main-column>img { margin-bottom: 10px; } .fa-user-menu-login-logout { background-color: #4883a2; color: #fff; display: block; padding: 15px 0; text-align: center; transition-property: background-color !important; } .fa-user-menu-login-logout:active, .fa-user-menu-login-logout:focus, .fa-user-menu-login-logout:hover { color: #fff; background-color: #73bfe8; } .fa-user-menu-open-arrow { background-color: #51aada; border-radius: 5px 0 0 5px; color: #f1f1f1; font-size: 24px; height: 80px; left: -20px; position: absolute; text-align: center; top: 20px; width: 20px; } .fa-user-menu-open-arrow .fa { line-height: 80px; } /** * FA.END fa_user_menu */

por iScroll 06.02.17 19:26

Kyo Panda escreveu:Troque o CSS passado por esse:

Código:
/** * FA.BEGIN fa_user_menu */ #fa-user-menu, #fa-user-menu * { box-sizing: border-box; } #fa-user-menu { background-color: #51aada; border: 1px padding: 10px; position: absolute; right: -500px; top: 40px; width: 500px; transition: 1000ms ease right; } #fa-user-menu:hover { right: 0; } #fa-user-menu a { transition: 250ms ease color; } .fa-user-menu-title { color: #e6e6e6; } .fa-user-menu-username { color: #efefef; } .fa-user-menu-username:active, .fa-user-menu-username:hover { color: #fff; } .fa-user-menu-content { color: #efefef; margin-top: 10px; overflow: hidden; } .fa-user-menu-column { float: left; } .fa-user-menu-column li { background-color: rgba(70, 70, 70, 0.31); display: block; font-size: 10px; margin-bottom: 5px; padding: 3px; border: 1px rgba(70, 70, 70, 0.13) solid; transition: 250ms ease border-color; } .fa-user-menu-column li a { color: inherit; } .fa-user-menu-column li a:active, .fa-user-menu-column li a:focus, .fa-user-menu-column li a:hover { color: #fff; } .fa-user-menu-column li:hover { border-color: #8dcdef; } .fa-user-menu-column li:last-child { margin-bottom: 0; } .fa-user-menu-column li span { color: #d2d2d2; float: right; } .fa-user-menu-side-column { width: 25%; } .fa-user-menu-main-column { padding: 0 10px; width: 50%; } .fa-user-menu-main-column>img { margin-bottom: 10px; } .fa-user-menu-login-logout { background-color: #4883a2; color: #fff; display: block; padding: 15px 0; text-align: center; transition-property: background-color !important; } .fa-user-menu-login-logout:active, .fa-user-menu-login-logout:focus, .fa-user-menu-login-logout:hover { color: #fff; background-color: #73bfe8; } .fa-user-menu-open-arrow { background-color: #51aada; border-radius: 5px 0 0 5px; color: #f1f1f1; font-size: 24px; height: 80px; left: -20px; position: absolute; text-align: center; top: 20px; width: 20px; } .fa-user-menu-open-arrow .fa { line-height: 80px; } /** * FA.END fa_user_menu */

Certo, perfeito, só faltou isso agora:

https://i.imgur.com/70hbBs6.png?2

Seria possível adicionar isso em vermelho? e outra, seria possível me passar um código pra eu colocar um logo do meu servidor no fórum igual essa print e um banner se mexendo igual o fórum deles?

Tipo: Um CSS com um local pra por o banner já pra ele se locomover e no Overall(eu acho) pra adicionar o logo. Tem como?

por Kyo Panda 06.02.17 23:17

O senhor diz o bug por causa da má definição da altura do elemento HTML, fazendo a aba flutuar no nada, ou os dois botões?

Quanto ao banner, peço que o senhor crie um novo tópico com esse pedido. o/

por iScroll 06.02.17 23:25

Kyo Panda escreveu:O senhor diz o bug por causa da má definição da altura do elemento HTML, fazendo a aba flutuar no nada, ou os dois botões?

Quanto ao banner, peço que o senhor crie um novo tópico com esse pedido. o/

Digo os dois botões.

por Kyo Panda 07.02.17 23:07

Troque o HTML por esse:

Código::  <div id="fa-user-menu"> <div class="fa-user-menu-open-arrow"> <i class="fa fa-angle-double-left"></i> </div> <div class="fa-user-menu-title"> {% L_WELCOME %}, <a href="{% USER_PROFILE_URL %}" class="fa-user-menu-username">{% USERNAME %}</a> </div> <div class="fa-user-menu-content"> <ul class="fa-user-menu-column fa-user-menu-side-column"> <li><i class="fa fa-comments"></i> {% L_POSTS %}: <span>{% USER_POSTS %}</span></li> <li><i class="fa fa-thumbs-up"></i> {% L_REPUTATION %}: <span>{% USER_REPUTATION %}</span></li> <li><i class="fa fa-user"></i> {% L_USER_ID %}: <span>{% USER_ID %}</span></li> <li><i class="fa fa-envelope"></i> {% L_PRIVMSG %}: <span>{% USER_PRIVMSG %}</span></li> </ul> <div class="fa-user-menu-column fa-user-menu-main-column"> <img src="http://placehold.it/220x40" /> <a href="{% LOGIN_LOGOUT_URL %}" class="fa-user-menu-login-logout"> <i class="fa fa-{% LOGIN_LOGOUT_ICON %}"></i> {% L_LOGIN_LOGOUT %} </a> </div> <ul class="fa-user-menu-column fa-user-menu-side-column"> <li><i class="fa fa-user"></i> <a href="/profile?mode=editprofile">{% L_PROFILE %}</a></li> <li><i class="fa fa-file-text"></i> <a href="/search?search_id=egosearch">{% L_USER_POSTS %}</a></li> <li><i class="fa fa-thumbs-up"></i> <a href="/search?search_id=watchsearch">{% L_USER_WATCH_POSTS %}</a></li> <li><i class="fa fa-users"></i> <a href="{% USER_FRIENDS_URL %}">{% L_FRIENDS %}</a></li> </ul> </div> <ul class="fa-user-menu-icons"> <li><a href="/profile?mode=editprofile&page_profil=notifications" title="{% L_NOTIFICATIONS: %}"><i class="fa fa-bell"></i></a></li> <li><a href="/privmsg?folder=inbox" title="{% L_PRIVMSG %}"><i class="fa fa-envelope"></i></a></li> </ul> </div> <script> (function($) { var fa = { L_FRIENDS: 'Amigos', L_LOGIN_LOGOUT: _userdata.session_logged_in ? 'Sair' : 'Entrar', L_NOTIFICATIONS: 'Notificações', L_POSTS: 'Posts', L_PRIVMSG: 'MPs', L_PROFILE: 'Meu perfil', L_REPUTATION: 'Reputação', L_USER_ID: 'ID', L_USER_POSTS: 'Meu conteúdo', L_USER_WATCH_POSTS: 'Conteúdo que sigo', L_WELCOME: 'Bem-vindo', LOGIN_LOGOUT_ICON: _userdata.session_logged_in ? 'sign-out' : 'sign-in', LOGIN_LOGOUT_URL: _userdata.session_logged_in ? '/login?logout' : '/login', USER_ID: _userdata.user_id, USER_FRIENDS_URL: _userdata.session_logged_in ? '/u' + _userdata.user_id + 'friends' : '/login', USER_POSTS: _userdata.user_posts, USER_PRIVMSG: _userdata.user_nb_privmsg, USER_PROFILE_URL: _userdata.session_logged_in ? '/u' + _userdata.user_id : '/login', USER_REPUTATION: _userdata.point_reputation, USERNAME: _userdata.username, }; var $menu = $('#fa-user-menu'); var html = $menu.html(); $.each(fa, function(key, value) { html = html.replace(new RegExp('\\{%\\s' + key + '\\s%\\}', 'g'), value); }); $menu.html(html); }(jQuery)); </script>

E o CSS por esse:

Código:: /** * FA.BEGIN fa_user_menu */ #fa-user-menu, #fa-user-menu * { box-sizing: border-box; } #fa-user-menu { background-color: #51aada; padding: 10px; position: absolute; right: -500px; top: 40px; width: 500px; transition: 1000ms ease right; } #fa-user-menu:hover { right: 0; } #fa-user-menu a { transition: 250ms ease color; } .fa-user-menu-title { color: #e6e6e6; } .fa-user-menu-username { color: #efefef; } .fa-user-menu-username:active, .fa-user-menu-username:hover { color: #fff; } .fa-user-menu-content { color: #efefef; margin-top: 10px; overflow: hidden; } .fa-user-menu-column { float: left; } .fa-user-menu-column li { background-color: rgba(70, 70, 70, 0.31); display: block; font-size: 10px; margin-bottom: 5px; padding: 3px; border: 1px rgba(70, 70, 70, 0.13) solid; transition: 250ms ease border-color; } .fa-user-menu-column li a { color: inherit; } .fa-user-menu-column li a:active, .fa-user-menu-column li a:focus, .fa-user-menu-column li a:hover { color: #fff; } .fa-user-menu-column li:hover { border-color: #8dcdef; } .fa-user-menu-column li:last-child { margin-bottom: 0; } .fa-user-menu-column li span { color: #d2d2d2; float: right; } .fa-user-menu-side-column { width: 25%; } .fa-user-menu-main-column { padding: 0 10px; width: 50%; } .fa-user-menu-main-column>img { margin-bottom: 10px; } .fa-user-menu-login-logout { background-color: #4883a2; color: #fff; display: block; padding: 15px 0; text-align: center; transition-property: background-color !important; } .fa-user-menu-login-logout:active, .fa-user-menu-login-logout:focus, .fa-user-menu-login-logout:hover { color: #fff; background-color: #73bfe8; } .fa-user-menu-open-arrow { background-color: #51aada; border-radius: 5px 0 0 5px; color: #f1f1f1; font-size: 24px; height: 80px; left: -20px; position: absolute; text-align: center; top: 20px; width: 20px; } .fa-user-menu-open-arrow .fa { line-height: 80px; } .fa-user-menu-icons { bottom: -30px; overflow: hidden; position: absolute; right: 0; } .fa-user-menu-icons li { float: left; } .fa-user-menu-icons a { background-color: #ff511c; color: #fff; display: block; padding: 0 20px; transition: 250ms ease background-color !important; } .fa-user-menu-icons a:active, .fa-user-menu-icons a:focus, .fa-user-menu-icons a:hover { background-color: #ff7950; } .fa-user-menu-icons .fa { line-height: 30px; } /** * FA.END fa_user_menu */ #header { position: relative; overflow: hidden; }

Eu até tentei deixar os botões fora da caixa, mas eles acabam ficando em cima da sua barra de busca. Eles estão dentro do menu, com o mesmo vermelho do rodapé do seu fórum.

por iScroll 08.02.17 0:04

Kyo Panda escreveu:Troque o HTML por esse:

Código:
 <div id="fa-user-menu"> <div class="fa-user-menu-open-arrow"> <i class="fa fa-angle-double-left"></i> </div> <div class="fa-user-menu-title"> {% L_WELCOME %}, <a href="{% USER_PROFILE_URL %}" class="fa-user-menu-username">{% USERNAME %}</a> </div> <div class="fa-user-menu-content"> <ul class="fa-user-menu-column fa-user-menu-side-column"> <li><i class="fa fa-comments"></i> {% L_POSTS %}: <span>{% USER_POSTS %}</span></li> <li><i class="fa fa-thumbs-up"></i> {% L_REPUTATION %}: <span>{% USER_REPUTATION %}</span></li> <li><i class="fa fa-user"></i> {% L_USER_ID %}: <span>{% USER_ID %}</span></li> <li><i class="fa fa-envelope"></i> {% L_PRIVMSG %}: <span>{% USER_PRIVMSG %}</span></li> </ul> <div class="fa-user-menu-column fa-user-menu-main-column"> <img src="http://placehold.it/220x40" /> <a href="{% LOGIN_LOGOUT_URL %}" class="fa-user-menu-login-logout"> <i class="fa fa-{% LOGIN_LOGOUT_ICON %}"></i> {% L_LOGIN_LOGOUT %} </a> </div> <ul class="fa-user-menu-column fa-user-menu-side-column"> <li><i class="fa fa-user"></i> <a href="/profile?mode=editprofile">{% L_PROFILE %}</a></li> <li><i class="fa fa-file-text"></i> <a href="/search?search_id=egosearch">{% L_USER_POSTS %}</a></li> <li><i class="fa fa-thumbs-up"></i> <a href="/search?search_id=watchsearch">{% L_USER_WATCH_POSTS %}</a></li> <li><i class="fa fa-users"></i> <a href="{% USER_FRIENDS_URL %}">{% L_FRIENDS %}</a></li> </ul> </div> <ul class="fa-user-menu-icons"> <li><a href="/profile?mode=editprofile&page_profil=notifications" title="{% L_NOTIFICATIONS: %}"><i class="fa fa-bell"></i></a></li> <li><a href="/privmsg?folder=inbox" title="{% L_PRIVMSG %}"><i class="fa fa-envelope"></i></a></li> </ul> </div> <script> (function($) { var fa = { L_FRIENDS: 'Amigos', L_LOGIN_LOGOUT: _userdata.session_logged_in ? 'Sair' : 'Entrar', L_NOTIFICATIONS: 'Notificações', L_POSTS: 'Posts', L_PRIVMSG: 'MPs', L_PROFILE: 'Meu perfil', L_REPUTATION: 'Reputação', L_USER_ID: 'ID', L_USER_POSTS: 'Meu conteúdo', L_USER_WATCH_POSTS: 'Conteúdo que sigo', L_WELCOME: 'Bem-vindo', LOGIN_LOGOUT_ICON: _userdata.session_logged_in ? 'sign-out' : 'sign-in', LOGIN_LOGOUT_URL: _userdata.session_logged_in ? '/login?logout' : '/login', USER_ID: _userdata.user_id, USER_FRIENDS_URL: _userdata.session_logged_in ? '/u' + _userdata.user_id + 'friends' : '/login', USER_POSTS: _userdata.user_posts, USER_PRIVMSG: _userdata.user_nb_privmsg, USER_PROFILE_URL: _userdata.session_logged_in ? '/u' + _userdata.user_id : '/login', USER_REPUTATION: _userdata.point_reputation, USERNAME: _userdata.username, }; var $menu = $('#fa-user-menu'); var html = $menu.html(); $.each(fa, function(key, value) { html = html.replace(new RegExp('\\{%\\s' + key + '\\s%\\}', 'g'), value); }); $menu.html(html); }(jQuery)); </script> 

E o CSS por esse:

Código:
/** * FA.BEGIN fa_user_menu */ #fa-user-menu, #fa-user-menu * { box-sizing: border-box; } #fa-user-menu { background-color: #51aada; padding: 10px; position: absolute; right: -500px; top: 40px; width: 500px; transition: 1000ms ease right; } #fa-user-menu:hover { right: 0; } #fa-user-menu a { transition: 250ms ease color; } .fa-user-menu-title { color: #e6e6e6; } .fa-user-menu-username { color: #efefef; } .fa-user-menu-username:active, .fa-user-menu-username:hover { color: #fff; } .fa-user-menu-content { color: #efefef; margin-top: 10px; overflow: hidden; } .fa-user-menu-column { float: left; } .fa-user-menu-column li { background-color: rgba(70, 70, 70, 0.31); display: block; font-size: 10px; margin-bottom: 5px; padding: 3px; border: 1px rgba(70, 70, 70, 0.13) solid; transition: 250ms ease border-color; } .fa-user-menu-column li a { color: inherit; } .fa-user-menu-column li a:active, .fa-user-menu-column li a:focus, .fa-user-menu-column li a:hover { color: #fff; } .fa-user-menu-column li:hover { border-color: #8dcdef; } .fa-user-menu-column li:last-child { margin-bottom: 0; } .fa-user-menu-column li span { color: #d2d2d2; float: right; } .fa-user-menu-side-column { width: 25%; } .fa-user-menu-main-column { padding: 0 10px; width: 50%; } .fa-user-menu-main-column>img { margin-bottom: 10px; } .fa-user-menu-login-logout { background-color: #4883a2; color: #fff; display: block; padding: 15px 0; text-align: center; transition-property: background-color !important; } .fa-user-menu-login-logout:active, .fa-user-menu-login-logout:focus, .fa-user-menu-login-logout:hover { color: #fff; background-color: #73bfe8; } .fa-user-menu-open-arrow { background-color: #51aada; border-radius: 5px 0 0 5px; color: #f1f1f1; font-size: 24px; height: 80px; left: -20px; position: absolute; text-align: center; top: 20px; width: 20px; } .fa-user-menu-open-arrow .fa { line-height: 80px; } .fa-user-menu-icons { bottom: -30px; overflow: hidden; position: absolute; right: 0; } .fa-user-menu-icons li { float: left; } .fa-user-menu-icons a { background-color: #ff511c; color: #fff; display: block; padding: 0 20px; transition: 250ms ease background-color !important; } .fa-user-menu-icons a:active, .fa-user-menu-icons a:focus, .fa-user-menu-icons a:hover { background-color: #ff7950; } .fa-user-menu-icons .fa { line-height: 30px; } /** * FA.END fa_user_menu */ #header { position: relative; overflow: hidden; }

Eu até tentei deixar os botões fora da caixa, mas eles acabam ficando em cima da sua barra de busca. Eles estão dentro do menu, com o mesmo vermelho do rodapé do seu fórum.

Perfeito, mais os icones de notificações e mensagens privadas não está igual o que eu mandei, poderia colocar igual está lá? A seta do lado das notificações e mp e as notificações e mp do ladinho do banner

Eu aumentei o tamanho do banner conforme o que fiz para testar, vê se consegue colocar agora pra mim por favor

www.brasilplayultimate.forumeiros.com/forum

por Kyo Panda 08.02.17 23:05

HTML:

Código::  <div id="fa-user-menu" class="fa-user-menu-{% CONNECTION_STATUS %}"> <div class="fa-user-menu-body"> <div class="fa-user-menu-open-arrow"> <i class="fa fa-angle-double-left"></i> </div> <div class="fa-user-menu-title"> {% L_WELCOME %}, <a href="{% USER_PROFILE_URL %}" class="fa-user-menu-username">{% USERNAME %}</a> </div> <div class="fa-user-menu-content"> <ul class="fa-user-menu-column fa-user-menu-side-column"> <li><i class="fa fa-comments"></i> {% L_POSTS %}: <span>{% USER_POSTS %}</span></li> <li><i class="fa fa-thumbs-up"></i> {% L_REPUTATION %}: <span>{% USER_REPUTATION %}</span></li> <li><i class="fa fa-user"></i> {% L_USER_ID %}: <span>{% USER_ID %}</span></li> <li><i class="fa fa-envelope"></i> {% L_PRIVMSG %}: <span>{% USER_PRIVMSG %}</span></li> </ul> <div class="fa-user-menu-column fa-user-menu-main-column"> <img src="http://placehold.it/220x40" /> <a href="{% LOGIN_LOGOUT_URL %}" class="fa-user-menu-login-logout"> <i class="fa fa-{% LOGIN_LOGOUT_ICON %}"></i> {% L_LOGIN_LOGOUT %} </a> </div> <ul class="fa-user-menu-column fa-user-menu-side-column"> <li><i class="fa fa-user"></i> <a href="/profile?mode=editprofile">{% L_PROFILE %}</a></li> <li><i class="fa fa-file-text"></i> <a href="/search?search_id=egosearch">{% L_USER_POSTS %}</a></li> <li><i class="fa fa-thumbs-up"></i> <a href="/search?search_id=watchsearch">{% L_USER_WATCH_POSTS %}</a></li> <li><i class="fa fa-users"></i> <a href="{% USER_FRIENDS_URL %}">{% L_FRIENDS %}</a></li> </ul> </div> </div> <div class="fa-user-menu-profile"> {% USER_AVATAR %} <ul class="fa-user-menu-icons"> <li><a href="/profile?mode=editprofile&page_profil=notifications" title="{% L_NOTIFICATIONS: %}"><i class="fa fa-bell"></i></a></li> <li><a href="/privmsg?folder=inbox" title="{% L_PRIVMSG %}"><i class="fa fa-envelope"></i></a></li> </ul> <div class="fa-user-menu-profile-username">{% USERNAME %}</div> </div> </div> <script> (function($) { var fa = { CONNECTION_STATUS: _userdata.session_logged_in ? 'online' : 'offline', L_FRIENDS: 'Amigos', L_LOGIN_LOGOUT: _userdata.session_logged_in ? 'Sair' : 'Entrar', L_NOTIFICATIONS: 'Notificações', L_POSTS: 'Posts', L_PRIVMSG: 'MPs', L_PROFILE: 'Meu perfil', L_REPUTATION: 'Reputação', L_USER_ID: 'ID', L_USER_POSTS: 'Meu conteúdo', L_USER_WATCH_POSTS: 'Conteúdo que sigo', L_WELCOME: 'Bem-vindo', LOGIN_LOGOUT_ICON: _userdata.session_logged_in ? 'sign-out' : 'sign-in', LOGIN_LOGOUT_URL: _userdata.session_logged_in ? '/login?logout' : '/login', USER_AVATAR: _userdata.avatar, USER_ID: _userdata.user_id, USER_FRIENDS_URL: _userdata.session_logged_in ? '/u' + _userdata.user_id + 'friends' : '/login', USER_POSTS: _userdata.user_posts, USER_PRIVMSG: _userdata.user_nb_privmsg, USER_PROFILE_URL: _userdata.session_logged_in ? '/u' + _userdata.user_id : '/login', USER_REPUTATION: _userdata.point_reputation, USERNAME: _userdata.username, }; var $menu = $('#fa-user-menu'); var html = $menu.prop('outerHTML'); $.each(fa, function(key, value) { html = html.replace(new RegExp('\\{%\\s' + key + '\\s%\\}', 'g'), value); }); $menu.prop('outerHTML', html); }(jQuery)); </script>

CSS:

Código:: /** * FA.BEGIN fa_user_menu */ #fa-user-menu, #fa-user-menu * { box-sizing: border-box; } #fa-user-menu { height: 200px; position: absolute; right: 0; top: 38px; } .fa-user-menu-body { background-color: #51aada; padding: 10px; position: absolute; right: -500px; top: 0; width: 500px; transition: 1000ms ease right; z-index: 1; } .fa-user-menu-online .fa-user-menu-body { right: -380px; } .fa-user-menu-body:hover { right: 0; } .fa-user-menu-online .fa-user-menu-body:hover { right: 120px; } #fa-user-menu a { transition: 250ms ease color; } .fa-user-menu-title { color: #e6e6e6; } .fa-user-menu-username { color: #efefef; } .fa-user-menu-username:active, .fa-user-menu-username:hover { color: #fff; } .fa-user-menu-content { color: #efefef; margin-top: 10px; overflow: hidden; } .fa-user-menu-column { float: left; } .fa-user-menu-column li { background-color: rgba(70, 70, 70, 0.31); display: block; font-size: 10px; margin-bottom: 5px; padding: 3px; border: 1px rgba(70, 70, 70, 0.13) solid; transition: 250ms ease border-color; } .fa-user-menu-column li a { color: inherit; } .fa-user-menu-column li a:active, .fa-user-menu-column li a:focus, .fa-user-menu-column li a:hover { color: #fff; } .fa-user-menu-column li:hover { border-color: #8dcdef; } .fa-user-menu-column li:last-child { margin-bottom: 0; } .fa-user-menu-column li span { color: #d2d2d2; float: right; } .fa-user-menu-side-column { width: 25%; } .fa-user-menu-main-column { padding: 0 10px; width: 50%; } .fa-user-menu-main-column > img { margin-bottom: 10px; } .fa-user-menu-login-logout { background-color: #4883a2; color: #fff; display: block; padding: 15px 0; text-align: center; transition-property: background-color !important; } .fa-user-menu-login-logout:active, .fa-user-menu-login-logout:focus, .fa-user-menu-login-logout:hover { color: #fff; background-color: #73bfe8; } .fa-user-menu-open-arrow { background-color: #51aada; border-radius: 5px 0 0 5px; color: #f1f1f1; font-size: 24px; height: 80px; left: -20px; position: absolute; text-align: center; top: 20px; width: 20px; } .fa-user-menu-open-arrow .fa { line-height: 80px; } .fa-user-menu-profile { background-color: #ff511c; bottom: 0; position: absolute; right: 0; width: 120px; } .fa-user-menu-online .fa-user-menu-profile { top: 0; } .fa-user-menu-online .fa-user-menu-profile { z-index: 2; } .fa-user-menu-icons { bottom: 0; overflow: hidden; position: absolute; width: 100%; } .fa-user-menu-online .fa-user-menu-icons { bottom: 30px; } .fa-user-menu-icons li { float: left; width: 50%; } .fa-user-menu-icons a { background-color: #ff511c; color: #fff; display: block; text-align: center; transition: 250ms ease background-color !important; } .fa-user-menu-icons a:active, .fa-user-menu-icons a:focus, .fa-user-menu-icons a:hover { background-color: #ff7950; } .fa-user-menu-icons .fa, .fa-user-menu-profile-username { line-height: 30px; text-align: center; } .fa-user-menu-profile-username { bottom: 0; color: #fff; display: none; left: 0; position: absolute; right: 0; } .fa-user-menu-online .fa-user-menu-profile-username { display: block; } .fa-user-menu-profile > img { display: none; height: 100px; margin: 10px; width: 100px; } .fa-user-menu-online .fa-user-menu-profile > img { display: initial; } /** * FA.END fa_user_menu */ #header { position: relative; overflow: hidden; padding-top: 38px; } #branding { height: 200px; }

por iScroll 09.02.17 0:49

Pequeno erro: https://i.imgur.com/rpyFLiE.png

por Kyo Panda 09.02.17 0:54

Pelo HTML na página, acredito que o senhor não chegou a aplicar o template. Pensativo

por iScroll 09.02.17 15:56

Kyo Panda escreveu:Pelo HTML na página, acredito que o senhor não chegou a aplicar o template.

Eu retirei o mesmo pelo fato de usuários logarem no meu fórum.

Coloquei nesse de teste: testebpu.forumeiros.com/ tenta ver lá agora

Na verdade, eu queria que ficasse assim: https://i.imgur.com/HMqbGko.png?1

Seria possível? Só que sem o ícone de "Notificações" coisa que é desnecessária.

por Kyo Panda 10.02.17 0:38

Aparentemente existe código de CSS antigo sobrando no menu (do testebpu) e o código CSS novo não está aplicado. Tente remover todos os CSS do menu e aplicar apenas o último passado.

---

Quanto ao "eu queria que ficasse assim", o senhor diz a barra flutuando no nada, as cores (pois deixei vermelho, como o senhor pediu), o quê?

E devo remover o notificações e deixar apenas o ícone de mensagens privadas?

Eu provavelmente desistirei daqui há pouco, pois parece que não sou apto a alcançar o que o senhor deseja. :/

por iScroll 10.02.17 0:56

Kyo Panda escreveu:Aparentemente existe código de CSS antigo sobrando no menu (do testebpu) e o código CSS novo não está aplicado. Tente remover todos os CSS do menu e aplicar apenas o último passado.

---

Quanto ao "eu queria que ficasse assim", o senhor diz a barra flutuando no nada, as cores (pois deixei vermelho, como o senhor pediu), o quê?

E devo remover o notificações e deixar apenas o ícone de mensagens privadas?

Eu provavelmente desistirei daqui há pouco, pois parece que não sou apto a alcançar o que o senhor deseja. :/

Calma, estamos quase lá, você é bom sim kkkkk, quem dera de mim fazer metade do que você fez até agora...
Estamos quase, não desiste agora pfv...
Em fim, o CSS ta sobrando? não entendi, o css é o mesmo do outro e coloquei só o ultimo passado sim... acho que houve algum conflito...

Olha o a print que mandei acima que você vai entender como quero, entendeu? Se não eu explico de novo, não sou mt bom em explicar msm kkk

por Kyo Panda 10.02.17 1:00

Vamos tentar, vamos tentar...

---

Para falar a verdade, não está batendo o CSS passado com o que está no seu fórum. É possível que o senhor tenha deixado algum "resto" dos CSSs passados anteriormente e que estão conflitando com o novo. Veja:

http://ajuda-punbb.forumeiros.com/

Esta é a forma como deveria estar com o último HTML e CSS passado.

---

EDIT.: Logado ele fica dessa forma: https://i.imgur.com/vArYV7Z.png
EDIT.2: Logado e fechado. https://i.imgur.com/XfldBpo.png

por iScroll 10.02.17 1:24

Peço desculpas, no HTML coloquei errado :/

https://i.imgur.com/lxXBQ4b.png

Fiz algumas modificações para ficar do jeito que eu queria, agora eu queria o seguinte:

Nessa imagem "220x40" seria possível adicionar o rank da pessoa?

Percebi agora também o seguinte bug: https://i.imgur.com/uXmHsCj.png quando a pessoa não está logada fica assim...
Estive pensando, seria bom retirar aquela barra lá de cima, pelo menos o "Login e Cadastre-se" e deixar o "Entrar" e ao invés de criar todo o menu de novo para um usuário sem registro, poderia deixar o "Entrar" e criar um "Cadastre-se" embaixo do Entrar, assim, removendo o resto.

Para melhor entender:

https://i.imgur.com/uXmHsCj.png?1

Os de vermelhos iria excluir e o de verde iria adicionar o botão "Cadastre-se", tendeu?

por iScroll 11.02.17 17:27

por iScroll 13.02.17 15:58

por Kyo Panda 13.02.17 23:26

O HTML que está no BPU ainda não é o mais novo, por isso dá os problemas quando offline.

Quanto ao ranking, não é possível, pois não temos essa informação disponível na variável do Forumeiros. Teríamos que fazer uma chamada em jQuery na página do usuário e isso deixaria um pouco pesado o script.

Quanto ao cadastre-se é possível. Só peço que aplique o HTML mais novo para trabalharmos a partir dele.

por iScroll 13.02.17 23:53

Kyo Panda escreveu:O HTML que está no BPU ainda não é o mais novo, por isso dá os problemas quando offline.

Quanto ao ranking, não é possível, pois não temos essa informação disponível na variável do Forumeiros. Teríamos que fazer uma chamada em jQuery na página do usuário e isso deixaria um pouco pesado o script.

Quanto ao cadastre-se é possível. Só peço que aplique o HTML mais novo para trabalharmos a partir dele.

Mas o HTML já está o mais atual possível :/ teria como me passar para ver novamente ?

por Kyo Panda 14.02.17 0:00

Esse é como está no BPU (no fórum normal, já que foi removido do de testes):

Criar o menu de usuário no topo BHcwYbJ

Esse é o mais novo (como passado na mensagem acima e como está no meu fórum de testes):

Criar o menu de usuário no topo CbEwuQH

Percebe como eles são diferentes?

---

O mais novo:

Código::  <div id="fa-user-menu" class="fa-user-menu-{% CONNECTION_STATUS %}"> <div class="fa-user-menu-body"> <div class="fa-user-menu-open-arrow"> <i class="fa fa-angle-double-left"></i> </div> <div class="fa-user-menu-title"> {% L_WELCOME %}, <a href="{% USER_PROFILE_URL %}" class="fa-user-menu-username">{% USERNAME %}</a> </div> <div class="fa-user-menu-content"> <ul class="fa-user-menu-column fa-user-menu-side-column"> <li><i class="fa fa-comments"></i> {% L_POSTS %}: <span>{% USER_POSTS %}</span></li> <li><i class="fa fa-thumbs-up"></i> {% L_REPUTATION %}: <span>{% USER_REPUTATION %}</span></li> <li><i class="fa fa-user"></i> {% L_USER_ID %}: <span>{% USER_ID %}</span></li> <li><i class="fa fa-envelope"></i> {% L_PRIVMSG %}: <span>{% USER_PRIVMSG %}</span></li> </ul> <div class="fa-user-menu-column fa-user-menu-main-column"> <img src="http://placehold.it/220x40" /> <a href="{% LOGIN_LOGOUT_URL %}" class="fa-user-menu-login-logout"> <i class="fa fa-{% LOGIN_LOGOUT_ICON %}"></i> {% L_LOGIN_LOGOUT %} </a> </div> <ul class="fa-user-menu-column fa-user-menu-side-column"> <li><i class="fa fa-user"></i> <a href="/profile?mode=editprofile">{% L_PROFILE %}</a></li> <li><i class="fa fa-file-text"></i> <a href="/search?search_id=egosearch">{% L_USER_POSTS %}</a></li> <li><i class="fa fa-thumbs-up"></i> <a href="/search?search_id=watchsearch">{% L_USER_WATCH_POSTS %}</a></li> <li><i class="fa fa-users"></i> <a href="{% USER_FRIENDS_URL %}">{% L_FRIENDS %}</a></li> </ul> </div> </div> <div class="fa-user-menu-profile"> {% USER_AVATAR %} <ul class="fa-user-menu-icons"> <li><a href="/profile?mode=editprofile&page_profil=notifications" title="{% L_NOTIFICATIONS: %}"><i class="fa fa-bell"></i></a></li> <li><a href="/privmsg?folder=inbox" title="{% L_PRIVMSG %}"><i class="fa fa-envelope"></i></a></li> </ul> <div class="fa-user-menu-profile-username">{% USERNAME %}</div> </div> </div> <script> (function($) { var fa = { CONNECTION_STATUS: _userdata.session_logged_in ? 'online' : 'offline', L_FRIENDS: 'Amigos', L_LOGIN_LOGOUT: _userdata.session_logged_in ? 'Sair' : 'Entrar', L_NOTIFICATIONS: 'Notificações', L_POSTS: 'Posts', L_PRIVMSG: 'MPs', L_PROFILE: 'Meu perfil', L_REPUTATION: 'Reputação', L_USER_ID: 'ID', L_USER_POSTS: 'Meu conteúdo', L_USER_WATCH_POSTS: 'Conteúdo que sigo', L_WELCOME: 'Bem-vindo', LOGIN_LOGOUT_ICON: _userdata.session_logged_in ? 'sign-out' : 'sign-in', LOGIN_LOGOUT_URL: _userdata.session_logged_in ? '/login?logout' : '/login', USER_AVATAR: _userdata.avatar, USER_ID: _userdata.user_id, USER_FRIENDS_URL: _userdata.session_logged_in ? '/u' + _userdata.user_id + 'friends' : '/login', USER_POSTS: _userdata.user_posts, USER_PRIVMSG: _userdata.user_nb_privmsg, USER_PROFILE_URL: _userdata.session_logged_in ? '/u' + _userdata.user_id : '/login', USER_REPUTATION: _userdata.point_reputation, USERNAME: _userdata.username, }; var $menu = $('#fa-user-menu'); var html = $menu.prop('outerHTML'); $.each(fa, function(key, value) { html = html.replace(new RegExp('\\{%\\s' + key + '\\s%\\}', 'g'), value); }); $menu.prop('outerHTML', html); }(jQuery)); </script>

o/

por iScroll 14.02.17 0:23

editei na segunda parte do HTML (Logout) ficou assim: https://i.imgur.com/6hM99hK.png