Personalizar spoiler com pergaminho

3 participantes

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

Tópico resolvido Personalizar spoiler com pergaminho

Mensagem por BichodoMato 21.07.16 14:23

Detalhes da questão


Endereço do fórum: http://naruto-survival.forumeiros.com/
Versão do fórum: PhpBB3

Descrição


Olá, gostaria de alterar a imagem do spoiler do meu fórum para uma de pergaminho, assim quando clica-se no rolo fechado ele abre e revela as informações contidas no 'papel' do rolo. As imagens são essas:

Pergaminho inteiro:

Rolo:

Papel:

Além disso, eu gostaria que o 'Papel' fosse repetido sempre que o conteúdo do pergaminho terminasse, assim não teria limites para onde o papel se expandiria.

Eu fiz um tópico bem similar à esse no passado e esta neste link: https://ajuda.forumeiros.com/t96885-alterar-exibicao-de-spoiler-para-tipo-pergaminho-naruto

Obrigado a quem puder ajudar!
BichodoMato

BichodoMato
****

Membro desde : 07/07/2013
Mensagens : 396
Pontos : 657

http://naruto-survival.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalizar spoiler com pergaminho

Mensagem por Sennior 21.07.16 17:29

Saudações! Muito feliz

Vá em:
Painel de controle  Seta curta Visualização  Seta curta Cores Seta curta "Aba" Folha CSS.

Código:
dl.codebox.spoiler {
    background: url(http://i65.tinypic.com/29gg3h5.png);
    padding: 30px;
    background-repeat: no-repeat;
    background-position-x: 95px;
    border: none!important;
}dl.codebox dt {
    border-bottom: none!important;
}.spoiler_content.hidden {
    background-image: url(http://i39.servimg.com/u/f39/19/08/53/62/oie_kb12.png);
    background-repeat: repeat-y;
    background-position-x: 68px;
    position: relative;
    top: 22px;
}
.spoiler_content.hidden {
    text-align: center;
    width: 55%;
    padding: 0pc 158px 4pc 9pc;
}
.spoiler_content.hidden {
   position: relative;
    top: 22px;

}
.spoiler_content {
position: relative;
background-position-x: 0px;
top: -21px;
left: -11px;
}
.spoiler_content {
background-image: url(http://i39.servimg.com/u/f39/19/08/53/62/oie_kb12.png);
background-repeat: repeat-y;
color: #10pt;
padding: 20px 78px 40px 63px;
text-align: justify;
}

Salve e Visualize seu fórum. Piscada
Melhores cumprimentos,
Sennior. De bem com a vida
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar spoiler com pergaminho

Mensagem por BichodoMato 21.07.16 18:36

Algumas coisas ficaram fora de alinhamento, tive de alterar o código ao meu gosto, porém ainda não consegui resolver algo: o título do spoiler está do lado do rolo do pergaminho, tem como deixa-lo ligeiramente abaixo?

Aqui o código já com algumas alterações feitas:

Código:
dl.codebox.spoiler {
    background: url(http://i65.tinypic.com/29gg3h5.png);
    padding: 30px;
    background-repeat: no-repeat;
    background-position-x: 95px;
    border: none!important;
}dl.codebox dt {
    border-bottom: none!important;
}.spoiler_content.hidden {
    background-image: url(http://i39.servimg.com/u/f39/19/08/53/62/oie_kb12.png);
    background-repeat: repeat-y;
    background-position-x: 80px;
    position: relative;
    top: 22px;
}
.spoiler_content.hidden {
    text-align: justify;
    width: 55%;
    padding: 0pc 158px 4pc 9.5pc;
}
.spoiler_content.hidden {
  position: relative;
    top: 22px;
 
}
.spoiler_content {
position: relative;
background-position-x: 0px;
top: -21px;
left: -11px;
}
.spoiler_content {
background-image: url(http://i39.servimg.com/u/f39/19/08/53/62/oie_kb12.png);
background-repeat: repeat-y;
color: #000000;
padding: 20px 76px 40px 63px;
text-align: justify;
font-size: 11px;
}
BichodoMato

BichodoMato
****

Membro desde : 07/07/2013
Mensagens : 396
Pontos : 657

http://naruto-survival.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalizar spoiler com pergaminho

Mensagem por Sennior 21.07.16 18:42

Saudações! Muito feliz

Vá em:
Painel de controle  Seta curta Visualização  Seta curta Cores Seta curta "Aba" Folha CSS.

Código:
dl.codebox dt {
    border-bottom: none!important;
    text-align: center!important;
    position: relative;
    top: 50px;
}dl.codebox.spoiler {
    background: url(http://i65.tinypic.com/29gg3h5.png);
    padding: 30px;
    background-repeat: no-repeat;
    background-position-x: 95px;
    border: none!important;
}dl.codebox dt {
    border-bottom: none!important;
}.spoiler_content.hidden {
    background-image: url(http://i39.servimg.com/u/f39/19/08/53/62/oie_kb12.png);
    background-repeat: repeat-y;
    background-position-x: 80px;
    position: relative;
    top: 22px;
}
.spoiler_content.hidden {
    text-align: justify;
    width: 55%;
    padding: 0pc 158px 4pc 9.5pc;
}
.spoiler_content.hidden {
  position: relative;
    top: 22px;
 
}
.spoiler_content {
position: relative;
background-position-x: 0px;
top: -21px;
left: -11px;
}
.spoiler_content {
background-image: url(http://i39.servimg.com/u/f39/19/08/53/62/oie_kb12.png);
background-repeat: repeat-y;
color: #000000;
padding: 20px 76px 40px 63px;
text-align: justify;
font-size: 11px;
}

Salve e Visualize seu fórum. Piscada
Melhores cumprimentos,
Sennior. De bem com a vida
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar spoiler com pergaminho

Mensagem por BichodoMato 21.07.16 19:27

Agora ele sumiu e.e
BichodoMato

BichodoMato
****

Membro desde : 07/07/2013
Mensagens : 396
Pontos : 657

http://naruto-survival.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalizar spoiler com pergaminho

Mensagem por Sennior 22.07.16 13:27

Ora! Sumiu? Em choque
O senhor retirou o código antigo? Eu não alterei nada que ele pudesse sumir. Rindo

Mande -me teu CSS e volte a tentar este código, adicionando-o no inicio de teu CSS:
Código:
dl.codebox dt {
    border-bottom: none!important;
    text-align: center!important;
    position: relative;
    top: 50px;
}dl.codebox.spoiler {
    background: url(http://i65.tinypic.com/29gg3h5.png);
    padding: 30px;
    background-repeat: no-repeat;
    background-position-x: 95px;
    border: none!important;
}dl.codebox dt {
    border-bottom: none!important;
}.spoiler_content.hidden {
    background-image: url(http://i39.servimg.com/u/f39/19/08/53/62/oie_kb12.png);
    background-repeat: repeat-y;
    background-position-x: 80px;
    position: relative;
    top: 22px;
}
.spoiler_content.hidden {
    text-align: justify;
    width: 55%;
    padding: 0pc 158px 4pc 9.5pc;
}
.spoiler_content.hidden {
  position: relative;
    top: 22px;
 
}
.spoiler_content {
position: relative;
background-position-x: 0px;
top: -21px;
left: -11px;
}
.spoiler_content {
background-image: url(http://i39.servimg.com/u/f39/19/08/53/62/oie_kb12.png);
background-repeat: repeat-y;
color: #000000;
padding: 20px 76px 40px 63px;
text-align: justify;
font-size: 11px;
}

Até mais.
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar spoiler com pergaminho

Mensagem por BichodoMato 26.07.16 14:34

Obrigado. Pode fechar.
BichodoMato

BichodoMato
****

Membro desde : 07/07/2013
Mensagens : 396
Pontos : 657

http://naruto-survival.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar spoiler com pergaminho

Mensagem por while 26.07.16 16:03

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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