Personalizar barra de menu

Item: Personalizar barra de menu
Rating: 1

por Take 06.07.18 0:27

Detalhes da questão

Endereço do fórum: http://occultsec.forumeiros.com
Versão do fórum: ModernBB

Descrição

Olá, eu queria deixar minha barra de menu fixa no topo e o efeito ao passar o mouse em cima mais discreto (efeito estilo a do FDF). Deixar ela fixa eu consegui. Porém, a logo sumiu e não sei como arruma... como faço para o logo aparecer novamente e mudar o efeito?

PRINT:

Como eu quero o efeito:

eu modifiquei o overall_footer_end para deixar ela fixa no topo
para adiantar:

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"> <body> <div> <div> <ul> <li>  </li> </ul>  <ul class="footerbar-user"> <li><i class="ion-clock"></i>{CURRENT_TIME}</li>  <li class="rightside"> <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}"> {switch_footer_links.footer_link.L_FOOTER_LINK_TEXT} </a> </li>  </ul>  </div> <div class="copyright"> <div class="wrap"> <div class="copyright-body"> {ADMIN_LINK} </div> </div> </div> </div> {PROTECT_FOOTER} <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { var header_top = $('#headerbar-top'); header_top.addClass('is-sticky'); }); //]]> </script>  <div id="fb-root"></div> <script type="text/javascript"> $(document).ready( function() { $('div.fb-login-button, span.fb-login-button').attr({ "data-scope": "{switch_facebook_login.FB_SCOPE}", "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}", "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}", "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}", "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}" }); $('div.fb-login-button, span.fb-login-button').each(function() { if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) { $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}'); } if($(this).html() == '') { $(this).html('{switch_facebook_login.FB_LABEL}'); } }); FB.init({ "appId" : "{switch_facebook_login.FB_APP_ID}", "cookie" : {switch_facebook_login.FB_COOKIE}, "xfbml" : {switch_facebook_login.FB_XFBML}, "oauth" : {switch_facebook_login.FB_OAUTH}, "version" : "{switch_facebook_login.FB_VERSION}" }); (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }); function onLoginFB() { window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}') } </script>   <script type="text/javascript"> $(document).ready( function() { $('div.ti-connect, span.ti-connect').attr({ "data-loc": "{switch_topicit_connect.TOPICIT_URL}", "data-login": "{switch_topicit_connect.BOARD_LOGIN}", "data-version": "{switch_topicit_connect.TOPICIT_VERSION}", "data-lang": "{switch_topicit_connect.BOARD_LANG}" }); (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'topicit-connect')); }); </script>  <script type="text/javascript"> //<![CDATA[ fa_endpage(); //]]> </script> </body> </html>

por Neox 06.07.18 1:10

Olá,

Bem-vindo ao Fórum dos Fóruns!

Seja bem-vindo ao Fórum dos Fóruns! Como acabou de se inscrever, veja aqui alguns links importantes a saber:

Regras do Fórum, e o que você não deve fazer neste fórum;
Lista de tutoriais e perguntas frequentes;
A Equipe de Suporte;
A função de busca.

