Detalhes da questão

Endereço do fórum: http://testeforummm.forumeiros.com
Versão do fórum: phpBB3

Descrição

Olá,
quero alterar a forma e local de onde mostra os topicos e mensagens
atualmente está desse jeito: https://prnt.sc/wmoh28

gostaria que ficasse assim
https://prnt.sc/wmoj38

Olá @DaviMorais,

Adicione na sua folha de estilo o seguinte código:

Código:

.icon > dd + .topics, .icon > dd + .posts {
    position: absolute;
    bottom: 0;
    background-color: #fafafa;
    left: 80px;
    height: 25px;
    line-height: 25px !important;
    top: 43px;
    padding: 0;
}

.icon > dd + .posts {
    left: 186px;
}

Atenciosamente,
pedxz.

Olá, consegue deixar nesse modelo do print?
https://prnt.sc/wmoj38

tudo em uma só caixinha

up 24 hrs

Olá,

Adiciona mais esse código na sua Folha de estilo CSS

Código:

dd.topics::after {
    content: 'e';
    padding-left: 4px;
}
.icon > dd + .posts {
    left: 166px;
    width: 84px;
}

Até mais!

Olá,
tem como mudar a cor da caixa onde diz o total de tópicos e o total de mensagens?

e a cor das palavras "1 Tópicos e 2 Mensagens"

atualmente está assim:
https://prnt.sc/wntjef

Olá,

Adiciona mais esse código

Código:

.icon > dd + .topics, .icon > dd + .posts {
    background-color: #cecece;
    color: black;
}

Só alterar o #cecece pelo código da cor que você deseja.

Até mais!

Olá, pode aumentar um pouco mais a caixa das mensagens e topicos?
ficou uma parte do lado de fora

https://prnt.sc/wnudmf

up 24h

up 24h

Olá, boa noite. troque o que o companheiro roevs lhe passou por esse na sua folha de estilo css:

Código:

/*---- Cabeçalho das categorias e fóruns ---*/
.forabg, .forumbg {
    background-color: #333333;
    background-image: none;
    box-shadow: none;
    margin-bottom: px!important;
}

