Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Ajustar imagens do spoiler

3 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

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

Tópico resolvido Ajustar imagens do spoiler

Mensagem por Kasthiel 01.12.17 17:30

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 *****/
Kasthiel

Kasthiel
***

Membro desde : 20/12/2012
Mensagens : 130
Pontos : 188

http://wydchronus.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Ajustar imagens do spoiler

Mensagem por Konai 01.12.17 20:25

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. Positivo

Att! Feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ajustar imagens do spoiler

Mensagem por Kasthiel 01.12.17 20:37

Gaaratsu escreveu: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. Positivo

Att! Feliz
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...
Kasthiel

Kasthiel
***

Membro desde : 20/12/2012
Mensagens : 130
Pontos : 188

http://wydchronus.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Ajustar imagens do spoiler

Mensagem por Konai 03.12.17 1:27

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! Feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ajustar imagens do spoiler

Mensagem por Kasthiel 03.12.17 1:52

Gaaratsu escreveu: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! Feliz
Tá melhor assim... Uma duvida... testei um spoiler grande, serai normal a imagem desfocar e perder parte da conf?
Kasthiel

Kasthiel
***

Membro desde : 20/12/2012
Mensagens : 130
Pontos : 188

http://wydchronus.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Ajustar imagens do spoiler

Mensagem por Konai 03.12.17 1:54

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

Att! Feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ajustar imagens do spoiler

Mensagem por Kasthiel 03.12.17 2:08

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

Att! Feliz
Já tem ehehe

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

Kasthiel
***

Membro desde : 20/12/2012
Mensagens : 130
Pontos : 188

http://wydchronus.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Ajustar imagens do spoiler

Mensagem por Konai 03.12.17 2:38

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

Att! Feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ajustar imagens do spoiler

Mensagem por Kasthiel 03.12.17 3:02

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

Att! Feliz
Ah beleza então, vou ver se encontro uma imagem com poucos detalhes, muito obrigado pela ajuda Muito feliz
Kasthiel

Kasthiel
***

Membro desde : 20/12/2012
Mensagens : 130
Pontos : 188

http://wydchronus.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ajustar imagens do spoiler

Mensagem por Ketholy 03.12.17 10:10

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

Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

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

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

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