Spoiler parecido com esse

+5
Luciano98
Konai
Cream
Itachi Uchiha
Nyronmi
9 participantes

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

Tópico resolvido Spoiler parecido com esse

Mensagem por Nyronmi 12.03.11 18:04

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):
Spoiler parecido com esse Spoile10
Nyronmi

Nyronmi
**

Membro desde : 15/02/2011
Mensagens : 72
Pontos : 118

http://colapso.livreforum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por Itachi Uchiha 12.03.11 18:09

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

Itachi Uchiha
Super Membro

Membro desde : 14/06/2010
Mensagens : 1292
Pontos : 1860

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por Cream 12.03.11 18:14

Olá,

Não garanto que ficará igual. Mas podes personalizar seu spoiler. Veja:
Spoiler parecido com esse 684865 Personalização do spoiler

Abraços.
Cream

Cream
Membro Entusiasta
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por Nyronmi 12.03.11 18:20

Nyronmi

Nyronmi
**

Membro desde : 15/02/2011
Mensagens : 72
Pontos : 118

http://colapso.livreforum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por Itachi Uchiha 12.03.11 18:23

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

Itachi Uchiha
Super Membro

Membro desde : 14/06/2010
Mensagens : 1292
Pontos : 1860

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por Nyronmi 12.03.11 18:27

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
Nyronmi

Nyronmi
**

Membro desde : 15/02/2011
Mensagens : 72
Pontos : 118

http://colapso.livreforum.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por Konai 12.03.11 18:34

Olá,

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


Type.
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: Spoiler parecido com esse

Mensagem por Nyronmi 12.03.11 18:35

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

Nyronmi
**

Membro desde : 15/02/2011
Mensagens : 72
Pontos : 118

http://colapso.livreforum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por Itachi Uchiha 12.03.11 18:37

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);
Itachi Uchiha

Itachi Uchiha
Super Membro

Membro desde : 14/06/2010
Mensagens : 1292
Pontos : 1860

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por Konai 12.03.11 18:42

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.
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: Spoiler parecido com esse

Mensagem por Nyronmi 12.03.11 18:47

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

Nyronmi
**

Membro desde : 15/02/2011
Mensagens : 72
Pontos : 118

http://colapso.livreforum.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por Luciano98 12.03.11 18:49

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

Luciano98
Membro Entusiasta
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por Mikáá 12.03.11 18:50

Aqui tem:

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

Mikáá
Hiper Membro

Membro desde : 13/02/2010
Mensagens : 3158
Pontos : 4014

https://www.facebook.com/amo.e.odeio

Ir para o topo Ir para baixo

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por muryllodantas 12.03.11 18:59

é por que faltou o ponto


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

muryllodantas
Membro

Membro desde : 31/10/2010
Mensagens : 760
Pontos : 1013

http://rendersdesigner.forumeiro.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por Nyronmi 12.03.11 19:07

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:
https://i.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??
Nyronmi

Nyronmi
**

Membro desde : 15/02/2011
Mensagens : 72
Pontos : 118

http://colapso.livreforum.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por Shek 14.03.11 15:24

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
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por Nyronmi 15.03.11 2:39

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

Nyronmi
**

Membro desde : 15/02/2011
Mensagens : 72
Pontos : 118

http://colapso.livreforum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Spoiler parecido com esse

Mensagem por BlueAngel 15.03.11 4:15

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(https://i.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.

BlueAngel

BlueAngel
Super Membro

Membro desde : 14/09/2009
Mensagens : 1128
Pontos : 1606

http://finite.forumeiros.com

Ir para o topo Ir para baixo

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

- Tópicos semelhantes

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