Algumas semanas atrás eu postei aqui solicitando ajuda para fixar um tamanho específico para as abas do menu simples do meu fórum. Os amigos do fórum responderam e consegui o que queria. Alguns dias atrás percebi que algumas abas de outras páginas do meu fórum também ficaram fixadas no mesmo tamanho e os textos contidos nestas abas acabaram por ficarem fora das limitações a mesma. Como posso solucionar este problema?
Se não me engano, o tópico foi este:
viewtopic.php?f=149&t=47152.
Aí você terá de definir as abas de navegação de forma independente.
Para isso, teremos de criar uma classe
tabs_menu só para as abas de navegação. Ok ?
1- Desfaça as edições feitas, descritas no tópico
viewtopic.php?f=149&t=47152.
2- Abra o arquivo
overall_header.html, ache
<div id="tabs"> e substitua por
<div id="tabs_menu">.
3- Abra o arquivo
bidi.css, ache as linhas...
... e
adicione após, em uma nova linha:
Código: Selecionar todos
.rtl #tabs_menu {
margin: 20px 7px -1px 0;
}
.rtl #tabs_menu a {
float: right;
}
4- Abra o arquivo
colours.css, ache as linhas...
... e
adicione após, em uma nova linha:
Código: Selecionar todos
#tabs_menu span{
width: 100px;
}
#tabs_menu a {
background-image: url("{T_THEME_PATH}/images/bg_tabs1.gif");
}
#tabs_menu a span {
background-image: url("{T_THEME_PATH}/images/bg_tabs2.gif");
color: #536482;
text-align: center;
}
#tabs_menu a:hover span {
color: #BC2A4D;
}
#tabs_menu .activetab a {
border-bottom-color: #CADCEB;
}
#tabs_menu .activetab a span {
color: #333333;
}
#tabs_menu .activetab a:hover span {
color: #000000;
}
5- Abra o arquivo
cp.css, ache as linhas...
Código: Selecionar todos
#tabs .activetab a:hover span {
color: #000000;
background-position: 100% 0;
}
... e
adicione após, em uma nova linha:
Código: Selecionar todos
#tabs_menu {
line-height: normal;
margin: 20px 0 -1px 7px;
min-width: 570px;
}
#tabs_menu ul {
margin:0;
padding: 0;
list-style: none;
}
#tabs_menu li {
display: inline;
margin: 0;
padding: 0;
font-size: 1em;
font-weight: bold;
}
#tabs_menu a {
float: left;
background: none no-repeat 0% -35px;
margin: 0 1px 0 0;
padding: 0 0 0 5px;
text-decoration: none;
position: relative;
cursor: pointer;
}
#tabs_menu a span {
float: left;
display: block;
background: none no-repeat 100% -35px;
padding: 6px 10px 6px 5px;
color: #828282;
white-space: nowrap;
}
#tabs_menu a:hover span {
color: #bcbcbc;
}
#tabs_menu .activetab a {
background-position: 0 0;
border-bottom: 1px solid #ebebeb;
}
#tabs_menu .activetab a span {
background-position: 100% 0;
padding-bottom: 7px;
color: #333333;
}
#tabs_menu a:hover {
background-position: 0 -70px;
}
#tabs_menu a:hover span {
background-position:100% -70px;
}
#tabs_menu .activetab a:hover {
background-position: 0 0;
}
#tabs_menu .activetab a:hover span {
color: #000000;
background-position: 100% 0;
}
6- Abra o arquivo
tweaks.css, ache a linha...
Código: Selecionar todos
.clearfix, #tabs, #minitabs, fieldset dl, ul.topiclist dl, dl.polls {
... e
substitua por:
Código: Selecionar todos
.clearfix, #tabs, #tabs_menu, #minitabs, fieldset dl, ul.topiclist dl, dl.polls {
Abraço.
