Spoiler parecido com esse

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

Resolvido Spoiler parecido com esse

Mensagem por Nyronmi em 12/03/11, 03:04 pm

Qual é sua questão:
A imagem está logo abaixo, eu queria saber se existe uma forma de deixar o spoiler mais ou menos parecido com esse aqui!
Obrigado!

Que medidas você tomou para corrigir o problema:
Nenhuma!

Apresente-nos imagens do problema (se necessário):
avatar

Nyronmi
Nível 6

Masculino
Inscrito dia : 15/02/2011
Mensagens : 72
Pontos Ativos : 118

Ver perfil do usuário http://colapso.livreforum.com/

Resolvido Re: Spoiler parecido com esse

Mensagem por Itachi Uchiha em 12/03/11, 03:09 pm

Pode me dar o endereço de algum post de tal fórum onde viu isso?
avatar

Itachi Uchiha
Membro do Fórum

Masculino
Inscrito dia : 14/06/2010
Mensagens : 1292
Pontos Ativos : 1860

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Spoiler parecido com esse

Mensagem por Cream em 12/03/11, 03:14 pm

Olá,

Não garanto que ficará igual. Mas podes personalizar seu spoiler. Veja:
Personalização do spoiler

Abraços.
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Spoiler parecido com esse

Mensagem por Nyronmi em 12/03/11, 03:20 pm

avatar

Nyronmi
Nível 6

Masculino
Inscrito dia : 15/02/2011
Mensagens : 72
Pontos Ativos : 118

Ver perfil do usuário http://colapso.livreforum.com/

Resolvido Re: Spoiler parecido com esse

Mensagem por Itachi Uchiha em 12/03/11, 03:23 pm

Veja se da certo:
Código:
<span class="Apple-style-span" style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px;"><input class="spoilerbutton" style="background-attachment: initial; background-clip: initial; background-color: #d6e0f4; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(0, 102, 255); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(0, 102, 255); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 102, 255); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 102, 255); border-top-style: solid; border-top-width: 1px; color: #0066ff; font: normal normal normal 11px/normal sans-serif; padding-bottom: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px;" type="button" value="Spoiler" /></span><span class="Apple-style-span" style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px;"><span style="font-size: 10px;">(clique para mostrar/esconder)</span></span>
<span class="Apple-style-span" style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px;"><input class="spoilerbutton" style="background-attachment: initial; background-clip: initial; background-color: #d6e0f4; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(0, 102, 255); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(0, 102, 255); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 102, 255); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 102, 255); border-top-style: solid; border-top-width: 1px; color: #0066ff; font: normal normal normal 11px/normal sans-serif; padding-bottom: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px;" type="button" value="Spoiler" /></span><span class="Apple-style-span" style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px;"><span style="font-size: 10px;">(clique para mostrar/esconder)</span></span>
<span class="Apple-style-span" style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px;"><span style="font-size: 10px;"><span class="Apple-style-span" style="color: #0f0f0f; font-size: 12px;"></span></span></span>
<div class="codeheader" style="color: #3f3f3b; font-size: 11px; font-style: normal; font-weight: bold; padding-bottom: 0px; padding-left: 0.3em; padding-right: 0.3em; padding-top: 0px; text-decoration: none;">
<span class="Apple-style-span" style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px;"><span style="font-size: 10px;">Código: <a class="codeoperation" href="http://www.mundorpgmaker.com/forum/index.php?topic=64124.0" style="color: #356ea6; font-weight: normal; text-decoration: none;">[Selecionar]</a></span></span></div>
<span class="Apple-style-span" style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px;"><span style="font-size: 10px;"><code class="bbc_code" style="background-attachment: initial; background-clip: initial; background-color: #b5c4e6; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(102, 153, 204); border-bottom-style: solid; border-bottom-width: 5px; border-left-color: rgb(102, 153, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(102, 153, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(102, 153, 204); border-top-style: solid; border-top-width: 5px; display: block; font-family: 'courier new', 'times new roman', monospace; font-size: 11px; height: 20px; line-height: 1.5em; max-height: 24em; overflow-x: auto; overflow-y: auto; padding-bottom: 3px; padding-left: 1em; padding-right: 1em; padding-top: 3px;">Seu texto aqui</code></span></span
avatar