Vamos por parte, troque seu overall_footer_end por 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"> <body> <div> <div> <ul> <li>  </li> </ul>  <ul class="footerbar-user"> <li><i class="ion-clock"></i>{CURRENT_TIME}</li>  <li class="rightside"> <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}"> {switch_footer_links.footer_link.L_FOOTER_LINK_TEXT} </a> </li>  </ul>  </div> <div class="copyright"> <div class="wrap"> <div class="copyright-body"> {ADMIN_LINK} </div> </div> </div> </div> {PROTECT_FOOTER} <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $(window).scroll(function() { var header_top = $('#headerbar-top'); if (header_top.hasClass('w-toolbar')) { if ($(window).scrollTop() >= 42) { header_top.addClass('is-sticky'); } else { header_top.removeClass('is-sticky'); } } else { if ($(window).scrollTop() >= 1) { header_top.addClass('is-sticky'); } else { header_top.removeClass('is-sticky'); } } }); }); //]]> </script>  <div id="fb-root"></div> <script type="text/javascript"> $(document).ready( function() { $('div.fb-login-button, span.fb-login-button').attr({ "data-scope": "{switch_facebook_login.FB_SCOPE}", "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}", "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}", "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}", "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}" }); $('div.fb-login-button, span.fb-login-button').each(function() { if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) { $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}'); } if($(this).html() == '') { $(this).html('{switch_facebook_login.FB_LABEL}'); } }); FB.init({ "appId" : "{switch_facebook_login.FB_APP_ID}", "cookie" : {switch_facebook_login.FB_COOKIE}, "xfbml" : {switch_facebook_login.FB_XFBML}, "oauth" : {switch_facebook_login.FB_OAUTH}, "version" : "{switch_facebook_login.FB_VERSION}" }); (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }); function onLoginFB() { window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}') } </script>   <script type="text/javascript"> $(document).ready( function() { $('div.ti-connect, span.ti-connect').attr({ "data-loc": "{switch_topicit_connect.TOPICIT_URL}", "data-login": "{switch_topicit_connect.BOARD_LOGIN}", "data-version": "{switch_topicit_connect.TOPICIT_VERSION}", "data-lang": "{switch_topicit_connect.BOARD_LANG}" }); (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'topicit-connect')); }); </script>  <script type="text/javascript"> //<![CDATA[ fa_endpage(); //]]> </script> </body> </html>

Atenciosamente.

por Take 06.07.18 1:29

certo. troquei e ela voltou ao original.

PRINT:

(lembrando: eu quero ela fixa no topo como tava antes, mas com a logo normal que no caso tinha sumido)

por Neox 06.07.18 2:35

Adicione este CSS:

Código:: body { padding-top: 55px; } .menu { position: fixed; top: 0; left: 0; right: 0; }

Atenciosamente.

por Take 06.07.18 3:09

adicionado. apareceu essa barra aqui

Print:

por Neox 06.07.18 3:35

Troque o Css por este:

Código:: #page-header .navbar {position:fixed;top:0px;}

por Take 06.07.18 3:50

certo.

Print:

agora tem que centralizar e "personalizar". colocar a cor nele, e fazer aquele negócio que falei de quando o mouse passa em cima.
a, e tem como esticar ele na página toda?

por Neox 06.07.18 4:20

Para centralizar adicione esse CSS:

Código:: #page-header .navbar .navlinks { padding-left: 250px !important; }

por Take 06.07.18 4:26

não mudou nada

por **tikky** 06.07.18 7:15

Olá @Take,

COMO EU QUERO O EFEITO:
https://i.imgur.com/ECmPxCE.png

ao citar isto, você quer dizer o efeito de ativo?

Se sim, crie uma nova folha de JavaScript (Painel de Controle > Módulos > HTML & JAVASCRIPT > Gestão dos códigos JavaScript), e adicione:

Código:: /* * Application: Active Menu * Date: 26/04/2018 * Version: 1.226042018 * Copyright (c) 2018 Daemon <help.forumotion.com> * This work is free. You can redistribute it and/or modify it */ document.addEventListener("DOMContentLoaded", function(event) { var location = window.location.pathname + window.location.search, mainmenu = document.querySelector("a.mainmenu[href='" + location + "']"); if(mainmenu) mainmenu.className += " active"; });

mais este CSS:

