Novo Modelo do "Spoiler"

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Novo Modelo do "Spoiler"

Mensagem por ApolloCoder 03.01.19 20:36

Detalhes da questão


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

Descrição


Olá, espero que quem me atenda esteja bem Feliz e já agradeço pelo tempo dedicado a ler este tópico, vamos lá.

A Opção de "Spoiler" no meu fórum, atualmente é ASSIM.
Eu gostaria de deixar mais simples e compacto, pois ocupa muito espaço e muitas das vezes atrapalha.
Editei uma imagem para deixar como supostamente eu gostaria que fosse, EXEMPLO AQUI.

Já aproveitei e peguei algumas informações sobre o modelo editado para ajudar.
Código da Cor: #3793ff ou em RGB (55, 147, 255).
Transparência: 55%.

Gostaria também, se for possível, colocar algum efeito estilo "Mouse Houver" que torne o botão mais claro ao passar o Mouse por cima.

Eu realmente não sei se é possível fazer tudo isso no modelo do meu fórum, se não for irei entender Feliz, mas caso seja já disponibilizei as informações necessárias, obrigado desde já.
ApolloCoder

ApolloCoder
Novo Membro

Membro desde : 27/12/2018
Mensagens : 11
Pontos : 21

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Novo Modelo do "Spoiler"

Mensagem por RafaelS. 03.01.19 23:40

Olá @ApolloCoder,

Poderia nos indicar um tópico do seu fórum onde haja um "spoiler"?

Fico no aguardo. Feliz
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Novo Modelo do "Spoiler"

Mensagem por ApolloCoder 04.01.19 0:01

ApolloCoder

ApolloCoder
Novo Membro

Membro desde : 27/12/2018
Mensagens : 11
Pontos : 21

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Novo Modelo do "Spoiler"

Mensagem por RafaelS. 04.01.19 0:27

Olá novamente!

Obrigado pelos tópicos.
Adicione à sua folha de estilos (CSS):

Código:
dl.codebox.spoiler:before {
    content: none;
}

dl.codebox.spoiler {
    background: none;
    border: none;
}

dl.codebox.spoiler dt {
    font-weight: 600;
    text-transform: uppercase;
    color: white;
    font-size: 0px;
    margin: 0;
    padding-top: 5px;
    background: #3793ff75;
    border-radius: 4px;
    border: 1px solid #65a9f8;
    width: 14%;
}

dl.codebox.spoiler dt:before {
    content: 'MOSTRAR';
    font-size: 15px;
}

.spoiler_content.hidden {
    margin: 5px;
    border: 1px dashed #a3cbfd;
    padding: 5px;
}

Até mais. Feliz
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Novo Modelo do "Spoiler"

Mensagem por ApolloCoder 04.01.19 0:40

Funcionou, ficou ótimo, obrigado pela ajuda Feliz
ApolloCoder

ApolloCoder
Novo Membro

Membro desde : 27/12/2018
Mensagens : 11
Pontos : 21

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Novo Modelo do "Spoiler"

Mensagem por RafaelS. 04.01.19 0:44

@ApolloCoder,

Só faltou o efeito a passar o mouse. É só adicionar mais esse código:

Código:
dl.codebox.spoiler dt:hover {
    background: #a3cbfdba;
    transition: 0.2s ease;
}

Até mais. Feliz

Tópico movido de 'Questões sobre códigos' para 'Questões sobre a aparência do fórum'
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Novo Modelo do "Spoiler"

Mensagem por Convidado 09.01.19 13:50

Tópico resolvido


Tópico marcado como resolvido pela equipe por abandono do autor.
Anonymous

Convidado
Convidado


Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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