Itachi Uchiha
Membro do Fórum

Masculino
Inscrito dia : 14/06/2010
Mensagens : 1292
Pontos Ativos : 1860

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Spoiler parecido com esse

Mensagem por Nyronmi em 12/03/11, 03:27 pm

Mas eu tenho q colocar em visualização :seta3: cores :seta3: folha em estilo CSS né??
E eu coloquei aí mas ficou a mesma coisa olha:
http://colapso.livreforum.com/t185-passo-a-passo-em-busca-de-uma-maca
avatar

Nyronmi
Nível 6

Masculino
Inscrito dia : 15/02/2011
Mensagens : 72
Pontos Ativos : 118

Ver perfil do usuário http://colapso.livreforum.com/

Resolvido Re: Spoiler parecido com esse

Mensagem por Gaaratsu em 12/03/11, 03:34 pm

Olá,

Desejas ter a opção de esconder e/mostrar no spoiller ?


Type.


GaaratsuAjudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Spoiler parecido com esse

Mensagem por Nyronmi em 12/03/11, 03:35 pm

não precisa, sendo pequeno daquele jeito fica ótimo!
de preferencia azul!
avatar

Nyronmi
Nível 6

Masculino
Inscrito dia : 15/02/2011
Mensagens : 72
Pontos Ativos : 118

Ver perfil do usuário http://colapso.livreforum.com/

Resolvido Re: Spoiler parecido com esse

Mensagem por Itachi Uchiha em 12/03/11, 03:37 pm

Vamos fazer assim:
Vá em Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

E cole o seguinte código:
background-image: url(LINK DA IMAGEM);
avatar

Itachi Uchiha
Membro do Fórum

Masculino
Inscrito dia : 14/06/2010
Mensagens : 1292
Pontos Ativos : 1860

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Spoiler parecido com esse

Mensagem por Gaaratsu em 12/03/11, 03:42 pm

Olá,

Tente colar este código na sua CSS:

Código:
 
    spoiler {
  color: blue
 New.Button
background-image: url(LINK DA IMAGEM);
}

Em LINK DA IMAGEM, coloque a imagem do botão. Ok ?
Depois de colar o código do João Victor, tente usar este acima e veja se resulta em algo.

Painel de controle Seta Visualização :seta2: Imagens & Cores Aba Seta Cores :seta3: Folha de Estilo CSS

Resultou?


Type.
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Spoiler parecido com esse

Mensagem por Nyronmi em 12/03/11, 03:47 pm

Dá isso:
Erro

Erro detectado
Nós contamos um número diferente de "{" e de "}". Isto significa que o seu CSS pode não ser válido e não será exibido corretamente no seu fórum.

Lhe aconselhamos que releia o seu código.
avatar

Nyronmi
Nível 6

Masculino
Inscrito dia : 15/02/2011
Mensagens : 72
Pontos Ativos : 118

Ver perfil do usuário http://colapso.livreforum.com/

Resolvido Re: Spoiler parecido com esse

Mensagem por Luciano98 em 12/03/11, 03:49 pm

@Nyronmi escreveu:Dá isso:
Erro

Erro detectado
Nós contamos um número diferente de "{" e de "}". Isto significa que o seu CSS pode não ser válido e não será exibido corretamente no seu fórum.

Lhe aconselhamos que releia o seu código.
Quando você for salvar o CSS basta clicar em "Salvar" ao invés de "Validar".

Até mais.
Luciano98.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Spoiler parecido com esse

Mensagem por Mikáá em 12/03/11, 03:50 pm

Aqui tem:

Código:
  dl.codebox {
  color: blue;
 New.Button;
background-image: url(LINK DA IMAGEM);
}
avatar

Mikáá
Hiperativo

Masculino
Inscrito dia : 13/02/2010
Mensagens : 3155
Pontos Ativos : 4009

Ver perfil do usuário https://www.facebook.com/amo.e.odeio

Resolvido Re: Spoiler parecido com esse

Mensagem por muryllodantas em 12/03/11, 03:59 pm

é por que faltou o ponto


.spoiler {
color: blue
New.Button
background-image: url(LINK DA IMAGEM);
}
avatar

muryllodantas
Usuário destaque

Masculino
Inscrito dia : 31/10/2010
Mensagens : 760
Pontos Ativos : 1013

Ver perfil do usuário http://rendersdesigner.forumeiro.com/

Resolvido Re: Spoiler parecido com esse

Mensagem por Nyronmi em 12/03/11, 04:07 pm

olha eu coloquei isso:

background-image: url(LINK DA IMAGEM); (clique para mostrar/esconder)
(clique para mostrar/esconder)
spoiler {
color: blue
New.Button
background-image: url(LINK DA IMAGEM);

com esse link:
http://i68.servimg.com/u/f68/16/18/13/90/spoile11.png

Mas fica a mesma coisa:
http://colapso.livreforum.com/t185-passo-a-passo-em-busca-de-uma-maca

Quando eu coloco o link da imagem na folha de CSS e salvo fika em vés de o link da imagem, fika escrito (LINK DA IMAGEM) sendo q eu salvei o link da imagem normal!

E tipo, pergunta:
quando coloka o link da imagem, coloka com [img][/img] ou sem isso??
avatar

Nyronmi
Nível 6

Masculino
Inscrito dia : 15/02/2011
Mensagens : 72
Pontos Ativos : 118

Ver perfil do usuário http://colapso.livreforum.com/

Resolvido Re: Spoiler parecido com esse

Mensagem por Shek em 14/03/11, 12:24 pm

Olá,

creio que não há como personalizar o Spoiler como deseja. Sobre sua última questão, não cheguei a compreender muito bem, mais quando quizer adicionar alguma imagem ao Spoiler apenas use as tags:
Código:
[spoiler][img]ENDEREÇO DA IMAGEM[/img][/spoiler]

Ou seja, o primeiro código vem com as tags "spoliler" abrindo e fechando as mesmas e no meio delas, use o código das imagens, que refere-se ao "IMG" entre tags também. Lembre-se de fechá-las conforme abriu.

Piscada
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17160
Pontos Ativos : 21418

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Spoiler parecido com esse

Mensagem por Nyronmi em 14/03/11, 11:39 pm

@Dury escreveu:Olá,

creio que não há como personalizar o Spoiler como deseja. Sobre sua última questão, não cheguei a compreender muito bem, mais quando quizer adicionar alguma imagem ao Spoiler apenas use as tags:
Código:
[spoiler][img]ENDEREÇO DA IMAGEM[/img][/spoiler]

Ou seja, o primeiro código vem com as tags "spoliler" abrindo e fechando as mesmas e no meio delas, use o código das imagens, que refere-se ao "IMG" entre tags também. Lembre-se de fechá-las conforme abriu.

Piscada

Desculpe mas não é isso o que eu quis dizer!
avatar

Nyronmi
Nível 6

Masculino
Inscrito dia : 15/02/2011
Mensagens : 72
Pontos Ativos : 118

Ver perfil do usuário http://colapso.livreforum.com/

Resolvido Re: Spoiler parecido com esse

Mensagem por #Frank! em 15/03/11, 01:15 am

Olá !

O código CSS desaparece depois de ter colocá-do ?

O código seria este já com o link da imagem :

Código:
.spoiler {
color: blue
background-image: url(http://i68.servimg.com/u/f68/16/18/13/90/spoile11.png);
background-position: top;
background-position: 30px 48px;
background-repeat: repeat;
}
Alterei o código, agora é só colocá-lo na folha css e testar.

Se não estiver satisfeito (a) com este código a cima, coloque este também :

.spoiler_content { background-image: url(http://i68.servimg.com/u/f68/16/18/13/90/spoile11.png); background-repeat: no-repeat; background-color: #FF0000; color: #FF0000; color: 10pt; font-family Verdana, Geneva, sans-serif; }
Vermelho : Cor que aparecerá atrás do spoiler como fundo.
Verde : Cor da letra no spoiler.

Atenciosamente.
BlueAngel.

avatar

#Frank!
Membro do Fórum

Feminino
Inscrito dia : 14/09/2009
Mensagens : 1128
Pontos Ativos : 1606

Ver perfil do usuário http://finite.forumeiros.com

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

- Tópicos similares

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