Modificar área das categorias

4 participantes

Ir para baixo

Tópico resolvido Modificar área das categorias

Mensagem por Batyman 28.03.16 1:00

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á Feliz
Batyman
Batyman
**

Membro desde : 26/03/2016
Mensagens : 58
Pontos : 93

http://riseofdemigods.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar área das categorias

Mensagem por Key of Destiny 28.03.16 2:26

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. Piscada
Key of Destiny
Key of Destiny
****

Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar área das categorias

Mensagem por Batyman 28.03.16 2:36

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

Membro desde : 26/03/2016
Mensagens : 58
Pontos : 93

http://riseofdemigods.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar área das categorias

Mensagem por Key of Destiny 28.03.16 2:47

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

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)?
Key of Destiny
Key of Destiny
****

Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar área das categorias

Mensagem por Batyman 28.03.16 2:51

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

Membro desde : 26/03/2016
Mensagens : 58
Pontos : 93

http://riseofdemigods.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar área das categorias

Mensagem por Key of Destiny 28.03.16 3:03

Peço perdão pela minha desatenção. Mostrando a lingua

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? Errado
Key of Destiny
Key of Destiny
****

Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar área das categorias

Mensagem por Batyman 28.03.16 4:42

@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.
Batyman
Batyman
**

Membro desde : 26/03/2016
Mensagens : 58
Pontos : 93

http://riseofdemigods.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar área das categorias

Mensagem por Key of Destiny 28.03.16 21:55

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 Modificar área das categorias Editer 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">
Key of Destiny
Key of Destiny
****

Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar área das categorias

Mensagem por Batyman 29.03.16 0:36

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

Membro desde : 26/03/2016
Mensagens : 58
Pontos : 93

http://riseofdemigods.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar área das categorias

Mensagem por Fraise 29.03.16 1:21

Olá!

Adicione em sua folha de estilos:
Código:
.topiclist .row dl dd img { margin-left: 55px !important; }

Até mais.
Fraise
Fraise
Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar área das categorias

Mensagem por Batyman 30.03.16 0:31

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

Membro desde : 26/03/2016
Mensagens : 58
Pontos : 93

http://riseofdemigods.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar área das categorias

Mensagem por GSCode 30.03.16 1:32

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

Membro desde : 11/10/2013
Mensagens : 591
Pontos : 1031

http://testforumbrasil.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar área das categorias

Mensagem por Batyman 31.03.16 23:32

Funcionou, muito obrigada!
Batyman
Batyman
**

Membro desde : 26/03/2016
Mensagens : 58
Pontos : 93

http://riseofdemigods.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar área das categorias

Mensagem por GSCode 01.04.16 4:38

Modificar área das categorias Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
GSCode
GSCode
Membro

Membro desde : 11/10/2013
Mensagens : 591
Pontos : 1031

http://testforumbrasil.forumeiros.com/forum

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos