Como alterar o estilo do spoiler no meu fórum

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

Resolvido Como alterar o estilo do spoiler no meu fórum

Mensagem por Kakenho em 27/03/12, 02:27 pm

Qual é minha questão:
O titulo já explica tudo mas se alguem não entender minha pergunta é só falar **

Medidas que eu tomei para corrigir o problema:
Poucas

Links e imagens do meu problema:


Endereço do meu fórum:
http://peroleirosdesign.forumeiros.com

Versão do meu fórum:
PHPBB3
avatar

Kakenho
Nível 3

Masculino
Inscrito dia : 16/02/2012
Mensagens : 21
Pontos Ativos : 37

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

Resolvido Re: Como alterar o estilo do spoiler no meu fórum

Mensagem por MateusV. em 27/03/12, 02:30 pm

Olá, leia o conteudo do spoiler
Spoiler:
Personalização de cores do Spoiler
Ás vezes quando estamos editando um tema queremos arrumar também o spoiler, assim como a caixa de código e citação. Aqui veremos como fazer isto!


--> Tutoriais, Dicas e Astúcias <--
Personalização de cores do Spoiler


- Teremos de aceder à "Folha de estilo CSS":
Para que possamos personalizar o fundo da baliza código, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder à:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

(clique na imagem para aumentar)


