Personalizar barra de menu

4 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Personalizar barra de menu

Mensagem 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:

<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
  <div>
        <ul>
            <li>
<!-- END html_validation -->
            </li>
        </ul>
        <!-- BEGIN switch_footer_links -->
      <ul class="footerbar-user">
        <li><i class="ion-clock"></i>{CURRENT_TIME}</li>
            <!-- BEGIN footer_link -->
            <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>
            <!-- END footer_link -->
        </ul>
        <!-- END switch_footer_links -->
    </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>
<!-- BEGIN switch_facebook_login -->
<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>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<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>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
  fa_endpage();
//]]>
</script>
</body>
</html>
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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:


Vamos por parte, troque seu overall_footer_end por este:
Código:
<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
 <div>
        <ul>
            <li>
<!-- END html_validation -->
            </li>
        </ul>
        <!-- BEGIN switch_footer_links -->
 <ul class="footerbar-user">
 <li><i class="ion-clock"></i>{CURRENT_TIME}</li>
            <!-- BEGIN footer_link -->
 <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>
            <!-- END footer_link -->
        </ul>
        <!-- END switch_footer_links -->
    </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>
<!-- BEGIN switch_facebook_login -->
<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>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<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>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
 fa_endpage();
//]]>
</script>
</body>
</html>

Atenciosamente.
Neox

Neox
Membro

Membro desde : 16/08/2016
Mensagens : 698
Pontos : 976

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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)
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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.
Neox

Neox
Membro

Membro desde : 16/08/2016
Mensagens : 698
Pontos : 976

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem por Take 06.07.18 3:09

adicionado. apareceu essa barra aqui

Print:
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem por Neox 06.07.18 3:35

Troque o Css por este:

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

Neox
Membro

Membro desde : 16/08/2016
Mensagens : 698
Pontos : 976

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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?
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem por Neox 06.07.18 4:20

Para centralizar adicione esse CSS:
Código:
#page-header .navbar .navlinks {
padding-left: 250px !important;
}
Neox

Neox
Membro

Membro desde : 16/08/2016
Mensagens : 698
Pontos : 976

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem por Take 06.07.18 4:26

não mudou nada
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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?
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem por Take 06.07.18 19:35

sim, deixar ele no meio
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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%;}
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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)
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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;
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Personalizar barra de menu

Mensagem por tikky 06.07.18 20:19

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

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem por Take 06.07.18 20:22

adicionei e não mudou nada
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Personalizar barra de menu

Mensagem por tikky 06.07.18 20:24

Pode postar aqui o seu CSS completo?
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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;
}
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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;
}
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem por Neox 07.07.18 3:00

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

Atenciosamente,
Neox
Neox

Neox
Membro

Membro desde : 16/08/2016
Mensagens : 698
Pontos : 976

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem por Take 07.07.18 3:49

Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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
Neox

Neox
Membro

Membro desde : 16/08/2016
Mensagens : 698
Pontos : 976

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem por Take 07.07.18 5:11

Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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
Neox

Neox
Membro

Membro desde : 16/08/2016
Mensagens : 698
Pontos : 976

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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:
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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
Neox

Neox
Membro

Membro desde : 16/08/2016
Mensagens : 698
Pontos : 976

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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
Neox

Neox
Membro

Membro desde : 16/08/2016
Mensagens : 698
Pontos : 976

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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"
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar barra de menu

Mensagem 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
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar barra de menu

Mensagem por Take 08.07.18 16:42

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

Resolvido!
Take

Take
Novo Membro

Membro desde : 05/07/2018
Mensagens : 25
Pontos : 29

https://occultsec.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar barra de menu

Mensagem por RafaelS. 08.07.18 16:48

Tópico resolvido


Movido para "Questões resolvidas".
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos