Spoiler parecido com esse

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

por Itachi Uchiha 12.03.11 18:09

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

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.

por Nyronmi 12.03.11 18:20

aí está: http://www.mundorpgmaker.com/forum/index.php?topic=64124.0

por Itachi Uchiha 12.03.11 18:23

Veja se da certo:

Código:: <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" /> (clique para mostrar/esconder) <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" /> (clique para mostrar/esconder) <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;"> 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></div> <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

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

por Konai 12.03.11 18:34

Olá,

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

Type.

por Nyronmi 12.03.11 18:35

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

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

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 Visualização Imagens & Cores Aba Cores :seta3: Folha de Estilo CSS

Resultou?

Type.

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.

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.

por Mikáá 12.03.11 18:50

Aqui tem:

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

por muryllodantas 12.03.11 18:59

é por que faltou o ponto

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

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

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

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.

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

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.

Hitskin.com

Spoiler parecido com esse

Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse

Re: Spoiler parecido com esse