Personalizar o fundo da tag CODE

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

--> Galeria de CSS <--
Personalizar o fundo da tag CODE

1º - 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

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.
2º - 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 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;

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

.code {
Propiedades
}

PhpBB 3

.codebox {
Propiedades
}

PunBB

.code {
Propiedades
}

---

© Fórum dos temas

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Personalizar o fundo da tag CODE

Código:

[center][table style='margin:auto;']
[tr]
[td]
[img]http://2img.net/i/fa/admin/icones/theme.png[/img]  [/td][td]
[size=24][color=#86b125]Personalizar o fundo da tag CODE[/color][/size][/td]
[/tr]
[/table][/center]

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


[b][center][color=#3366FF][size=16]--> Galeria de CSS <--[/size][/color]
[size=16][color=red] Personalizar o fundo da tag CODE [/color][/size][/center][/b]


[b][size=18]1º [/size][color=darkblue]-  Teremos de aceder à "Folha de estilo CSS":[/color][/b]
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:
[b]Painel de Controle[/b] [color=darkred]->[/color] [b]Visualização[/b] [color=darkred]->[/color] [b]Imagens e cores [/b][color=darkred]->[/color] [b]Cores[/b] [color=darkred]->[/color] [b]Folha de estilo CSS[/b]
[center][img]http://i71.servimg.com/u/f71/11/61/24/05/1114.gif[/img][/center]

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.
[size=18][b]2º[/b][/size] [color=darkblue][b]- Ter uma noção de CSS me relação ás imagens:[/b][/color]
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 código:
[list][*][b]background-color:[/b][/list]Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor, existe outros tipos, mas para não complicar, analisaremos desta forma.
[quote="EXEMPLO"]background-color: #[color=red]FF0000[/color];[/quote]
[b][list][*]background-image:[/list][/b]:Esta propriedade, é das principais, pois ela permitirá adicionar a imagem pretendida para que se possa ter uma imagem de fundo.
[quote="EXEMPLO"]background-image: url(http://2img.net/i/bl/logo.png);[/quote]
[b][list][*]background-repeat:[/list][/b]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).
[quote="EXEMPLO"]background-repeat: [color=red]no-repeat[/color];[/quote]
[b][list][*]background-attachment:[/list][/b]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.
[quote="EXEMPLO"]background-attachment: [color=red]scroll[/color];[/quote]
[b][list][*]background-position:[/list][/b]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).
[quote="EXEMPLO"]background-position: [color=red]bottom right[/color];
background-position: [color=red]2[/color]px [color=red]10[/color]px;[/quote]
Atenção pois quando é utilizado palavras deve a primeiras variar entre top/center/bottom e a segunda entre left/center/right.
[b][list][*]color:[/list][/b]Poderá definir a cor da letra do campo de texto. Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor,
[quote="EXEMPLO"]color: #[color=red]FF0000[/color];[/quote]
[b][list][*]font-size:[/list][/b]Caso queira um tamanho de letra diferente. Nesta propriedade apenas teremos de adicionar o tamanho da letra, podendo ser em várias medias,
[quote="EXEMPLO"]color: [color=red]10pt[/color];[/quote]
[b][list][*]font-family:[/list][/b]
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,
[quote="EXEMPLO"]font-family [color=red]Verdana, Geneva, sans-serif[/color];[/quote]

[size=18][b]3º[/b][/size][color=darkblue][b]- Agora deverão copiar o código correspondere à versão:[/b][/color]
[img]http://i76.servimg.com/u/f76/11/66/91/15/versio11.gif[/img]     [size=18][color=#00a5cd]PhpBB 2[/color][/size]
[quote].code {
[color=red][i]Propiedades[/i][/color]
}[/quote]

[img]http://i76.servimg.com/u/f76/11/66/91/15/versio12.gif[/img]     [size=18][color=#00a5cd]PhpBB 3[/color][/size]
[quote].codebox {
[color=red][i]Propiedades[/i][/color]
}
[/quote]
[img]http://i76.servimg.com/u/f76/11/66/91/15/versio15.gif[/img]     [size=18][color=#00a5cd]PunBB[/color][/size]
[quote].code {
[color=red][i]Propiedades[/i][/color]
}[/quote]


[hr]
[size=18][center]© Fórum dos temas[/center][/size]

[table][tr][td][img]http://www.forumeiros.com/i/img/act_bottom.png[/img] [/td][td]Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[b][Dúvida] Personalizar o fundo da tag CODE [/b][/td][/tr][/table]