Personalizar spoiler com pergaminho

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!

Saudações!

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.
Melhores cumprimentos,
Sennior.

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;
}

Saudações!

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.
Melhores cumprimentos,
Sennior.

Agora ele sumiu e.e

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

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.

Obrigado. Pode fechar.