Personalizar o fundo da baliza código

As vezes gostaríamos de adicionar algum efeito com imagens, cores ou bordas para assim personalizar a aparência da baliza BBCode código. Neste tutorial irá ver com quais códigos irá se utilizar para obter o efeito desejado, para qualquer que seja a versão em questão.

--> Tutoriais, dicas e astúcias <--
Personalizar o fundo da baliza código

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 administrativo -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS



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

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;

3º- Agora deverão copiar o código correspondere à versão:

[table class=table1][tr][td class=row3 colspan=2]PhpBB 2[/td][/tr][tr][td]Campo do código[/td][td].code { propriedades }[/td][/tr][tr][td class=row3 colspan=2]PhpBB 3[/td][/tr][tr][td]Caixa toda[/td][td].codebox { propriedades }[/td][/tr][tr][td]Texto "código"[/td][td].codebox dt { propriedades }[/td][/tr][tr][td]Código[/td][td].codebox dd { propriedades }[/td][/tr][tr][td class=row3 colspan=2]PunBB[/td][/tr][tr][td]Caixa toda[/td][td].codebox { propriedades }[/td][/tr][tr][td]Texto "código"[/td][td].codebox dt { propriedades }[/td][/tr][tr][td]Código[/td][td].codebox dd { propriedades }[/td][/tr][tr][td class=row3 colspan=2]Invision[/td][/tr][tr][td]Caixa toda[/td][td].codebox { propriedades }[/td][/tr][tr][td]Texto "código"[/td][td].codebox dt { propriedades }[/td][/tr][tr][td]Código[/td][td].codebox dd { propriedades }[/td][/tr][/table]


4º - Exemplo de código para alterar a cor na versão phpBB 3:

Código:

.codebox dd {
color: red;
}

CÓDIGO:

Código de exemplo

---

:copyright: Fórum dos Fóruns & TopDestiny

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Personalizar o fundo da baliza código