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

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

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

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

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

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

Ir para o topo

- Tópicos semelhantes

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