InícioAlterar Estilo de Widget 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
Alterar Estilo de Widget Menu
por kakakoro 10.08.15 0:37
Boa noite,
Eu gostaria de mudar o estilo desse widget menu
http://prntscr.com/82sgxc
E deixar no mesmo estilo do menu que está na página html do meu fórum
http://prntscr.com/82shac
Link do meu fórum : www.mundonegro.forumeiros.com
Vou colocar também aqui o código dos dois estilos:
Menu que é pra ser alterado
Código da Html que é pra ser copiado e trocado pelo Menu acima (Eu não sei que parte da página que diz respeito ao menu, mas vou deixar aqui a página inteira )
Eu gostaria de mudar o estilo desse widget menu
http://prntscr.com/82sgxc
E deixar no mesmo estilo do menu que está na página html do meu fórum
http://prntscr.com/82shac
Link do meu fórum : www.mundonegro.forumeiros.com
Vou colocar também aqui o código dos dois estilos:
Menu que é pra ser alterado
- Código:
<style type="text/css">.fraise {float:right; width:160px; font-family: 'Verdana', serif; font-size:10px; text-align: center; background-color: #FFEFD5; border: 2px #8B2323 solid; padding-top:3px; padding:3px; color: #0e2db0; text-transform: uppercase; overflow: hidden; -moz-transition:all 1.5s ease-in-out; -webkit-transition:all 1s ease-in-out; } .fraise:hover {float:right; width:160px; font-family: 'Verdana', serif; font-size:12px; text-align: center; background-color: #FFEFD5; border: 2px #8B2323 solid; color: #8968CD; padding-top:3px; padding:3px; text-transform: uppercase; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; } </style>
<div class="fraise">
<a href="http://mundonegro.forumeiros.com/t3-tutorial-as-racas">As Raças</a>
</div>
<div class="fraise">
<a href="https://docs.google.com/forms/d/1LYxcwzqBZjyq2AMiE1i-KYRhrVrwAQboYMlJIsbAIiQ/viewform?c=0&w=1">Trama Própria</a>
</div>
<div class="fraise">
<a href="http://goo.gl/forms/uOT56s6Gsc">Solicitar Caça</a>
</div>
<div class="fraise">
<a href="Link">Nome</a>
</div>
<div class="fraise">
<a href="Link">Nome</a>
</div>
<div class="fraise">
<a href="Link">Nome</a>
</div>
<div style="text-align: center; font-size: 20 px; font-family: 'Verdana', cursive; color: #8C705C; text-transform:uppercase; letter-spacing: 2px; padding-bottom:5px;">
</div>
<div style="text-align: center; font-size: 34px; font-family: tahoma', cursive; color: #363636; text-transform:uppercase; letter-spacing: 2px; padding-bottom:5px;">
</div>
Código da Html que é pra ser copiado e trocado pelo Menu acima (Eu não sei que parte da página que diz respeito ao menu, mas vou deixar aqui a página inteira )
- Código:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<body>
<div id="wholepage">
<style>
<!----------------------------------------------- Créditos: -----------------------------------------------!>
Está página foi desenvolvida por BrunoH. - Web Designer e Programador
Nome: BrunoH. Páginas HTML
Autor: BrunoH.
Link: http://brunohweb.tk/
Data: 11/07/2013
A Copia desta página sem autorização do autor, poderá ser processado pois a página contem direitos autorais reservados!
<!-------------------------------- Não retire os créditos - @copyright 2013 -------------------------------!>
#wholepage {
width:200px;
margin-left:auto;
margin-right:auto;
}
hr {
border-color: #fff;
}
#top5 {
display:none;
position: fixed;
left: 86.6%;
top: 97%;
color: #73AAFD;
font-family: "Courier New", Courier, monospace font-size:14px;
font-weight: bold;
text-shadow: black 0.15em 0.15em 0.2em;
opacity: 0.7;
-webkit-transition-duration: 1s;
background: rgb(27, 27, 27);
width: 20%;
-webkit-box-shadow: rgb(255, 255, 255) 1px 1px 6px;
}
#top5:hover {
height: 80%;
top: 47%;
opacity: 1;
}
#topo1 {
position: absolute;
left: 81%;
top: 1.5%;
color: rgb(211, 211, 211);
font-weight: bold;
text-shadow: black 0.15em 0.15em 0.2em;
-webkit-transition-duration: 1s;
}
#topo2ip {
color: rgb(214, 214, 214);
display: inline;
}
#topo2 {
position: absolute;
top: 0%;
color: #73AAFD;
font-weight: bold;
text-shadow: black 0.15em 0.15em 0.2em;
background: transparent;
width: 98%;
-webkit-transition-duration: 1s;
border-bottom: 1px solid rgba(255, 255, 255, 0.53);
padding: 4px;
}
#topo2:hover {opacity: 1;}
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 49px;
background: transparent;
margin-left: 80%;
margin-top: -10%;
width: 17%!important;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: transparent none repeat scroll 0% 0%;
color: rgb(185, 185, 185);
display: inline-block;
line-height: 35px;
padding: 0px 20px;
text-decoration: none;
border-radius: 3px;
font-size: 19px;
margin-left: 5px;
font-weight: 100 !important;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: center;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
}
#cssmenu > ul > li:hover > a {
color: rgba(255, 255, 255, 0.55);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #095c80;
}
.menu {
width: 87.2%;
background: transparent;
margin-top: 4%;
margin-left: 5%;
padding: 10px;
-webkit-border-radius: 7px 7px 0px 0;
color:#fff;
}
.menu a{
transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-webkit-moz-trasition:all linear 0.5s;
font-weight:bold;
color:#999999;
margin-right:35px;
text-decoration:none;
}
#tabela1 {
background: transparent;
width: 1%;
float: center;
height: 1%;
margin-top: 383px;
}
#tabela1 a{
text-decoration:none;
color:#000;
}
body {
background: rgb(0, 0, 0) url("http://serepertencer.com.br/site/wp-content/uploads/2015/05/brown-abstract.jpg") no-repeat scroll 0% 0% / 100pc auto;
color: #5A5A5A;
font: 11px tahoma,helvetica,arial,sans-serif;
padding-bottom: 0px;
margin-top: 150px;
}
.conectado {
margin-top: -2.9%;
margin-left: 6%;
position: absolute;
background: rgba(0, 0, 0, 0.18);
height: 37px;
box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
-webkit-box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
border: 1px solid rgba(0, 0, 0, 0.35);
width: 87%;
}
.botao {
font-weight: bold;
color: white;
float: left;
padding: 0 13px 9px 13px;
line-height: 36px;
outline: none;
height: 26px;
text-decoration: none;
}
.botao a {
color: white;
text-decoration: none;
}
.botao:hover {
background: rgba(0, 0, 0, 0.1);
}
#brunoh {
background-color: #4F4F4F;
border: 1px solid rgb(231, 231, 231);
padding: 6px;
}
#tabcont-brunoh {
padding: 10px;
width: 600px;
background: rgba(188, 180, 180, 0.12) none repeat scroll 0% 0%;
z-index: 1;
min-height: 100px;
color: white;
border-radius: 10px;
left: 22pc;
}
.copyright {
margin-top: 20px;
color: #5F5757;
}
div#soufoda {
position: relative;
left: -39pc;
top: 28pc;
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
background: rgba(188, 180, 180, 0.12) none repeat scroll 0% 0%;
border-color: rgba(0, 0, 0, 0.188235);
border-radius: 6px;
border-style: solid;
border-width: 1px 1px 3px;
box-shadow: rgba(66, 66, 66, 0.760784) 0px 0px 2px inset;
color: rgb(249, 249, 249);
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
width: 24pc;
height: 103px;
}
div#sennior1 {
position: relative;
top: 323px;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
border-color: transparent;
border-width: 1px 1px 3px;
color: #F9F9F9;
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
transition: background-color .5s;
width: 24pc;
left: -39pc;
}
.tabmen:hover a {
font-size: 22px !important;
}
div#sennior4 {
position: relative;
top: 333px;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
border-color: transparent;
border-width: 1px 1px 3px;
color: #F9F9F9;
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
transition: background-color .5s;
width: 24pc;
left: -39pc;
}
div#sennior2 {
position: relative;
top: 313px;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
border-width: 1px 1px 3px;
color: #F9F9F9;
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
transition: background-color .5s;
width: 24pc;
left: -39pc;
}
</style>
<center>
<link rel="shortcut icon" type="image/x-icon" href="http://i18.servimg.com/u/f18/19/28/01/24/icon110.png" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Mundo Negro RPG</title>
<center>
<div id="tabcont-brunoh">
<div id="tab1" style="font-size:13px; color: rgb(171, 171, 171); display: block;">
<ul>
O Mundo Negro RPG leva aos amantes do antigo estilo do gênero diretamente ao olho do furacão. Aqui você será capaz de criar seu personagem selecionando a raça que mais chame sua atenção, desvendar os mistérios de sua ilha de origem e partir em busca de conhecimento e maiores desafios na ilha comum. Seja um humano, um anjo ou até mesmo um elfo – o universo do Mundo Negro foi feito especialmente para você! E aí, vai ficar fora dessa?
</ul>
</div>
</div>
</center>
<center>
<div class="menu">
<div id="cssmenu">
<center>
<div id="Soufoda">
</div>
<div id="sennior4" class="tabmen">
<div id="tab1" style="display: block; color:#CFCFCF;">
<ul>
<a href="/login">Entrar</a>
</ul>
</div>
</div>
<div id="sennior1" class="tabmen">
<div id="tab1" style="display: block;">
<ul>
<a href="/register">Crie Aqui a sua conta!</a>
</ul>
</div>
</div>
<div id="sennior2" class="tabmen">
<div id="tab1" style="display: block;">
<ul>
<a href="/portal">Portal Mundo Negro RPG</a>
</ul>
</div>
</div>
</center>
</div>
</div>
<div class="oi">
<br><img src="https://us.battle.net/wow/static/images/social/facebook/wod-choose-your-path/main-characters.png"/> </div>
<div class="copyright">
Copyright ® Criação de BrunoH. / Edição por Fraise, Carlos Silveira em parceria com a clínica Cior Odontologia.
</div>
</div>
</center>
<a href="http://www.forumeiros.com" target="_blank" style="display: none;"> Fórumeiros</a>
</center>
kakakoro- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1006
Pontos : 1582 -
Re: Alterar Estilo de Widget Menu
por Fraise 10.08.15 18:15
Olá!
Mas o seu widget já está no mesmo estilo, só falta alterar as cores. Deseja as mesmas?
Cumprimentos.
Fraise
Mas o seu widget já está no mesmo estilo, só falta alterar as cores. Deseja as mesmas?
Cumprimentos.
Fraise
Fraise- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050 -
Re: Alterar Estilo de Widget Menu
por kakakoro 10.08.15 22:57
Sim sim, as mesmas cores mantendo o efeito hover da html e o tamanho do widget.
kakakoro- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1006
Pontos : 1582 -
Re: Alterar Estilo de Widget Menu
por Fraise 10.08.15 23:06
Olá!
Seria assim? Já agora organizei o seu código.
Cumprimentos.
Fraise
Seria assim? Já agora organizei o seu código.
- Código:
<style type="text/css">
.fraise {
float:right;
width:160px;
font-family:'Verdana',serif;
font-size:10px;
text-align:center;
background-color:#CAC3C3;
border:2px #CAC3C3 solid;
padding-top:3px;
padding:3px;
color:#0e2db0;
text-transform:uppercase;
overflow:hidden;
-moz-transition:all 1.5s ease-in-out;
-webkit-transition:all 1s ease-in-out
}
.fraise:hover {
float:right;
width:160px;
font-family:'Verdana',serif;
font-size:12px;
text-align:center;
background-color:#FFEFD5;
border:2px #8B2323 solid;
color:#8968CD;
padding-top:3px;
padding:3px;
text-transform:uppercase;
-moz-transition:all .5s ease-in-out;
-webkit-transition:all .5s ease-in-out
}</style>
<div class="fraise">
<a href="http://mundonegro.forumeiros.com/t3-tutorial-as-racas">As Raças</a>
</div>
<div class="fraise">
<a href="https://docs.google.com/forms/d/1LYxcwzqBZjyq2AMiE1i-KYRhrVrwAQboYMlJIsbAIiQ/viewform?c=0&w=1">Trama Própria</a>
</div>
<div class="fraise">
<a href="http://goo.gl/forms/uOT56s6Gsc">Solicitar Caça</a>
</div>
<div class="fraise">
<a href="Link">Nome</a>
</div>
<div class="fraise">
<a href="Link">Nome</a>
</div>
<div class="fraise">
<a href="Link">Nome</a>
</div>
<div style="text-align: center; font-size: 20 px; font-family: 'Verdana', cursive; color: #8C705C; text-transform:uppercase; letter-spacing: 2px; padding-bottom:5px;">
</div>
<div style="text-align: center; font-size: 34px; font-family: tahoma', cursive; color: #363636; text-transform:uppercase; letter-spacing: 2px; padding-bottom:5px;">
</div>
Cumprimentos.
Fraise
Fraise- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050 -
kakakoro- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1006
Pontos : 1582 -
Re: Alterar Estilo de Widget Menu
por Fraise 11.08.15 17:40
| Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas. |
Fraise- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050 -
Tópicos semelhantes» Alterar estilo das categorias
» Alterar estilo da logo
» Alterar estilo da ficha de rpg
» Alterar o estilo da Legenda de cargos do fórum.
» Como colocar radio no portal estilo widget
» Alterar estilo da logo
» Alterar estilo da ficha de rpg
» Alterar o estilo da Legenda de cargos do fórum.
» Como colocar radio no portal estilo widget
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