Código:: a.mainmenu.active { background-color: white; color: #000; padding: 5px; text-decoration: none !important; font-weight: bold; border-radius: 4px 4px 0 0; }

Atenciosamente,
pedxz

por Take 06.07.18 17:34

e o efeito ao passar o mouse em cima mais discreto (efeito estilo a do FDF).

@Pedxz na verdade não. nessa print ai que eu citei o meu mouse tava em cima do menu para demonstrar o efeito que eu quero tipo, quando passa o mouse em cima das opções do menu a cor fica mais escura (ou mais clara). no meu caso quero que fique mais escura, porque ta branco http://prntscr.com/k3dtfb

por **tikky** 06.07.18 17:53

Adicione no seu CSS:

Código:: .navbar a:hover { background-color: black!important; color: white!important; }

e mude as cores background-color = fundo e color = cor da letra Muito feliz

por Take 06.07.18 19:09

perfeito! agora só falta centralizar ela porque o css que o @Neox passou não funcionou, deixar ela estendida na página toda e colocar cor porque ta sem

http://prntscr.com/k3ev65

por **tikky** 06.07.18 19:34

Take escreveu:perfeito! agora só falta centralizar ela porque o css que o @Neox passou não funcionou, deixar ela estendida na página toda e colocar cor porque ta sem

http://prntscr.com/k3ev65

Desculpe mas não percebi, centralizar o menu?

por Take 06.07.18 19:35

sim, deixar ele no meio

por **tikky** 06.07.18 19:38

Neox escreveu:Troque o Css por este:

Código:
#page-header .navbar {position:fixed;top:0px;}

Troque para:

Código:: #page-header .navbar {position:fixed;top:0px;left: 50%;}

por Take 06.07.18 19:52

certo. tinha ficado no canto direito mas já ajustei nas %

tem como subir ele e estender na página toda como mostra na print: http://prntscr.com/k3fb2e
e depois disso é só colocar a cor de fundo dele porque ta transparente

por **tikky** 06.07.18 19:55

Então localize no seu CSS:

Código:: #page-header .navbar { position:fixed; top:0; left: 50%; background-color: #434A53! important; }

depois é só ajeitar ao seu gosto:
Top = Posição no topo
Left = Posição relativamente a direita
Background-color = Cor ( HEX ou RGBA)

por Take 06.07.18 20:15

arrumar a posição no topo eu consegui, mas não consegui trocar a cor ainda... não achei esse código

Código:: background-color: #434A53! important;

por **tikky** 06.07.18 20:19

Esse ai eu adicionei, esqueci-me de avisar desculpe, adicione em baixo de #page-header .navbar {

por Take 06.07.18 20:22

adicionei e não mudou nada

por **tikky** 06.07.18 20:24

Pode postar aqui o seu CSS completo?

por Take 06.07.18 20:28

Código:: /******STAFF ONLINE**********/ .monAva img { height: 40px; width: 40px; margin-right: 5px; background: none repeat scroll 0 0 #FFF; border: 2px solid #8acc74; box-shadow: 0 2px 2px rgba(0,0,0,0.1); padding: 1px; } .monAva img:hover { border: 1px solid black; } .myStaff a { display:inline-block; vertical-align:top; margin-top:.75em; } /*---- COLUNA DO PERFIL NOS TÓPICOS ----*/ .postprofile { background-color: #e0e0e0; border: none; border-radius: 0px; border-right: solid 5px #d6d6d6; height: 100%!important; } .post { background-color: #fff; border-top: solid 10px #c1c1c1!important; border: none; border-radius: 5px; } .postprofile dt { padding: 10px; border-bottom: solid 1px #d6d6d6; } .post .postprofile dl dt a[href*="/u"] img[src][alt] { margin-bottom: 10px; } .postprofile { border: none!important; border-right: solid 1px #ddd!important; border-radius: 0px!important; text-align: left; } .post .postprofile dl dt a[href*="/u"] img[src][alt] { border-radius: 0px!important; } .postprofile dd:nth-child(2) { border-bottom: solid 1px #ddd; } .postprofile dt { border: none!important; } .postprofile dd br + img, .post .postprofile dl dt a[href*="/u"] img[src][alt], .postprofile strong a[href*="/u"] { margin-left: 1px; } .postprofile dd br + img { margin-bottom: 5px; } .postprofile, .postprofile * { box-sizing: content-box; } .postprofile { padding: 9px; margin-right: 10x; } .post-head > .topic-title, .post-head > .topic-date { margin: 0px !important; } .post-head > .topic-title img { display: none; } .postprofile-avatar img { border: none !important; border-radius: 0 !important; max-width: 200px !important; max-height: 400px !important; } .postprofile .postprofile-info { margin-left: 10px; } .postprofile-rank { margin-left: -10px !important; } /*---- LINHA A BAIXO DO TITULO DO TÓPICO ----*/ .post-head { border-color: #c1c1c1; } /*---- AVATAR QUADRADO NO LOGIN ----*/ .mod-login-avatar img { border-radius: 0; height: auto; width: auto; } /*---- REPUTACAO RANK ----*/ .reputation { background-color: rgb(110, 110, 110)!important; background-image: url(https://i.servimg.com/u/f38/17/31/71/58/highli10.png); border--radius: 3px; color: rgb(255, 255, 255); font-weight: bold; display: block; margin: 0 auto; margin-bottom: 3px; padding: 3px 7px; max-width: 125px; text-align: center; text-shadow: rgba(0, 0, 0, 0.298039) 0px -1px 0px; background-position: 0px 1px; background-repeat: repeat no-repeat; } .reputation.zero { background-color: rgb(16, 16, 16)!important; color: rgb(255, 255, 255); } /*---- RETIRA O CALENDÁRIO DO MENU ----*/ a.mainmenu[href="/calendar"] {display:none!important;} /*---- ESPAÇO ENTRE TÓPICO E PERFIL ----*/ .postbody { margin-left: 230px !important; } /*---- CENTRALIZAR PERFIL ----*/ .postprofile { text-align: center; } /*---- Linha de Baixo do menu ----*/ #page-header .navbar { -moz-box-shadow: inset 0 -5px 0 -1px #a8a8a8; -webkit-box-shadow: inset 0 -5px 0 -1px #a8a8a8; box-shadow: inset 0 -5px 0 -1px #a8a8a8; } /*---- BARRA DE ROLAGEM ----*/ ::-webkit-scrollbar { width: 15px; height: 5px; } ::-webkit-scrollbar-track-piece { background: #565656; } ::-webkit-scrollbar-thumb:vertical { height: 3px; background: #a8a8a8; border-radius: 10px; } ::-webkit-scrollbar-thumb:horizontal { width: 5px; background-color: #000000; } /*---- EFEITO NO NICK ----*/ a[href*="u1"] { background: url(https://i.imgur.com/5NAAVU8.gif); font-weight: bold; text-shadow: 2px 0px 11px #912828; } /*---- BORDA AO LADO DAS CATEGORIAS ----*/ ul.forums li.row dl { border-left: 5px solid #3a6d54 } ul.forums li.row dl:hover { border-left: 5px solid #000000; } /*----- BORDA EM BAIXO DAS CATEGORIAS ----*/ .forabg .topiclist .header { border-bottom: 4px solid #686868; } /*---- COR DO TITULO DOS FORUNS ----*/ .forumtitle { color: #474747 !important; } .forumtitle:hover { color: #999999 !important; } /*---- REMOVER BORDAS DA MENSAGEM AUTOMATICA ----*/ div[class*='post--'] .postbody table, div[class*='post--'] .postbody td { border: none !important; } /*---- Icones da paleta ----*/ .color-option { display: inline-block !important; width: 15px !important; height: 15px !important; border: 2px solid #fff !important; margin: 3px !important; box-shadow: 0 0 2px #778899; cursor: pointer !important; } .color-option span{ display: block !important; width: 13px !important; height: 13px !important; margin: -1px!important; } .color-option, .color-option span { border-radius: 2px; } /* Construção da paleta - ATENÇÃO: A largura influencia a quantidade de cores por linha */ .sceditor-dropdown.sceditor-color-picker { width: 180px !important; padding: 5px !important; border-radius: 5px !important; } /*---- MENU ----*/ #page-header .navbar {position:fixed;top:-0px;left: 35%;} #page-header .navbar .navlinks { padding-left: 250px !important; } a.mainmenu.active { background-color: black; color: #fff; padding: 5px; text-decoration: none !important; font-weight: bold; border-radius: 4px 4px 0 0; } .navbar a:hover { background-color: black!important; color: white!important; }

por **tikky** 06.07.18 21:09

Mude para:

Código:: /******STAFF ONLINE**********/ .monAva img { height: 40px; width: 40px; margin-right: 5px; background: none repeat scroll 0 0 #FFF; border: 2px solid #8acc74; box-shadow: 0 2px 2px rgba(0,0,0,0.1); padding: 1px; } .monAva img:hover { border: 1px solid black; } .myStaff a { display:inline-block; vertical-align:top; margin-top:.75em; } /*---- COLUNA DO PERFIL NOS TÓPICOS ----*/ .postprofile { background-color: #e0e0e0; border: none; border-radius: 0px; border-right: solid 5px #d6d6d6; height: 100%!important; } .post { background-color: #fff; border-top: solid 10px #c1c1c1!important; border: none; border-radius: 5px; } .postprofile dt { padding: 10px; border-bottom: solid 1px #d6d6d6; } .post .postprofile dl dt a[href*="/u"] img[src][alt] { margin-bottom: 10px; } .postprofile { border: none!important; border-right: solid 1px #ddd!important; border-radius: 0px!important; text-align: left; } .post .postprofile dl dt a[href*="/u"] img[src][alt] { border-radius: 0px!important; } .postprofile dd:nth-child(2) { border-bottom: solid 1px #ddd; } .postprofile dt { border: none!important; } .postprofile dd br + img, .post .postprofile dl dt a[href*="/u"] img[src][alt], .postprofile strong a[href*="/u"] { margin-left: 1px; } .postprofile dd br + img { margin-bottom: 5px; } .postprofile, .postprofile * { box-sizing: content-box; } .postprofile { padding: 9px; margin-right: 10x; } .post-head > .topic-title, .post-head > .topic-date { margin: 0px !important; } .post-head > .topic-title img { display: none; } .postprofile-avatar img { border: none !important; border-radius: 0 !important; max-width: 200px !important; max-height: 400px !important; } .postprofile .postprofile-info { margin-left: 10px; } .postprofile-rank { margin-left: -10px !important; } /*---- LINHA A BAIXO DO TITULO DO TÓPICO ----*/ .post-head { border-color: #c1c1c1; } /*---- AVATAR QUADRADO NO LOGIN ----*/ .mod-login-avatar img { border-radius: 0; height: auto; width: auto; } /*---- REPUTACAO RANK ----*/ .reputation { background-color: rgb(110, 110, 110)!important; background-image: url(https://i.servimg.com/u/f38/17/31/71/58/highli10.png); border--radius: 3px; color: rgb(255, 255, 255); font-weight: bold; display: block; margin: 0 auto; margin-bottom: 3px; padding: 3px 7px; max-width: 125px; text-align: center; text-shadow: rgba(0, 0, 0, 0.298039) 0px -1px 0px; background-position: 0px 1px; background-repeat: repeat no-repeat; } .reputation.zero { background-color: rgb(16, 16, 16)!important; color: rgb(255, 255, 255); } /*---- RETIRA O CALENDÁRIO DO MENU ----*/ a.mainmenu[href="/calendar"] {display:none!important;} /*---- ESPAÇO ENTRE TÓPICO E PERFIL ----*/ .postbody { margin-left: 230px !important; } /*---- CENTRALIZAR PERFIL ----*/ .postprofile { text-align: center; } /*---- Linha de Baixo do menu ----*/ #page-header .navbar { -moz-box-shadow: inset 0 -5px 0 -1px #a8a8a8; -webkit-box-shadow: inset 0 -5px 0 -1px #a8a8a8; box-shadow: inset 0 -5px 0 -1px #a8a8a8; } /*---- BARRA DE ROLAGEM ----*/ ::-webkit-scrollbar { width: 15px; height: 5px; } ::-webkit-scrollbar-track-piece { background: #565656; } ::-webkit-scrollbar-thumb:vertical { height: 3px; background: #a8a8a8; border-radius: 10px; } ::-webkit-scrollbar-thumb:horizontal { width: 5px; background-color: #000000; } /*---- EFEITO NO NICK ----*/ a[href*="u1"] { background: url(https://i.imgur.com/5NAAVU8.gif); font-weight: bold; text-shadow: 2px 0px 11px #912828; } /*---- BORDA AO LADO DAS CATEGORIAS ----*/ ul.forums li.row dl { border-left: 5px solid #3a6d54 } ul.forums li.row dl:hover { border-left: 5px solid #000000; } /*----- BORDA EM BAIXO DAS CATEGORIAS ----*/ .forabg .topiclist .header { border-bottom: 4px solid #686868; } /*---- COR DO TITULO DOS FORUNS ----*/ .forumtitle { color: #474747 !important; } .forumtitle:hover { color: #999999 !important; } /*---- REMOVER BORDAS DA MENSAGEM AUTOMATICA ----*/ div[class*='post--'] .postbody table, div[class*='post--'] .postbody td { border: none !important; } /*---- Icones da paleta ----*/ .color-option { display: inline-block !important; width: 15px !important; height: 15px !important; border: 2px solid #fff !important; margin: 3px !important; box-shadow: 0 0 2px #778899; cursor: pointer !important; } .color-option span{ display: block !important; width: 13px !important; height: 13px !important; margin: -1px!important; } .color-option, .color-option span { border-radius: 2px; } /* Construção da paleta - ATENÇÃO: A largura influencia a quantidade de cores por linha */ .sceditor-dropdown.sceditor-color-picker { width: 180px !important; padding: 5px !important; border-radius: 5px !important; } /*---- MENU ----*/ #page-header .navbar {position:fixed;top:-0px;left: 35%; background-color: black!important;} #page-header .navbar .navlinks { padding-left: 250px !important; } a.mainmenu.active { background-color: black; color: #fff; padding: 5px; text-decoration: none !important; font-weight: bold; border-radius: 4px 4px 0 0; } .navbar a:hover { background-color: black!important; color: white!important; }

por Take 06.07.18 21:44

isso. ta quase...

@Pedxz olha, eu editei aqui o overall_footer_end novamente para que você veja exatamente como eu quero que fique... porém tem algum código (no overall_footer_end eu acho) que ta removendo a logo do fórum.

Print:

única coisa que falta é fazer a logo aparecer...

caso queira ver melhor da uma olhadinha aí occultsec.forumeiros.com

por Neox 07.07.18 3:00

Boa Noite,
Me mande o link da logo por gentileza.

Atenciosamente,
Neox

por Take 07.07.18 3:49

Logo:

por Neox 07.07.18 5:07

Adicione a sua folha CSS:

Código:: a#logo img[src="https://i.imgur.com/vTcuUKf.png"] { display: none; } .headerbar { background-image: url(https://i.imgur.com/vTcuUKf.png); background-size: cover; } .headerbar { height: 180px; }

Atenciosamente,
Neox

por Take 07.07.18 5:11

http://prntscr.com/k3jwum

por Neox 07.07.18 5:17

Procure por:

Código:: .headerbar { height: 180px; }

e altere o
height:180px
ate que fique a seu agrado.

Atenciosamente,
Neox

por Take 07.07.18 5:21

deixa pra lá essa parte da logo... eu insiro junto com o banner mais fácil.

só arruma isso pra mim:

Print:

deixar assim:

Print:

tipo, centralizar esse efeito de quando passa o mouse em cima porque ta torto como mostra na 1° print e que ele ocupe a barra toda na vertical

ficando tipo assim:

Print:

por Neox 07.07.18 6:23

Troque seu CSS por este:

Código:: /******STAFF ONLINE**********/ .monAva img { height: 40px; width: 40px; margin-right: 5px; background: none repeat scroll 0 0 #FFF; border: 2px solid #8acc74; box-shadow: 0 2px 2px rgba(0,0,0,0.1); padding: 1px; } .monAva img:hover { border: 1px solid black; } .myStaff a { display:inline-block; vertical-align:top; margin-top:.75em; } /*---- COLUNA DO PERFIL NOS TÓPICOS ----*/ .postprofile { background-color: #e0e0e0; border: none; border-radius: 0px; border-right: solid 5px #d6d6d6; height: 100%!important; } .post { background-color: #fff; border-top: solid 10px #c1c1c1!important; border: none; border-radius: 5px; } .postprofile dt { padding: 10px; border-bottom: solid 1px #d6d6d6; } .post .postprofile dl dt a[href*="/u"] img[src][alt] { margin-bottom: 10px; } .postprofile { border: none!important; border-right: solid 1px #ddd!important; border-radius: 0px!important; text-align: left; } .post .postprofile dl dt a[href*="/u"] img[src][alt] { border-radius: 0px!important; } .postprofile dd:nth-child(2) { border-bottom: solid 1px #ddd; } .postprofile dt { border: none!important; } .postprofile dd br + img, .post .postprofile dl dt a[href*="/u"] img[src][alt], .postprofile strong a[href*="/u"] { margin-left: 1px; } .postprofile dd br + img { margin-bottom: 5px; } .postprofile, .postprofile * { box-sizing: content-box; } .postprofile { padding: 9px; margin-right: 10x; } .post-head > .topic-title, .post-head > .topic-date { margin: 0px !important; } .post-head > .topic-title img { display: none; } .postprofile-avatar img { border: none !important; border-radius: 0 !important; max-width: 200px !important; max-height: 400px !important; } .postprofile .postprofile-info { margin-left: 10px; } .postprofile-rank { margin-left: -10px !important; } /*---- LINHA A BAIXO DO TITULO DO TÓPICO ----*/ .post-head { border-color: #c1c1c1; } /*---- AVATAR QUADRADO NO LOGIN ----*/ .mod-login-avatar img { border-radius: 0; height: auto; width: auto; } /*---- REPUTACAO RANK ----*/ .reputation { background-color: rgb(110, 110, 110)!important; background-image: url(https://i.servimg.com/u/f38/17/31/71/58/highli10.png); border--radius: 3px; color: rgb(255, 255, 255); font-weight: bold; display: block; margin: 0 auto; margin-bottom: 3px; padding: 3px 7px; max-width: 125px; text-align: center; text-shadow: rgba(0, 0, 0, 0.298039) 0px -1px 0px; background-position: 0px 1px; background-repeat: repeat no-repeat; } .reputation.zero { background-color: rgb(16, 16, 16)!important; color: rgb(255, 255, 255); } /*---- RETIRA O CALENDÁRIO DO MENU ----*/ a.mainmenu[href="/calendar"] {display:none!important;} /*---- ESPAÇO ENTRE TÓPICO E PERFIL ----*/ .postbody { margin-left: 230px !important; } /*---- CENTRALIZAR PERFIL ----*/ .postprofile { text-align: center; } /*---- Linha de Baixo do menu ----*/ #page-header .navbar { -moz-box-shadow: inset 0 -5px 0 -1px #a8a8a8; -webkit-box-shadow: inset 0 -5px 0 -1px #a8a8a8; box-shadow: inset 0 -5px 0 -1px #a8a8a8; } /*---- BARRA DE ROLAGEM ----*/ ::-webkit-scrollbar { width: 15px; height: 5px; } ::-webkit-scrollbar-track-piece { background: #565656; } ::-webkit-scrollbar-thumb:vertical { height: 3px; background: #a8a8a8; border-radius: 10px; } ::-webkit-scrollbar-thumb:horizontal { width: 5px; background-color: #000000; } /*---- EFEITO NO NICK ----*/ a[href*="u1"] { background: url(https://i.imgur.com/5NAAVU8.gif); font-weight: bold; text-shadow: 2px 0px 11px #912828; } /*---- BORDA AO LADO DAS CATEGORIAS ----*/ ul.forums li.row dl { border-left: 5px solid #3a6d54 } ul.forums li.row dl:hover { border-left: 5px solid #000000; } /*----- BORDA EM BAIXO DAS CATEGORIAS ----*/ .forabg .topiclist .header { border-bottom: 4px solid #686868; } /*---- COR DO TITULO DOS FORUNS ----*/ .forumtitle { color: #474747 !important; } .forumtitle:hover { color: #999999 !important; } /*---- REMOVER BORDAS DA MENSAGEM AUTOMATICA ----*/ div[class*='post--'] .postbody table, div[class*='post--'] .postbody td { border: none !important; } /*---- Icones da paleta ----*/ .color-option { display: inline-block !important; width: 15px !important; height: 15px !important; border: 2px solid #fff !important; margin: 3px !important; box-shadow: 0 0 2px #778899; cursor: pointer !important; } .color-option span{ display: block !important; width: 13px !important; height: 13px !important; margin: -1px!important; } .color-option, .color-option span { border-radius: 2px; } /* Construção da paleta - ATENÇÃO: A largura influencia a quantidade de cores por linha */ .sceditor-dropdown.sceditor-color-picker { width: 180px !important; padding: 5px !important; border-radius: 5px !important; } /*---- MENU ----*/ #page-header .navbar {position:fixed;top:-0px;left: 35%; background-color: black!important;} #page-header .navbar .navlinks { padding-left: 250px !important; } a.mainmenu.active { background-color: black; color: #fff; padding: 8px; text-decoration: none !important; font-weight: bold; border-radius: 4px 7px 0 0; } .navbar a:hover { background-color: black!important; color: white!important; }

Atenciosamente,
Neox

por Take 07.07.18 6:29

desculpe, mas tem como você mandar separado o que você modificou? pois alterei algumas coisas já no css desde que mandei aqui. obrigado

por Neox 08.07.18 4:44

Procure por:

a.mainmenu.active {
background-color: black;
color: #fff;
padding: 5px;
text-decoration: none !important;
font-weight: bold;
border-radius: 4px 4px 0 0;
}

Altere o que esta de vermelho até ficar ao seu gosto

Atenciosamente,
Neox

por Take 08.07.18 7:27

continuou a mesma coisa. aliás, esse código modifica somente o menu que ta ativo e não de quando somente passa o mouse (sem clicar) por cima e muda a cor...

mas deixa pra lá acho que você não entendeu, pode finalizar. Obrigado aos 2 por tentar ajudar. "Resolvido"

por RafaelS. 08.07.18 10:49

Olá @Take.

Por vezes não conseguimos entender suas dúvidas à primeira vez, por isso as vezes é necessário que o administrador nos explique novamente o que deseja para que não haja mal-entendidos.

Bom, quanto ao espaço que tem antes do botão, isso é porque o senhor não está usando uma imagem para aquele menu. Nesse caso teremos que ocultar a imagem para ela não ficar ocupando aquele espaço em vão.

Adicione à sua folha de estilos (CSS):

Código:: a.mainmenu img { display: none; }

Obrigado pela compreensão. Feliz

por Take 08.07.18 16:42

Era isso mesmo! muito obrigado Rafa e a todos que ajudaram. Desculpe-me qualquer coisa...

Resolvido!

por RafaelS. 08.07.18 16:48

Tópico resolvido

Movido para "Questões resolvidas".