Ajustar imagens do spoiler

[Kasthiel]

Detalhes da questão

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

Descrição

Eu encontrei esse css aqui no fórum e gostaria de usar com minhas imagens, porem aquela que fica em cima do botão pra abrir o spoiler fica repetindo e está muito grossa, gostaria q continuasse grande porem mais fina e uma imagem só, e quando abre gostaria q utilizasse a imagem inteira juntamente com as bordas da própria imagem, porque esta pegando só o meio dela e se possível fazer só o texto de dentro do spoiler ficar preto, obrigado.

Um exemplo pode ser encontrado na minha categoria de Anuncios.

Código:


/***** SPOILER PERSONALIZADO *****/
dl.codebox.spoiler {
    width: 550px;
    margin: 0 auto;
    background: none;
    padding: 0;
    margin-bottom: 20px;
}
dl.codebox.spoiler > dt {
    position: static;
    height: 77px;
    line-height: 77px;
    background-image: url(https://i.imgur.com/B72UExl.png);
}
dl.codebox.spoiler > dt .genmed {
    font-size: 24px;
}
dl.codebox.spoiler > dd .spoiler_content {
    position: static;
    background-position: center;
    background-image: url(https://i.imgur.com/wgvTJIK.jpg);
    padding: 20px 80px;
}
dl.codebox.spoiler > dd.spoiler_closed {
    display: none;
}
/***** FIM *****/


[Konai]

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

Olá!

Teremos que diminuir a imagem por inteira, não tem como deixar ela grande, porém fina. Ao menos que peça na área de criações gráficas.

/***** SPOILER PERSONALIZADO *****/
dl.codebox.spoiler {
width: 550px;
margin: 0 auto;
background: none;
padding: 0;
margin-bottom: 20px;
}
dl.codebox.spoiler > dt {
position: static;
height: 77px;
line-height: 77px;
background-image: url(LINK_DA_SUA_IMAGEM_AQUI);
background-repeat: no-repeat;
background-size: 50px;
}
dl.codebox.spoiler > dt .genmed {
font-size: 24px;
}
dl.codebox.spoiler > dd .spoiler_content {
position: static;
background-position: center;
background-image: url(LINK_DA_SUA_IMAGEM_AQUI);
padding: 20px 80px;
color: black !important;
font-weight: 500 !important;
}
dl.codebox.spoiler > dd.spoiler_closed {
display: none;
}
/***** FIM *****/

Destaquei em negrito as linhas para modificar. Não entendi bem o que quis dizer com "deixar a imagem inteira juntamente com as bordas da própria imagem."

background-size: 50px;

O valor é referente ao tamanho da imagem, diminua ou aumente como desejar.

Att!

[Kasthiel]

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

Olá!

Teremos que diminuir a imagem por inteira, não tem como deixar ela grande, porém fina. Ao menos que peça na área de criações gráficas.

/***** SPOILER PERSONALIZADO *****/
dl.codebox.spoiler {
   width: 550px;
   margin: 0 auto;
   background: none;
   padding: 0;
   margin-bottom: 20px;
}
dl.codebox.spoiler > dt {
   position: static;
   height: 77px;
   line-height: 77px;
   background-image: url(LINK_DA_SUA_IMAGEM_AQUI);
   background-repeat: no-repeat;
   background-size: 50px;
}
dl.codebox.spoiler > dt .genmed {
   font-size: 24px;
}
dl.codebox.spoiler > dd .spoiler_content {
   position: static;
   background-position: center;
   background-image: url(LINK_DA_SUA_IMAGEM_AQUI);
   padding: 20px 80px;
   color: black !important;
   font-weight: 500 !important;
}
dl.codebox.spoiler > dd.spoiler_closed {
   display: none;
}
/***** FIM *****/

Destaquei em negrito as linhas para modificar. Não entendi bem o que quis dizer com "deixar a imagem inteira juntamente com as bordas da própria imagem."

background-size: 50px;

O valor é referente ao tamanho da imagem, diminua ou aumente como desejar.

Att!

A imagem ficou pequena rs, tem como ao menos centralizar?...
Quando disse deixar a borda da imagem seria dessa https://i.imgur.com/wgvTJIK.jpg   pq ela tem efeito de rasgado e velho ao redor,e nao ta pegando...

[Konai]

Substitua o código anterior, por este outro:

Código:

/***** SPOILER PERSONALIZADO *****/
dl.codebox.spoiler {
  width: 550px;
  margin: 0 auto;
  background: none;
  padding: 0;
  margin-bottom: 20px;
}
dl.codebox.spoiler > dt {
  position: static;
  height: 77px;
  line-height: 77px;
  background-image: url(https://i.imgur.com/B72UExl.png);
  background-position: top !important;
  background-repeat: no-repeat;
}
dl.codebox.spoiler > dt .genmed {
  font-size: 24px;
}
dl.codebox.spoiler > dd .spoiler_content {
  position: static;
  background-position: center;
  background-image: url(https://i.imgur.com/wgvTJIK.jpg);
  background-position: top !important;
  background-size: cover !important;
  padding: 20px 80px;
  color: black !important;
  font-weight: 500 !important;
}
dl.codebox.spoiler > dd.spoiler_closed {
  display: none;
}
/***** FIM *****/

Att!

[Kasthiel]

Substitua o código anterior, por este outro:

Código:

/***** SPOILER PERSONALIZADO *****/
dl.codebox.spoiler {
  width: 550px;
  margin: 0 auto;
  background: none;
  padding: 0;
  margin-bottom: 20px;
}
dl.codebox.spoiler > dt {
  position: static;
  height: 77px;
  line-height: 77px;
  background-image: url(https://i.imgur.com/B72UExl.png);
  background-position: top !important;
  background-repeat: no-repeat;
}
dl.codebox.spoiler > dt .genmed {
  font-size: 24px;
}
dl.codebox.spoiler > dd .spoiler_content {
  position: static;
  background-position: center;
  background-image: url(https://i.imgur.com/wgvTJIK.jpg);
  background-position: top !important;
  background-size: cover !important;
  padding: 20px 80px;
  color: black !important;
  font-weight: 500 !important;
}
dl.codebox.spoiler > dd.spoiler_closed {
  display: none;
}
/***** FIM *****/

Att!

Tá melhor assim... Uma duvida... testei um spoiler grande, serai normal a imagem desfocar e perder parte da conf?

[Konai]

Poderia me mostrar esse teste com um spoiler grande? Coloque em um tópico do seu fórum para que eu possa ver.

Att!

[Kasthiel]

Poderia me mostrar esse teste com um spoiler grande? Coloque em um tópico do seu fórum para que eu possa ver.

Att!

Já tem ehehe

http://peniel-ro.forumeiros.com/t1-anuncio-seu-primeiro-topico

[Konai]

Bem... neste caso, é normal mesmo! Forçou a imagem além de seu limite.
Fiz o melhor que pude para o senhor.

Att!

[Kasthiel]

Bem... neste caso, é normal mesmo! Forçou a imagem além de seu limite.
Fiz o melhor que pude para o senhor.

Att!

Ah beleza então, vou ver se encontro uma imagem com poucos detalhes, muito obrigado pela ajuda

[Ketholy]

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