Problemas com abas da UCP e MCP

[JM Pessanha]

Qual a URL do seu fórum: http://ikapedia.net/forum/portal.php
Tipo de Hospedagem: Paga
Qual a versão do phpBB: phpBB 3.0.10
É um novo ou uma conversão: Instalação Limpa
Usuário de teste: Usuário: Teste Senha: Teste123
Estilos instalados: Prosilver Special Edition Square
Modificações instaladas: Topic Solved, Board3 Portal, AutoMOD
Qual seu nivel de experiência: Iniciante
Quando começou o problema: Problemas com as abas do PhpBB em algumas páginas.
Descreva seu problema: Olá,

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?

Esta ocorrendo na UCP (Painel de Controle do Usuário) e na MCP (Painel de Controle do Moderador). Constatei apenas nestas páginas, mas creio que possa estar ocorrendo também em outras páginas do fórum que contenham as abas.

Veja a imagem para que entendam melhor:

[_Vinny_]

Essas abas não podem ter tamanho fixo, já que tem textos na abas que variam de tamanho. Recomendo remover a largura fixa definida.

[JM Pessanha]

Entendo. De último caso farei isso mesmo. Mas uma dúvida Vinny: Não existe uma maneira de especificar o tamanho das abas do menu, UCP e MCP separadamente?

[robra]

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

Código: Selecionar todos

.rtl #tabs a {
    float: right;
} 

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

Código: Selecionar todos

#tabs .activetab a:hover span {
    color: #000000;
} 

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

[JM Pessanha]

Perfeito Robra. Funcionou exatamente como queria. Muito obrigado, novamente. :D