Entrar
Os membros mais ativos do mês
Nenhum usuário |
Quem está conectado?
Há 2 usuários online :: 0 registrados, 0 invisíveis e 2 visitantes :: 1 motor de buscaNenhum
[ Ver toda a lista ]
O recorde de usuários online foi de 23 em Seg Jun 08, 2020 3:43 am
Últimos assuntos
[TUTORIAL] Personalização de cores do Spoiler
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts CSS
Página 1 de 1
[TUTORIAL] Personalização de cores do Spoiler
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | 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
Personalização de cores do Spoiler
1º - 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)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
2º - 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([Tens de ter uma conta e sessão iniciada para poderes visualizar este link]); - 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).
Atenção pois quando é utilizado palavras deve a primeiras variar entre top/center/bottom e a segunda entre left/center/right.EXEMPLO escreveu:background-position: bottom right;
background-position: 2px 10px; - 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:
|
3º- 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 } |
4º - 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.
- PHPBB3EXEMPLO escreveu:.spoiler_content { background-color: #FF0000; color: #FF0000; color: 10pt; font-family Verdana, Geneva, sans-serif; }
- PHPBB2EXEMPLO escreveu:.spoiler_content { background-image: url(https://2img.net/i/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; } - INVISIONEXEMPLO escreveu: .spoiler dt { background-image: url(https://2img.net/i/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; } - PUNBBEXEMPLO escreveu:.codebox dt { background-image: url(https://2img.net/i/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
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 |
Tópicos semelhantes
» [Tutorial] Explodir presente no habbo [Tutorial}
» [TUTORIAL] Legenda elegante
» [TUTORIAL] Logo aleatório
» [TUTORIAL] Enfeites de natal
» [TUTORIAL] O que são bots e sua finalidade
» [TUTORIAL] Legenda elegante
» [TUTORIAL] Logo aleatório
» [TUTORIAL] Enfeites de natal
» [TUTORIAL] O que são bots e sua finalidade
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts CSS
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Dom Jun 24, 2012 11:15 am por Alisson Silva
» [Re-Apresentação] Fábio
Sex maio 25, 2012 4:45 pm por Fábio
» PixelZIP ~ design&programção em só lugar
Sex maio 25, 2012 4:44 pm por Fábio
» Pedido de logo
Dom maio 20, 2012 10:06 am por Alisson Silva
» Kernel - Apresentação
Sáb maio 19, 2012 9:49 am por Alisson Silva
» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sáb maio 19, 2012 9:48 am por Alisson Silva
» HEBBO HOTEL 24 HORAS ONLINE !!
Sex maio 04, 2012 7:20 pm por Alisson Silva
» Pedido de Layout
Sex maio 04, 2012 5:23 pm por Fonsecca
» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry
» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry