Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
Gaaratsu
 
iScroll
 
Daniel Yan
 
Ketholy
 
Eduardo Lima
 
Shek
 
ranzatti
 
cocas20
 
Lost154
 

Quem está conectado
199 usuários online :: 4 usuários cadastrados, Nenhum Invisível e 195 Visitantes :: 2 Motores de busca

Daniel Yan, Ketholy, odelgado, YouTube3

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 12:05

Personalizar spoiler com pergaminho

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

Resolvido Personalizar spoiler com pergaminho

Mensagem por BichodoMato em Qui 21 Jul 2016 - 10: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: http://ajuda.forumeiros.com/t96885-alterar-exibicao-de-spoiler-para-tipo-pergaminho-naruto

Obrigado a quem puder ajudar!
avatar

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 06/07/2013
Mensagens : 340
Pontos Ativos : 563

Ver perfil do usuário http://naruto-survival.forumeiros.com

Resolvido Re: Personalizar spoiler com pergaminho

Mensagem por Sennior em Qui 21 Jul 2016 - 13: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
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Personalizar spoiler com pergaminho

Mensagem por BichodoMato em Qui 21 Jul 2016 - 14: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;
}
avatar

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 06/07/2013
Mensagens : 340
Pontos Ativos : 563

Ver perfil do usuário http://naruto-survival.forumeiros.com

Resolvido Re: Personalizar spoiler com pergaminho

Mensagem por Sennior em Qui 21 Jul 2016 - 14: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
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Personalizar spoiler com pergaminho

Mensagem por BichodoMato em Qui 21 Jul 2016 - 15:27

Agora ele sumiu e.e
avatar

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 06/07/2013
Mensagens : 340
Pontos Ativos : 563

Ver perfil do usuário http://naruto-survival.forumeiros.com

Resolvido Re: Personalizar spoiler com pergaminho

Mensagem por Sennior em Sex 22 Jul 2016 - 9: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.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Personalizar spoiler com pergaminho

Mensagem por BichodoMato em Ter 26 Jul 2016 - 10:34

Obrigado. Pode fechar.
avatar

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 06/07/2013
Mensagens : 340
Pontos Ativos : 563

Ver perfil do usuário http://naruto-survival.forumeiros.com

Resolvido Re: Personalizar spoiler com pergaminho

Mensagem por while em Ter 26 Jul 2016 - 12: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.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3113
Pontos Ativos : 4525

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum