Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
Alteração no Menu
2 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
Alteração no Menu
Detalhes da questão
Endereço do fórum: https://dotsystem.forumeiros.com/
Versão do fórum: ModernBB
Descrição
Boa tarde, bem estava testando um negócio aqui e em meu novo menu tem algum erro, basicamente quando altero a cor para BRANCA ele não tem fundo escurinho, veja como está e como eu quero.
Como está:
Como quero:
Observe que tem um fundo na imagem um pouquinho escura, tinha sombra, eu gostaria de colocar desse jeito.
Essa é a parte do menu ( se não for mando o CSS inteiro, ou template ).
- Código:
/*--- MENU ---*/
.menu {
width: 100%;
position: fixed;
top: 0;
background-color: #fafafa;
box-shadow: inset rgba(0, 0, 20) 0px -2px 0px;
height: 70px;
z-index: 999;
}
.menu .menu-container {
width: 95%;
margin: 0 auto;
}
/*-- Links do menu --*/
.menu .menu-container .menu-link-wrapper {
width: 40%;
float: left;
}
.menu-link-wrapper .menu-link {
background-color: rgba(190, 190, 190, 0.05);
position: relative;
display: inline-block;
margin-right: 6px;
width: 70px;
height: 70px;
cursor: pointer;
}
.menu-link-wrapper .menu-link .icon {
width: 100%;
filter: grayscale(100%);
height: 70px;
background-position: center;
background-repeat: no-repeat;
}
.menu-link-wrapper .menu-link:hover .icon { filter: grayscale(0%); }
.menu-link-wrapper .menu-link .icon.forum { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/cia10.png); }
.menu-link-wrapper .menu-link .icon.portal { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/medalh10.gif); }
.menu-link-wrapper .menu-link .icon.membros { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/emblem10.gif); }
.menu-link-wrapper .menu-link .icon.grupos { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/grupos11.gif); }
.menu-link-wrapper .menu-link .icon.medalha { background-image: url(https://4.bp.blogspot.com/-Gilkz4TaSBU/Wc13EYUEyWI/AAAAAAAA-hc/9cPgN7U-2SEkOiJpfWGiRnvUXD87iU73QCKgBGAs/s1600/IT434.gif); }
.menu-link-wrapper .menu-link .text {
border: 1px solid #ffffff;
border-radius: 4px;
background-color: #AA0000;
box-shadow: 0 0 2px 1px rgba(255,255,255,.3) inset, 0 3px 9px rgba(0,0,0,.18);
font-weight: 700;
font-size: 1.3rem;
line-height: 25px;
color: #fff;
position: absolute;
bottom: -30px;
left: -5px;
z-index: 2;
width: calc(100% + 5px + 5px);
height: 28px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0,0,0,.18);
opacity: 0;
-webkit-transition: .3s opacity;
-moz-transition: .3s opacity;
transition: .3s opacity;
}
.menu-link-wrapper .menu-link:hover .text {
opacity: 1;
-webkit-transition: .3s opacity;
-moz-transition: .3s opacity;
transition: .3s opacity;
}
.menu-link-wrapper .menu-link .text:after {
position: absolute;
top: -8px;
left: calc(50% - 7px);
content: '';
-webkit-filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
height: 0;
width: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #545454;
}
Re: Alteração no Menu
Olá @ElProfessor,
Você tem certeza que informou o fórum correto? O fórum apresentado não possui as características ditas por você.
Chanp
Você tem certeza que informou o fórum correto? O fórum apresentado não possui as características ditas por você.
Chanp
Re: Alteração no Menu
Ah perdão, estou testando em outro fórum o navegador para depois colocar nesse fórum, vou mandar o certo forumvazio.forumeiros.com
Re: Alteração no Menu
Certo.
Basta substituir o código passado acima por este:
Resolve seu problema?
Chanp
Basta substituir o código passado acima por este:
- Código:
/*--- MENU ---*/
.menu {
width: 100%;
position: fixed;
top: 0;
background-color: #fafafa;
box-shadow: inset rgba(0, 0, 20) 0px -2px 0px;
height: 70px;
z-index: 999;
}
.menu .menu-container {
width: 95%;
margin: 0 auto;
}
/*-- Links do menu --*/
.menu .menu-container .menu-link-wrapper {
width: 40%;
float: left;
}
.menu-link-wrapper .menu-link {
background-color: rgba(190, 190, 190, 0.3);
position: relative;
display: inline-block;
margin-right: 6px;
width: 70px;
height: 70px;
cursor: pointer;
}
.menu-link-wrapper .menu-link .icon {
width: 100%;
filter: grayscale(100%);
height: 70px;
background-position: center;
background-repeat: no-repeat;
}
.menu-link-wrapper .menu-link:hover .icon { filter: grayscale(0%); }
.menu-link-wrapper .menu-link .icon.forum { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/cia10.png); }
.menu-link-wrapper .menu-link .icon.portal { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/medalh10.gif); }
.menu-link-wrapper .menu-link .icon.membros { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/emblem10.gif); }
.menu-link-wrapper .menu-link .icon.grupos { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/grupos11.gif); }
.menu-link-wrapper .menu-link .icon.medalha { background-image: url(https://4.bp.blogspot.com/-Gilkz4TaSBU/Wc13EYUEyWI/AAAAAAAA-hc/9cPgN7U-2SEkOiJpfWGiRnvUXD87iU73QCKgBGAs/s1600/IT434.gif); }
.menu-link-wrapper .menu-link .text {
border: 1px solid #ffffff;
border-radius: 4px;
background-color: #AA0000;
box-shadow: 0 0 2px 1px rgba(255,255,255,.3) inset, 0 3px 9px rgba(0,0,0,.18);
font-weight: 700;
font-size: 1.3rem;
line-height: 25px;
color: #fff;
position: absolute;
bottom: -30px;
left: -5px;
z-index: 2;
width: calc(100% + 5px + 5px);
height: 28px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0,0,0,.18);
opacity: 0;
-webkit-transition: .3s opacity;
-moz-transition: .3s opacity;
transition: .3s opacity;
}
.menu-link-wrapper .menu-link:hover .text {
opacity: 1;
-webkit-transition: .3s opacity;
-moz-transition: .3s opacity;
transition: .3s opacity;
}
.menu-link-wrapper .menu-link .text:after {
position: absolute;
top: -8px;
left: calc(50% - 7px);
content: '';
-webkit-filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
height: 0;
width: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #545454;
}
Resolve seu problema?
Chanp
Tópicos semelhantes
» Alteração de menu de navegação
» Alteração do menu de navegação
» Alteração do logotipo
» Alteração na loja
» Alteração de vocabulario
» Alteração do menu de navegação
» Alteração do logotipo
» Alteração na loja
» Alteração de vocabulario
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