- Ter uma noção de CSS em relação ao que pode ser personalizado:
Antes de adicionarmos o código, temos de saber o que estamos a personalizar, pois não basta adicionar o link da imagem, melhor dizendo, temos de saber trabalhar a aparência.
O que podemos utilizar para personalizar o fundo da baliza código:

  • background-color:
    Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor, existe outros tipos, mas para não complicar, analisaremos desta forma.
    @EXEMPLO escreveu:background-color: #FF0000;
  • background-image:
    Esta propriedade, é das principais, pois ela permitirá adicionar a imagem pretendida para que se possa ter uma imagem de fundo.
    @EXEMPLO escreveu:background-image: url(http://illiweb.com/bl/logo.png);
  • background-repeat:
    Definirá se haverá repetição da imagem ou não (no-repeat), podendo esta repetição fazer-se somente na horizontal (repeat-x), na vertical (repeat-y) ou também nos dois planos (repeat).
    @EXEMPLO escreveu:background-repeat: no-repeat;
  • background-attachment:
    Permitirá definir se a imagem toma uma posição de rolagem (scroll), sendo que estará sempre na mesma posição, independentemente do tamanho da caixa de texto, ou de fixagem (fixed), que fará com que a imagem fique na posição definida, mesmo que a caixa de texto aumente.
    @EXEMPLO escreveu:background-attachment: scroll;
  • background-position:
    Para definir a posição da imagem, se no topo (top), em baixo (bottom), à esquerda (left), à direita (right) ao centro (center), ou então por definição de valores em percentagem (%) ou em píxeis (px).
    @EXEMPLO escreveu:background-position: bottom right;
    background-position: 2px 10px;
    Atenção pois quando é utilizado palavras deve a primeiras variar entre top/center/bottom e a segunda entre left/center/right.

  • color:
    Poderá definir a cor da letra do campo de texto. Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor,
    @EXEMPLO escreveu:color: #FF0000;
  • font-size:
    Caso queira um tamanho de letra diferente. Nesta propriedade apenas teremos de adicionar o tamanho da letra, podendo ser em várias medias,
    @EXEMPLO escreveu:color: 10pt;
  • font-family:
    Se pretender uma diferente. Nesta propriedade apenas teremos de adicionar o o nome das fontes, podendo serem separados por vérgulas caso tenha uma ordem de prioridade,
    @EXEMPLO escreveu:font-family Verdana, Geneva, sans-serif;


Algumas propriedades que formos aplicar podem não funcionar devido às alterações que existem no código CSS de base dos nossos fóruns, sendo assim teremos de utilizar um meio de fazer as nossas modificações serem mais "poderosas" que o CSS de base. Para isso, nas propriedades que em primeira vista não funcionarem, antes do ponto-e-vírgula, adicione a palavra !important, como neste exemplo:
color: #FF0000 !important;

- Agora deverão copiar o código correspondente à versão:

Invision
Nome do spoiler.spoiler dt { propriedades }
Conteúdo do Spoiler.spoiler { propriedades }
PhpBB2
Nome do spoiler -------
Conteúdo do Spoiler.spoiler_content { propriedades }
PhpBB3
Nome do spoiler -------
Conteúdo do Spoiler.spoiler_content { propriedades }
PunBB
Nome do spoiler.codebox dt { propriedades }
Conteúdo do Spoiler.codebox dd { propriedades }

- Exemplos de códigos prontos:

Para maior entendimento de como funciona a estrutura destes códigos para personalização do Spoiler, foi seperado um exemlo de códigos para cada versão.

  • PHPBB3
    @EXEMPLO escreveu:.spoiler_content { background-color: #FF0000; color: #FF0000; color: 10pt; font-family Verdana, Geneva, sans-serif; }

  • PHPBB2
    @EXEMPLO escreveu:.spoiler_content { background-image: url(http://illiweb.com/bl/logo.png); background-repeat: no-repeat; background-position: bottom right;
    background-position: 2px 10px; color: #FF0000; color: 10pt; font-family Verdana, Geneva, sans-serif; }

  • INVISION
    @EXEMPLO escreveu: .spoiler dt { background-image: url(http://illiweb.com/bl/logo.png); background-repeat: no-repeat; background-position: bottom right;
    background-position: 2px 10px; color: #FF0000; color: 10pt; font-family Verdana, Geneva, sans-serif; }

  • PUNBB
    @EXEMPLO escreveu:.codebox dt { background-image: url(http://illiweb.com/bl/logo.png); background-repeat: no-repeat; background-position: bottom right;
    background-position: 2px 10px; color: #FF0000; color: 10pt; font-family Verdana, Geneva, sans-serif; }



©
Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Personalização de cores do Spoiler

Cordialmente. Piscada
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Como alterar o estilo do spoiler no meu fórum

Mensagem por Kakenho em 27/03/12, 03:52 pm

Cara.. Aqui não adiantou nada :S
Ficou a mesma coisa de antes.. Vê se coloquei certo o códido:

.spoiler_content { background-color: #F5F5F5; color: #5E6B87; color:#000000; 10pt; font-family Arial; }

PS: Minha versão é a PhpBB3
avatar

Kakenho
Nível 3

Masculino
Inscrito dia : 16/02/2012
Mensagens : 21
Pontos Ativos : 37

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

Resolvido Re: Como alterar o estilo do spoiler no meu fórum

Mensagem por MateusV. em 27/03/12, 03:55 pm

Olá, substitua o codigo por este
.spoiler_content {
background-color: #F5F5F5;
color: #5E6B87;
font-family Arial;
}

Melhores cumprimentos. Piscada
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Como alterar o estilo do spoiler no meu fórum

Mensagem por Kakenho em 27/03/12, 06:15 pm

Cara.. não deu jeito :S
eu queria que ele ficasse assim.. Meio arredondado e sem a linha preta que tem nele .. Se tiver duvidas do que eu to falando da uma olhada no desse fórum: http://forum.perola-do-transformice.com/t634p15-aeeee-porradaaaa#14882

Tem vários spoilers nesse tópico .. Eu queria que ficasse parecido com esse (não muito parecido mas que de pra ficar melhor do que esse tradicional)
avatar

Kakenho
Nível 3

Masculino
Inscrito dia : 16/02/2012
Mensagens : 21
Pontos Ativos : 37

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

Resolvido Re: Como alterar o estilo do spoiler no meu fórum

Mensagem por Kakenho em 28/03/12, 01:52 pm

UP '-'
avatar

Kakenho
Nível 3

Masculino
Inscrito dia : 16/02/2012
Mensagens : 21
Pontos Ativos : 37

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

Resolvido Re: Como alterar o estilo do spoiler no meu fórum

Mensagem por MateusV. em 28/03/12, 04:12 pm

Olá, não vi spoilers no topico em questão, poderia ser mais especifico de como deseja?

Cordialmente. Piscada
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Como alterar o estilo do spoiler no meu fórum

Mensagem por Kakenho em 28/03/12, 04:20 pm

Pode deixar já resolvi =D
Mas obrigado por tentar ajudar ^^
avatar

Kakenho
Nível 3

Masculino
Inscrito dia : 16/02/2012
Mensagens : 21
Pontos Ativos : 37

Ver perfil do usuário http://peroleirosdesign.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