Acesso rápido
Últimos assuntos
REVOLUTIONSáb 26 Mar 2022 - 20:37hoanglongnhatbao
bl4{theme}Sáb 26 Mar 2022 - 9:50hoanglongnhatbao
Apresente-se no fórum dos temasQui 8 Set 2016 - 12:22Admin
Os temas do Fórum dos Temas agora são grátis!Dom 29 maio 2016 - 16:35ʂօpεɾ ოօʂმ3εძ
Quem você admira no forum dos temas?Ter 3 maio 2016 - 11:01Kae Lanzellotte
Esporte VerdeSex 11 Dez 2015 - 14:43Shek Crowley
Tema Facebook 2014Sáb 28 Nov 2015 - 11:07Admin
Qual tema usado nesses forum's ?Seg 29 Jun 2015 - 18:07Louro_Jose
Atualização do FDTTer 26 maio 2015 - 10:10Neimasinho
TEMASEIROS


Setembro/2010

Parceiros
Fórum dos Temas

Ir para baixo
SantolaZ
SantolaZ
Membro Iniciante

Mensagens : 46
Reputação : 4
Data de inscrição : 21/07/2010
http://www.sitiomarado.forumeiros.com

Personalizar o fundo do quote Empty Personalizar o fundo do quote

Qui 22 Jul 2010 - 6:30
Personalizar o fundo do quote Magic Efeitos CSS

Às vezes gostaríamos de adicionar algum efeito com imagens, cores ou bordas para assim personalizar a aparência do quote, neste tutorial irá ver com quais códigos irá se utilizar para obter o efeito desejado.



--> Tutoriais, dicas e Astúcia <--
Personalizar o fundo do quote



- Teremos de aceder à "Folha de estilo CSS":
Para que possamos personalizar as caixas de texto do Fórum, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder a:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
(clique na imagem para aumentar)
Personalizar o fundo do quote 1114


Personalizar o fundo do quote Act_bottom Segue a tua versão, pois cada versão tem um código diferente. referimos-nos ás versões: PhpBB 2, PhpBB 3, PunBB e Invision.




- Ter uma noção de CSS me relação ás imagens:
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 a nossa caixa de texto:

  • 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(https://2img.net/i/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;




- Agora deverão copiar o código correspondere à versão:
Tendo em conta a versão, e como as classes variam consoante estas, deverse-à escolher a que se adequa ao Fórum onde será aplicada:

Personalizar o fundo do quote Versio11 PhpBB 2
.quote {
propriedades
}


Personalizar o fundo do quote Versio12 PhpBB 3
blockquote {
propriedades
}



Personalizar o fundo do quote Versio15 PunBB
.postmain blockquote {
propriedades
}


Personalizar o fundo do quote Versio14 Invision
blockquote cite {
propriedades
}

/!\ É recomendavel que para a versão invision utilize propriedades de background-image, somente background-color não daria um efeito bem desejado

- Vejamos um exemplo:
Neste exemplo que é usado no FdF, iremos personalizar a caixa de quote num Fórum com versão PhpBB 3.

Código:
blockquote {
border-color: #8EBBDF;
background-color: #D2E4F2;
}
Resultado:
(clique na imagem para aumentar)
Personalizar o fundo do quote Xxx10





© Fórum dos Foruns



Personalizar o fundo do quote Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Personalizar o fundo do quote
Ir para o topo
Permissões neste sub-fórum
Não podes responder a tópicos