.forabg.hidden { background-color: #52658F; }

.forumbg.announcement { margin-bottom: 2%; }

.forabg.hidden .header {
    background-color: #2e5918;

}

.header .icon .dterm { width: 100%; border-bottom: 3px solid #2e5918; }

.table-title h2 {
    margin-left: 7px;
    font-size: 2rem!important;
    color: #E6E6E6!important
}

.btn-collapse {
    left: 1250px;
    right: auto;
}

.table-title, .table-title h2, .btn-collapse i { color: #E6E6E6; }
.forabg.hidden .table-title, .forabg.hidden .table-title h2, .forabg.hidden { color: #E6E6E6; }

ul.topiclist.forums { background-color: transparent; }

li.row {
    border: none;
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
li.row:hover { background-color: #fff; }


.row > .icon > .dterm .topics {
    font-size: 1.3rem;
    color: rgba(0,0,0,0.55);
    margin: 5px 0;
    background-color: rgba(0,0,0,0.05);
    padding: 3px 7px;
    width: auto;
    display: inline-block;
    border-radius: 3px;
}

ul.forums dl.icon dd.dterm > div { margin-left: 30px!important; }

ul.topics .row dd.dterm {
    padding-left: 30px;
    padding-top: 15px;
}

a.forumtitle { font-size: 1.75rem; }

a.topictitle { font-size: 1.6rem; }

.forum-desc br { display: none; }

dd.lastpost { float: right!important; }

.lastpost-avatar { padding: 5px 10px 5px 0; }

.lastpost-avatar img {
    height: 50px;
    width: 50px;
}

.lastpost-avatar:after {
    height: 50px;
    top: 5px;
    width: 50px;
}

.lastpost .color-groups { float: none!important; }

.lastpost-info {
    position: absolute;
    top: 15px;
   }
   .lastpost > span > a:empty {
    pointer-events: none;
}
 
.lastpost > span > a:empty:before {
    content: "Não existem tópicos a visualizar!";
    color: #999;
    font-style: italic;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

Olá, não foi ainda...

Manda print de como ficou e como deseja, caso deseje o de algum outro fórum, repasse o link dele.

Olá, eu desejo assim: https://prnt.sc/x9dun9

atualmente está assim: https://prnt.sc/x9dwjn

up 24hs

up 24hs

up....

Experimente esse código:

Código:

dd.posts {
    width: auto!important;
    padding: 0 5% 0 4px!important;
    font-weight: 600;
    margin-left: 3.5%;
}
dd.topics {
    width: auto!important;
    padding: 0 5%!important;
    font-weight: 600;
}
.topics span, .posts span{
    font-weight: 400;
}
dd.topics::after{
    font-weight: 400;
}

Consegue deixar do tamanho desse aqui?

https://prnt.sc/x9dun9

Atualizei o código acima, veja se está bom

Perfeito, mas acabei notando apenas agora
a parte dos topicos ficaram faltando isso também

atualmente está assim: https://prnt.sc/xitrx2

consegue deixar assim? https://prnt.sc/xitvaj

Adicione:

Código:

.row1 .posts, .row2 .posts {
    left: 80px !important;
    top: 48px!important;
    padding: 0px 25px 0px 3%!important;
    margin: 0!important;
    width: auto!important;
    text-transform: lowercase;
}
.row1 .views, .row2 .views {
    left: 200px !important;
    top: 48px!important;
    padding: 0px 3% 0px 0px!important;
    margin: 0!important;
    width: auto!important;
    position: absolute;
    height: 25px;
    line-height: 25px;
    background-color: #f2f2f2;
    color: #6d6d6d;
    font-weight: 600;
    margin-left: .85%!important;
    text-transform: lowercase;
}
.row1 .posts br, .row2 .posts br, .row1 .views br, .row2 .views br {
    display: none;
}
.row1 .views:first-line, .row2 .views:first-line {
    text-transform: capitalize;
}
.row1 .posts:first-line, .row2 .posts:first-line {
    text-transform: capitalize;
}
.row1 .icon .dterm:after, .row2 .icon .dterm:after {
    content: 'e';
    position: absolute;
    bottom: 10px;
    z-index: 1;
    left: 15.45em;
    color: #6d6d6d;
}

Ficou muito grande,
ficou tudo em maiúsculo também, consegue deixar normal?

Desculpa a demora, atualizei o código acima

O "e" não deu muito certo https://prnt.sc/xiy2w9

Peço perdão, reatualizei o código

Consegue fazer só mais uma alteração?
O 'e' ficou com a cor diferente das outras letras

Desculpa a desatenção, já atualizei o código

Achei um bug, topicos com muitas mensagens as mensagens juntam

https://prnt.sc/xj04am

Olá, bom dia.

Troque o antigo código fornecido por esse:

Código:

.row1 .posts, .row2 .posts {
    left: 6% !important;
    top: 48px!important;
    padding: 0px 25px 0px 3%!important;
    margin: 0!important;
    width: auto!important;
    text-transform: lowercase;
}
.row1 .views, .row2 .views {
    left: 207px !important;
    top: 48px!important;
    padding: 0px 3% 0px 0px!important;
    margin: 0!important;
    width: auto!important;
    position: absolute;
    height: 25px;
    line-height: 25px;
    background-color: #f2f2f2;
    color: #6d6d6d;
    font-weight: 600;
    margin-left: .85%!important;
    text-transform: lowercase;
}
.row1 .posts br, .row2 .posts br, .row1 .views br, .row2 .views br {
    display: none;
}
.row1 .views:first-line, .row2 .views:first-line {
    text-transform: capitalize;
}
.row1 .posts:first-line, .row2 .posts:first-line {
    text-transform: capitalize;
}
.row1 .icon .dterm:after, .row2 .icon .dterm:after {
    content: 'e';
    position: absolute;
    bottom: 10px;
    z-index: 1;
    left: 210px!important;
    color: #6d6d6d;
}

Esse é o melhor resultado de acordo com o que foi passado, infelizmente :/
Isso é devido a não quanto mais caracteres, mais espaço vai ocupar, não tem muito o que fazer...

Ah :/

Ficou muito separado agora https://prnt.sc/xk1com

uuppp

Olá,

Substitua o código passado pelo nosso amigo @while por esse

Código:

.row1 .posts, .row2 .posts {
    left: 6% !important;
    top: 48px!important;
    padding: 0px 25px 0px 3%!important;
    margin: 0!important;
    width: auto!important;
    text-transform: lowercase;
}
.row1 .views, .row2 .views {
    left: 207px !important;
    top: 48px!important;
    padding: 0px 3% 0px 0px!important;
    margin: 0!important;
    width: auto!important;
    position: absolute;
    height: 25px;
    line-height: 25px;
    background-color: #f2f2f2;
    color: #6d6d6d;
    font-weight: 600;
    margin-left: .85%!important;
    text-transform: lowercase;
}
.row1 .posts br, .row2 .posts br, .row1 .views br, .row2 .views br {
    display: none;
}
.row1 .views:first-line, .row2 .views:first-line {
    text-transform: capitalize;
}
.row1 .posts:first-line, .row2 .posts:first-line {
    text-transform: capitalize;
}
.row1 .icon .dterm:after, .row2 .icon .dterm:after {
    content: 'e';
    position: absolute;
    bottom: 10px;
    z-index: 1;
    left: 202px!important;
    color: #6d6d6d;
}

Até mais!

Foi, obrigado