Categoria personalizada

Detalhes da questão

Endereço do fórum: http://thecreators.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá pessoal, eu gostaria de adicionar uma categoria como está:

Em meu fórum, alguem poderia me ajudar?

Fórum onde vi a categoria: http://ultimatelife.forumeiros.com/forum

Olá, o que você quer necessariamente?

Nós não copiamos ou plagiamos fóruns, então se quer alguma coisa relatada na imagem acima. Recomendo que por favor explique com mais detalhes. Assim o atendimento será muito mais rápido.

Até!

Quero uma categoria no estilo da categoria da imagem, mas com certas modificações, exemplo, não quero esses ícones, quero uma categoria nesse estilo, não exatamente igual, não sei te explicar como quero, se puder dar sugestões de algo parecido e que não seja copia

Vai em:
Painel de Controle Visualização Imagens e Cores Cores
Adicione o seguinte código no final de sua folha de estilo CSS:

Código:

ul.forums {
    background-color: #ffffff;
    margin: 10px;
}
ul.forums li.row:hover {
    border-left: 4px solid orange;
}
ul.forums .posts:after {
    content: 'Mensagens';
}
ul.forums .topics:after {
    content: 'Tópicos';
}

E veja este tópico que também tem a aplicação usada no fórum mencionado na foto
https://ajuda.forumeiros.com/t111589-nome-e-data-na-mesma-linha#787553

até.

Quase o que eu quero, poderia retirar as bordas? deixar somente a parte de cima, e também diminui-la

Só trocar o código anterior que passei neste tópico por este:

Código:

ul.forums {
    background-color: #ffffff;
}
ul.forums li.row:hover {
    border-left: 4px solid orange;
}
ul.forums .posts:after {
    content: 'Mensagens';
}
ul.forums .topics:after {
    content: 'Tópicos';
}

Alguma coisa a mais?

Ótimo, outra coisa, quando passa o mouse encima de um dos fóruns uma barrinha laranja aparece na esquerda, teria como deixar em todos os fóruns uma barrinha preta fixa, e quando passar o mouse ela ficar roxa?

Troque novamente por este código:

Código:

ul.forums {
    background-color: #ffffff;
}
ul.forums li.row {
    border-left: 4px solid black;
}
ul.forums li.row:hover {
    border-left: 4px solid #5d2786;
}
ul.forums .posts:after {
    content: 'Mensagens';
}
ul.forums .topics:after {
    content: 'Tópicos';
}


Se quiser que ele aumente um pouco de tamanho a barra roxa (borda) e só utilizar este código ao invés do outro:

Código:

ul.forums {
    background-color: #ffffff;
}
ul.forums li.row {
    border-left: 4px solid black;
}
ul.forums li.row:hover {
    border-left: 5px solid #5d2786;
}
ul.forums .posts:after {
    content: 'Mensagens';
}
ul.forums .topics:after {
    content: 'Tópicos';
}



Até.

Perfeito, agradeço pela ajuda, pode fechar!