Modificar área das categorias

Detalhes da questão

Endereço do fórum: http://riseofdemigods.forumeiros.com/
Versão do fórum: PhpBB3

Descrição

Olá, gostaria de mudar a área das categorias/foruns do meu fórum. Atualmente ele está assim, mas eu queria deixá-lo com essa aparência. As informações são desse fórum. Obrigada desde já

E aí, amiga? Tudo certo?

Vou pedir pra que você procure por esses três códigos na sua folha de estilo CSS (painel de controle > visualização > imagens e cores > cores > folha de estilo CSS): .forabg li.row dd.topics, .forabg li.row dd.posts e .forabg li.row dd.lastpost. Depois de localizá-los, siga esses passos.

Substitua o código vermelho (.forabg li.row dd.topics) por esse:

Código:

.forabg li.row dd.topics {
background: #2e222b;
color: white;
float: right;
font-family: Voltaire;
font-size: 10px;
text-align: center;
text-transform: uppercase;
display: block;
position: relative;
top: 4px;
width: 100px;
height: 15px;
margin-right: 47px;
}

Substitua o código azul (.forabg li.row dd.posts) por esse:

Código:

.forabg li.row dd.posts {
    background: #120c10;
    color: #fff;
    float: right;
    font-family: voltaire;
    font-size: 10px;
    position: relative;
    top: 4px;
    text-align: center;
    text-transform: uppercase;
    width: 100px;
    height: 15px;
    margin-right: -1px;
}

Por fim, substitua o código verde (.forabg li.row dd.lastpost) por esse:

Código:

.forabg li.row dd.lastpost {
background: #2e222b;
    color: #fff;
    display: block;
    float: right;
    font-family: voltaire;
    font-size: 12px;
    margin-top: 13px;
    position: relative;
    right: 20px;
    text-align: center;
    text-transform: uppercase;
    width: 170px;
    height: 60px;
    margin-right: 42px;
}

IMPORTANTE! Antes de fazer as alterações, salve a sua folha de estilo CSS anterior para que não perca o layout antigo se você não gostar das modificações.

Se quiser alguma alteração, não hesite em requisitar.

Ola, Key of Destiny. Bom, boa parte do CSS funcionou, mas não totalmente. Veja como ficou aqui.

Ah sim, desculpe. Me distraí e acabei esquecendo do resto.

Só pra confirmar, falta só o título, não? E aproveitando que você está online, poderia me dizer especificamente como quer o background e o efeito ao passar o mouse (hover)?

Sim, falta apenas o título. Eu queria aquele mesmo efeito quando passa o mouse em cima, que muda de cor. Mais pra frente eu iria procurar por aqui como por aquela caixinha do nome em cima, na parte de baixo dela, pra por o link dos tópicos que tem dentro.

Peço perdão pela minha desatenção.

Cá está o código. Faça o mesmo processo de antes (até o de salvar a folha de estilo), mas procure por: a.forumtitle e a.forumtitle:hover.

Substitua o código laranja (a.forumtitle[/b]) por esse:

Código:

a.forumtitle {
background: #2E222B;
    color: white
    display: block;
    font-family: voltaire;
    font-size: 15px;
    letter-spacing: 2px;
    margin-left: 115px;
    padding: 3px;
    text-align: center;
    text-shadow: 0 0 1px #000000;
    text-transform: uppercase;
    transition: all .5s ease-in-out;
    width: 392px;
    position: relative;
}

E substitua o código vermelho escuro (a.forumtitle:hover[/b]) por esse:

Código:

 a.forumtitle:hover {
    background: #120c10!important;
    transition: all .5s ease-in-out!important;
    color: white
    display: block;
    font-family: voltaire;
    font-size: 15px;
    letter-spacing: 2px;
    margin-left: 115px;
    padding: 3px;
    text-align: center;
    text-shadow: 0 0 1px #000000;
    text-transform: uppercase;
    width: 392px;
    position: relative;
}

E sobre essa caixinha, poderia ser mais específica?

@Key of Destiny Acho que funcionou, mas ficou assim. Eu teria que usar algum código para as imagens aparecerem, como no exemplo original?

Sobre a caixinha, me referia por esses links que direcionem para tal tópico sem ter que abrir a categoria toda, como nesse exemplo.

Entendo. Na verdade, essas imagens que estão abaixo do título são adicionadas por meio da descrição do fórum.

Peço que coloque uma imagem na descrição do fórum "regras e tutoriais" por meio do painel de controle. Se não souber onde é, siga esses passos: painel de controle > geral > fórum > categorias e fóruns. Clique no botão no fórum "regras e tutoriais" e, na parte de descrição, insira esse código, substituindo o que está em caps lock pela url da imagem.

Código:

<img src="URL">

O código funcionou perfeitamente, mas a imagem não fica centralizada de jeito nenhum :/ Não teria como o fazer? Eu já fucei no HTML da caixa da categoria mesmo e nada.

Olá!

Adicione em sua folha de estilos:

Código:

.topiclist .row dl dd img { margin-left: 55px !important; }

Até mais.
Fraise

Em que parte do CSS exatamente eu tenho que por esse código?

Batyman escreveu:Em que parte do CSS exatamente eu tenho que por esse código?

Olá,

No final, começo, não tem ordem.

Até mais.

Funcionou, muito obrigada!