Ultimos assuntos e categoria

Detalhes da questão

Endereço do fórum: http://rpg-narutoworld.forumeiros.com/forum
Versão do fórum: PunBB

Descrição

Gostaria de fazer igual a imagem:


1- deixa os "ultimos assuntos" o mais parecido possível
2- colocar uma linha entre os fóruns para separá-los

Link do fórum da imagem: http://narutorpgstorm.ultimaterpg.net/forum

Adicione este código (ao topo da sua CSS):

Código:

.main-content table.table tr {
    border-bottom: solid 1px #ddd!important;
}

.main-content table.table td.tcr {
    padding: 5px!important;
    border: solid 1px #ddd!important;
}

O resultado não ficará 100% fiel à imagem, mas ao longo do tempo talvez possamos fazer futuras alterações.

Observação: Se o código acima não funcionar, precisarei que o senhor me passe sua folha de estilo num todo.

Até mais.

deixei somente este código, pois a parte de baixo cria uma barra dividindo o fórum (cria uma barra entre a descrição do fórum e os ultimos assuntos), mas a parte de cima dividiu os fóruns corretamente, falta só criar aquela caixa ao canto...

Olá. Sem remover o código passado anteriormente, adicione também este código:

Código:

.reppost {
    padding: 5px;
    border: solid 1px #ddd!important;
}

É esse o resultado que deseja?
Caso o código acima não funcione, precisarei de sua Folha de Estilo num todo.

Até mais.

Estamos chegando lá, editei o css, ficou assim

Código:

/* ultima mensagem */
.reppost {
    padding: 5px;
    border: solid 1px #ddd!important;
    box-shadow: none!important;
    text-align: center!important;
  background-color: #fff!important;
}

Queria colar agora esse quadrado no canto direito do fórum, e aproximar o (Tópicos | Mensagens) mais da caixa, deixando-os em cima da mesma

Use este CSS:

Código:

p.center {
    position: relative!important;
    bottom: -10px;
}

O senhor também deseja que sejam colocados parênteses " ( " e " ) " antes e depois de " Tópicos: XX | Mensagens: XX "?

---

Até mais.

Usei isto para mudar fonte e cor, mas não consegui alterar a cor

Código:

p.center {
    position: relative!important;
    bottom: -10px;
    font-color: #000000!important;
  font-family: arial;
}

E desejo agora arrastar tudo para a direita, que nem a imagem lá em cima

Olá.
Você não consegue pois não existe o argumento "font-color".
O correto é: "color: (COR);"!

Para mover para a direita:

Código:

.reppost {
    position: relative!important;
    right: -6px!important;
}
p.center {
    right: -5px!important;
}

O tópico está resolvido?
Até mais.

Exatamente como eu queria, aqui vou deixar o code pra quem quiser fazer:

Código:

/* ultima mensagem */
.reppost {
    padding: 5px;
    border: solid 1px #ddd!important;
    box-shadow: none!important;
    text-align: center!important;
  background-color: #fff!important;
  color: #000000!important;
  font-family: arial;
}
p.center {
    position: relative!important;
    bottom: 0px;
    color: #000000!important;
  font-family: arial;
}
.reppost {
    position: relative!important;
    right: -6px!important;
  bottom: 10px!important;
}
p.center {
    right: -5px!important;
}