Personalizar barra de menu
4 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Personalizar barra de menu
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>
Re: Personalizar barra de menu
Olá,
Vamos por parte, troque seu overall_footer_end por este:
Atenciosamente.
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:
|
- 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.
Re: Personalizar barra de menu
certo. troquei e ela voltou ao original.
(lembrando: eu quero ela fixa no topo como tava antes, mas com a logo normal que no caso tinha sumido)
- PRINT:
(lembrando: eu quero ela fixa no topo como tava antes, mas com a logo normal que no caso tinha sumido)
Re: Personalizar barra de menu
Adicione este CSS:
Atenciosamente.
- Código:
body {
padding-top: 55px;
}
.menu {
position: fixed;
top: 0;
left: 0;
right: 0;
}
Atenciosamente.
Re: Personalizar barra de menu
Troque o Css por este:
- Código:
#page-header .navbar {position:fixed;top:0px;}
Re: Personalizar barra de menu
certo.
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?
- 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?
Re: Personalizar barra de menu
Para centralizar adicione esse CSS:
- Código:
#page-header .navbar .navlinks {
padding-left: 250px !important;
}
Re: Personalizar barra de menu
Olá @Take,
Se sim, crie uma nova folha de JavaScript (Painel de Controle > Módulos > HTML & JAVASCRIPT > Gestão dos códigos JavaScript), e adicione:
mais este CSS:
Atenciosamente,
pedxz
ao citar isto, você quer dizer o efeito de ativo?COMO EU QUERO O EFEITO:
https://i.imgur.com/ECmPxCE.png
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- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Personalizar barra de menu
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
Re: Personalizar barra de menu
Adicione no seu CSS:
e mude as cores background-color = fundo e color = cor da letra
- Código:
.navbar a:hover {
background-color: black!important;
color: white!important;
}
e mude as cores background-color = fundo e color = cor da letra
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Personalizar barra de menu
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
http://prntscr.com/k3ev65
Re: Personalizar barra de menu
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- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Personalizar barra de menu
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- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Personalizar barra de menu
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
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
Re: Personalizar barra de menu
Então localize no seu CSS:
Top = Posição no topo
Left = Posição relativamente a direita
Background-color = Cor ( HEX ou RGBA)
- Código:
#page-header .navbar {
position:fixed;
top:0;
left: 50%;
background-color: #434A53! important;
}
Top = Posição no topo
Left = Posição relativamente a direita
Background-color = Cor ( HEX ou RGBA)
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Personalizar barra de menu
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;
Re: Personalizar barra de menu
Esse ai eu adicionei, esqueci-me de avisar desculpe, adicione em baixo de #page-header .navbar {
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Personalizar barra de menu
Pode postar aqui o seu CSS completo?
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Personalizar barra de menu
- 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;
}
Re: Personalizar barra de menu
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- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Personalizar barra de menu
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.
única coisa que falta é fazer a logo aparecer...
caso queira ver melhor da uma olhadinha aí occultsec.forumeiros.com
@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
Re: Personalizar barra de menu
Adicione a sua folha CSS:
Atenciosamente,
Neox
- 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
Re: Personalizar barra de menu
Procure por:
height:180px
ate que fique a seu agrado.
Atenciosamente,
Neox
- Código:
.headerbar {
height: 180px;
}
height:180px
ate que fique a seu agrado.
Atenciosamente,
Neox
Re: Personalizar barra de menu
deixa pra lá essa parte da logo... eu insiro junto com o banner mais fácil.
só arruma isso pra mim:
deixar assim:
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:
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:
Re: Personalizar barra de menu
Troque seu CSS por este:
Atenciosamente,
Neox
- 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
Re: Personalizar barra de menu
desculpe, mas tem como você mandar separado o que você modificou? pois alterei algumas coisas já no css desde que mandei aqui. obrigado
Re: Personalizar barra de menu
Procure por:
Atenciosamente,
Neox
Altere o que esta de vermelho até ficar ao seu gostoa.mainmenu.active {
background-color: black;
color: #fff;
padding: 5px;
text-decoration: none !important;
font-weight: bold;
border-radius: 4px 4px 0 0;
}
Atenciosamente,
Neox
Re: Personalizar barra de menu
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"
mas deixa pra lá acho que você não entendeu, pode finalizar. Obrigado aos 2 por tentar ajudar. "Resolvido"
Re: Personalizar barra de menu
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):
Obrigado pela compreensão.
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.
Re: Personalizar barra de menu
Era isso mesmo! muito obrigado Rafa e a todos que ajudaram. Desculpe-me qualquer coisa...
Resolvido!
Resolvido!
Tópicos semelhantes
» Personalizar a barra de menu
» Personalizar a barra de menu
» Personalizar barra de menu
» Personalizar a barra de menu
» Como personalizar barra do menu
» Personalizar a barra de menu
» Personalizar barra de menu
» Personalizar a barra de menu
» Como personalizar barra do menu
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos