Wikipédia:Centro de edição de página de usuário/Estilo
Esta página é um ensaio. Ensaios são conselhos ou opiniões de um ou mais contribuidores da Wikipédia. Ensaios não são políticas, recomendações e nem informativos. Alguns ensaios representam práticas já bem difundidas na comunidade; outros apenas representam pontos de vista minoritários. |
A acessibilidade desta página foi questionada. |
Essa página possui informações técnicas aos wikipedistas que desejam criar suas páginas de usuário.
Para início, caso você não saiba, a wikipédia usa a plataforma wiki, que é um tipo de liguagem de informática para construção de conteúdo. Outrossim, o projeto usa em muito a linguagem HTML. Você não é preciso ser um hacker no assunto, mas é sempre bom saber alguma coisinha. Com o passar de suas edições você acaba aprendendo sozinho, mas por enquanto você deve conhecer algumas palavrinhas mágicas.
Não é muito complicado, e se você tiver duvida, é só dar uma pesquisada no google para saber mais sobre comandos HTML.
Elementos de formatação[editar código-fonte]
Cabeçalho título alternativo página[editar código-fonte]
Nota: Este método é um hack que não funciona com todas as aparências da Wikipédia. Por exemplo, os usuários da do skin clássico terá os links no topo da página cobertos pelo título.
Titulos de cabeçalhos são topos encobertos no início de uma página. O cabeçalho do título padrão tem o nome da página em grandes letras em negrito. Se você não gosta do padrão, siga as instruções abaixo:
- Primeiro, crie uma subpágina de usuário intitulado "Usuário:ExemploUsuário / Cabeçalho"
- Em seguida, copie o código a seguir na subpágina e altere as partes que você pode mudar (por exemplo, a parte que diz "TEXTO ")
- Coloque o conteúdo na sua Página de Usuário.
Código de exemplo:
{| style="position:absolute; top:0; width:100%; background:#CCCCFF; color:#000000;" valign="middle" |- |[[Imagem:OPTIONAL IMAGE.jpg|38px]] <h1 style="margin:0; border-bottom:0; color:COLOR OF TEXT;"> O TEXTO QUE VOCÊ QUER |}
Bordas[editar código-fonte]
Bordas melhoram a aparência da página e a deixam mais atrativa.
Os exemplos abaixo incluem códigos de fechamento, que pode tornar difícil usá-los em páginas de discussão. Para ter as bordas e fundos estender até o final da página Independentemente do que for adicionado, simplesmente deixe de fora os códigos de fechamento (</div>, </tr>, </td>, |}) no final dos exemplos de marcação de borda.
Exemplos de bordas:
Deus Salve a Rainha!
| |||||
---|---|---|---|---|---|
Mairéad Ní Mhaonaigh (Gweedore, Condado de Donegal, 26 de julho de 1962) é uma irlandesa vocalista da banda folk irlandesa Altan.[1]|}
| |||||
|
Curvas redondas[editar código-fonte]
A partir de novembro de 2008, serão exibidas curvas redondas apenas no Mozilla Firefox, Apple Safari e Google Chrome. Após junho de 2011, elas serão exibidas no Internet Explorer 9
Para adicionar curvas redondas em uma caixa ou moldura, inclua {{Round corners}}
;predefinição (como mostrado, incluindo ponto e vírgula) como um parâmetro de estilo. Note-se que o elemento a ser uma curva redonda deve ter uma borda, em primeiro lugar. Aqui está um exemplo de marcação:
<div style="border:1px solid #5599FF; {{Round corners}}; margin: 5px;"> Rainha Isabel II do Reino Unido da Grã-Bretanha e Irlanda do Norte </div>
Rainha Isabel II do Reino Unido da Grã-Bretanha e Irlanda do Norte
Para ver o código específico para criar bordas redondas, veja Predefinição:Round corners.
Para um exemplo legal de como usar bordas redondas, veja na página do usuário da wikipédia anglófona Zeerus.
Esse é jeito mulherzinha de fazer.
Aqui a forma masculina: -moz-border-radius:Xpx, onde X é o número de pixel da curva.
Cor[editar código-fonte]
Tripleto hexadecimal | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Preto | Cinza | Prata | Branco | Vermelho | Bordô | Púrpura | Magenta | Verde | Lima | Verde-oliva | Amarelo | Azul | Naval | Verde-azulado | Ciano | ||
Mudar a cor da página com CSS[editar código-fonte]
Para alterar a cor da sua página de usuário, basta usar o código a seguir torcando o texto indicado pelas cores desejadas:
{| | style="background:BACKGROUND COLOR; color:TEXTo COR" |
Indíce[editar código-fonte]
Para suprimir a tabela automática da caixa de conteúdo em sua página de usuário, coloque a seguinte linha na sua página:
__NOTOC__
Para que a tabela de índices à direita, coloque a seguinte linha do toc onde você quer que apareça:
{{TOCright}}
Mostrar/Esconder secções[editar código-fonte]
Aqui está um exemplo de como esconder e mostrar secções:
Caixas[editar código-fonte]
- Para fazer uma caixa, faça o seguinte:
- Coloque <div style="background-color:COR QUE VOCE QUER;"> antes do texto
- Digite o texto
- Coloque </div> após o texto
- No geral, o código deve ficar assim:
- <div style="background-color:yellow;">Hi</div>
- Qual terá a aparência:
Bordas em curva[editar código-fonte]
- Para fazer bordas curvas (só funcionam em navegadores baseados no Mozilla) adicione o seguinte código para o código descrito na seção anterior:
- -moz-border-radius:15px;
- Então, agora seu código deve ficar como <div style="background-color:DarkGoldenrod; -moz-border-radius:15px;">Hi</div>
- Que deve resultar em
Formatando o Texto[editar código-fonte]
Alinar no centro[editar código-fonte]
- Para centralizer seu texto, use:
- Entr e<div style="TEXT-align: center;">
- Então coloque seu texto
- Finalmente, coloque </div>
- Por final, seu texto deve ficar assim:
<div style="TEXT-align: center;"> Texto Centralizado </div>
- Tendo colocado o código, seu texto vai ficar assim:
Texto Centralizado
Riscar o texto[editar código-fonte]
- Para riscar seu texto, use:
- Coloque <s> antes do texto.
- Muito Doidão
- Coloque </s> no final do texto
- Tendo colocado o código, seu texto vai ficar assim:
<s>Muito Doidão</s>
- Tendo colocado o código, seu texto vai ficar assim:
Muito Doidão
Sobre-escrito[editar código-fonte]
- Para inserir um sobre-escrito, use:
- Coloque um <sup> antes do texto.
- Coloque o TEXTO
- Coloque um </sup> após o TEXTO.
- No final, seu código deve ficar assim:
Normal TEXT<sup>superscript TEXT</sup>
- Tendo colocado o código, seu texto vai ficar assim::
Texto Normal texto subre-escrito
Sub-escrito[editar código-fonte]
- Para inserir, use o código:
- Coloque um <sub> antes do texto.
- Coloque o TEXTO
- Coloque um </sub> após o TEXTO.
- No final, seu código deve ficar assim:
TEXTO normal <sub>TEXTO sub-escrito </sub>
- Tendo colocado o código, seu texto vai ficar assim::
TEXTO normal TEXTO sub-escrito
Comentário escondido[editar código-fonte]
- Para inserir um comentário Escondido, use o código a seguir:
- Coloque um <!-- antes do texto.
- Coloque o TEXTO
- Coloque um --> após o TEXTO.
- No final, seu código deve ficar assim:
<!-- O Rei Está Morto. Viva o Rei!-->
- Você não vai por ver o texto nessa página, mas verá quando tentar editar a página ou a secção. Comentários escondidos são usados para avisos.<!—Nunca corra com tesouras -->
Linha secundária[editar código-fonte]
- Para inserir uma linha secundária, use o código a seguir:
- Coloque um == antes do texto.
- Coloque o TEXTO
- Coloque um == após o TEXTO.
- No final, seu código deve ficar assim:
==O Rei Está Morto. Viva o Rei!==
Tab[editar código-fonte]
- Para inserir uma tab, use o código a seguir:
- Coloque :: antes do texto.
- No final, seu código deve ficar assim:
::O Rei Está Morto. Viva o Rei!
- Tendo colocado o código, seu texto vai ficar assim::
- O Rei Está Morto. Viva o Rei!
Cor do texto[editar código-fonte]
- Para mudar a cor do texto, use o código a seguir:
- Coloque um <span style="color: ColorName"> antes do texto.
- Escolha a cor
- Coloque o TEXTO
- Coloque um </span> após o TEXTO.
- No final, seu código deve ficar assim:
<span style="color: red">O Rei Está Morto. Viva o Rei!</span>
- Tendo colocado o código, seu texto vai ficar assim::
O Rei Está Morto. Viva o Rei!
- Outro jeito de fazer isso:
- Coloque um <font color="ColorName"> antes do texto.
- Escolha a cor
- Coloque o TEXTO
- Coloque um </font> após o TEXTO.
- No final, seu código deve ficar assim:
<span style="color:red;">O Rei Está Morto. Viva o Rei!</span>
- Tendo colocado o código, seu texto vai ficar assim:
O Rei Está Morto. Viva o Rei!
Cursor do mouse[editar código-fonte]
- Para mudar o cursor do mouse quando passer pelo texto, faça o seguinte:
- Coloque um <span style="cursor:CURSOR QUE VOCÊ QUER;"> antes do texto.
- Escolha o cursor, (ex. crosshair, default)
- Coloque o TEXTO
- Coloque um </span> após o TEXTO.
- No final, seu código deve ficar assim:
<span style="cursor: crosshair;">O Rei Está Morto. Viva o Rei!</span>
- Uma vez que você colocar o texto, e passer o mouse por cima, o cursor irá mudar:
O Rei Está Morto. Viva o Rei!
Ligações[editar código-fonte]
- Para fazer ligações externas parecerem internas, faça:
- Coloque um <span class="plainlinks"><font color="002bb8"> antes do texto.
- Coloque a ligação externa
- Coloque um </font></span> após o TEXTO.
- No final, seu código deve ficar assim:
<span class="plainlinks"><span style="color:#002bb8;">[http://wikipedia.com external link]</span></span>
- Uma vez colocado o texto, sua ligação externa vai ficar assim:
Tamanho da letra[editar código-fonte]
- Para aumentar o tamanho da letra, use o código a seguir:
- Coloque um <font size="10"> antes do texto.
- Escolha o tamanho
- Coloque o TEXTO
- Coloque um </font> após o TEXTO.
- No final, seu código deve ficar assim:
<font size="4">O Rei Está Morto. Viva o Rei!</font>
- Tendo colocado o código, seu texto vai ficar assim::
O Rei Está Morto. Viva o Rei!
Famílias de fontes[editar código-fonte]
- Para alterar a família da fonte, use os códigos abaixo:
- <span style="font-family: (fonte desejada); font-size: 12pt">
- Coloque a fonte que você quer
- Diretamente após o código, coloque seu texto
- Coloque </span>após o TEXTO
Deverá ficar:
<span style="font-family: Monotype Corsiva; font-size: 12pt">O Rei Está Morto. Viva o Rei!</span>
Que ficará:
O Rei Está Morto. Viva o Rei!
Lista de fontes[editar código-fonte]
Nome da fonte: | Exemplo da fonte: |
Agency FB | The Quick Brown Fox Jumps Over The Lazy Dog |
Algerian | The Quick Brown Fox Jumps Over The Lazy Dog |
Andale Mono | The Quick Brown Fox Jumps Over The Lazy Dog |
Arial | The Quick Brown Fox Jumps Over The Lazy Dog |
Arial Black | The Quick Brown Fox Jumps Over The Lazy Dog |
Arial Narrow | The Quick Brown Fox Jumps Over The Lazy Dog |
Arial Rounded MT Bold | The Quick Brown Fox Jumps Over The Lazy Dog |
Baskerville Old Face | The Quick Brown Fox Jumps Over The Lazy Dog |
Batik Regular | The Quick Brown Fox Jumps Over The Lazy Dog |
Bauhaus 93 | The Quick Brown Fox Jumps Over The Lazy Dog |
Bell MT | The Quick Brown Fox Jumps Over The Lazy Dog |
Berlin Sans FB | The Quick Brown Fox Jumps Over The Lazy Dog |
Berlin Sans FB Demi | The Quick Brown Fox Jumps Over The Lazy Dog |
Bernard MT Condensed | The Quick Brown Fox Jumps Over The Lazy Dog |
Blackadder ITC | The Quick Brown Fox Jumps Over The Lazy Dog |
Bodoni MT | The Quick Brown Fox Jumps Over The Lazy Dog |
Bodoni MT Black | The Quick Brown Fox Jumps Over The Lazy Dog |
Bodoni MT Condensed | The Quick Brown Fox Jumps Over The Lazy Dog |
Bodoni MT Poster Compressed | The Quick Brown Fox Jumps Over The Lazy Dog |
Book Antiqua | The Quick Brown Fox Jumps Over The Lazy Dog |
Bookman Old Style | The Quick Brown Fox Jumps Over The Lazy Dog |
Bradley Hand ITC | The Quick Brown Fox Jumps Over The Lazy Dog |
Britannic Bold | The Quick Brown Fox Jumps Over The Lazy Dog |
Broadway | The Quick Brown Fox Jumps Over The Lazy Dog |
Brush Script MT | The Quick Brown Fox Jumps Over The Lazy Dog |
Calibri | The Quick Brown Fox Jumps Over The Lazy Dog |
Californian FB | The Quick Brown Fox Jumps Over The Lazy Dog |
Calisto MT | The Quick Brown Fox Jumps Over The Lazy Dog |
Cambria | The Quick Brown Fox Jumps Over The Lazy Dog |
Candara | The Quick Brown Fox Jumps Over The Lazy Dog |
Castellar | The Quick Brown Fox Jumps Over The Lazy Dog |
Centaur | The Quick Brown Fox Jumps Over The Lazy Dog |
Century Gothic | The Quick Brown Fox Jumps Over The Lazy Dog |
Century Schoolbook | The Quick Brown Fox Jumps Over The Lazy Dog |
Chiller | The Quick Brown Fox Jumps Over The Lazy Dog |
Colonna MT | The Quick Brown Fox Jumps Over The Lazy Dog |
Comic Sans MS | The Quick Brown Fox Jumps Over The Lazy Dog |
Consolas | The Quick Brown Fox Jumps Over The Lazy Dog |
Constantia | The Quick Brown Fox Jumps Over The Lazy Dog |
Cooper Black | The Quick Brown Fox Jumps Over The Lazy Dog |
Copperplate Gothic Bold | The Quick Brown Fox Jumps Over The Lazy Dog |
Copperplate Gothic Light | The Quick Brown Fox Jumps Over The Lazy Dog |
Corbel | The Quick Brown Fox Jumps Over The Lazy Dog |
Courier New | The Quick Brown Fox Jumps Over The Lazy Dog |
Curlz MT | The Quick Brown Fox Jumps Over The Lazy Dog |
Edwardian Script ITC | The Quick Brown Fox Jumps Over The Lazy Dog |
Elephant | The Quick Brown Fox Jumps Over The Lazy Dog |
Engravers MT | The Quick Brown Fox Jumps Over The Lazy Dog |
Eras Bold ITC | The Quick Brown Fox Jumps Over The Lazy Dog |
Eras Demi ITC | The Quick Brown Fox Jumps Over The Lazy Dog |
Eras Light ITC | The Quick Brown Fox Jumps Over The Lazy Dog |
Eras Medium ITC | The Quick Brown Fox Jumps Over The Lazy Dog |
Felix Titling | The Quick Brown Fox Jumps Over The Lazy Dog |
Footlight MT Light | The Quick Brown Fox Jumps Over The Lazy Dog |
Forte | The Quick Brown Fox Jumps Over The Lazy Dog |
Franklin Gothic Book | The Quick Brown Fox Jumps Over The Lazy Dog |
Franklin Gothic Demi | The Quick Brown Fox Jumps Over The Lazy Dog |
Franklin Gothic Heavy | The Quick Brown Fox Jumps Over The Lazy Dog |
Franklin Gothic Medium | The Quick Brown Fox Jumps Over The Lazy Dog |
Franklin Gothic Medium Cond | The Quick Brown Fox Jumps Over The Lazy Dog |
Freestyle Script | The Quick Brown Fox Jumps Over The Lazy Dog |
French Script MT | The Quick Brown Fox Jumps Over The Lazy Dog |
Garamond | The Quick Brown Fox Jumps Over The Lazy Dog |
Georgia | The Quick Brown Fox Jumps Over The Lazy Dog |
Gigi | The Quick Brown Fox Jumps Over The Lazy Dog |
Gill Sans MT | The Quick Brown Fox Jumps Over The Lazy Dog |
GulimChe | The Quick Brown Fox Jumps Over The Lazy Dog |
Impact | The Quick Brown Fox Jumps Over The Lazy Dog |
Kristen ITC | The Quick Brown Fox Jumps Over The Lazy Dog |
Lucida Console | The Quick Brown Fox Jumps Over The Lazy Dog |
Lucida Handwriting | The Quick Brown Fox Jumps Over The Lazy Dog |
MingLiU | The Quick Brown Fox Jumps Over The Lazy Dog |
Monotype Corsiva | The Quick Brown Fox Jumps Over The Lazy Dog |
MS Gothic | The Quick Brown Fox Jumps Over The Lazy Dog |
MS Hei | The Quick Brown Fox Jumps Over The Lazy Dog |
MS Song | The Quick Brown Fox Jumps Over The Lazy Dog |
Old English TEXT MT | The Quick Brown Fox Jumps Over The Lazy Dog |
Symbol | The Quick Brown Fox Jumps Over The Lazy Dog |
Tahoma | The Quick Brown Fox Jumps Over The Lazy Dog |
Times New Roman | The Quick Brown Fox Jumps Over The Lazy Dog |
Trebuchet MS | The Quick Brown Fox Jumps Over The Lazy Dog |
Verdana | The Quick Brown Fox Jumps Over The Lazy Dog |
Webdings | The Quick Brown Fox Jumps Over The Lazy Dog |
Wingdings | The Quick Brown Fox Jumps Over The Lazy Dog |
Wingdings 2 | The Quick Brown Fox Jumps Over The Lazy Dog |
Wingdings 3 | The Quick Brown Fox Jumps Over The Lazy Dog |
Formatando imagens[editar código-fonte]
Imagens, com os diretos devidos, podem ser colocadas em sua página.
Inserindo uma imagem[editar código-fonte]
[[Imagem:Cscr-featured.png]]
Isso coloca a imagem abaixo.
[[Imagem:Cscr-featured.png|Star]]
Toda imagem deve ter uma breve descrição do texto.
[[:Image:Cscr-featured.png]]
Adicionar dois pontos para criar um link de imagem antes de uma imagem
- Image:Cscr-featured.png
Alinhamento à esquerda[editar código-fonte]
[[Imagem:Cscr-featured.png|left]]
Isso alinha a imagem à esquerda.
Alinhamento à direita[editar código-fonte]
[[Imagem:Cscr-featured.png|right]]
Isso alinha a imagem à direita.
Alinhamento centralizado[editar código-fonte]
[[Imagem:Cscr-featured.png|center]]
Isso alinha a imagem no centro.
Emoldurar[editar código-fonte]
Enquadrar uma imagem irá automaticamente ajustar a imagem ao lado direito da tela e emoldurá-la. (Como um porta-retrato).
Para enquadrar uma imagem:
[[Imagem:Cscr-featured.png|frame]]
Parecerá assim:
NOTa: Isso forçará a imagem a aparecer em seu tamanho original.
Miniaturas[editar código-fonte]
Miniaturalizar uma imagem é parecido com a moldura, porque, mais uma vez, alinha automaticamente para a direita. O que é diferente é que agora que você tem espaço para escrever o texto abaixo e pode alterar o tamanho.(Como uma fotografia de uma câmera) .
Para Miniaturalizar uma figura:
[[Imagem:Cscr-featured.png|thumb]]
Ficará:
Fazendo imagens ficarem grandes e pequenas[editar código-fonte]
Para mudar o tamaho de uma imagem:
[[Imagem:Cscr-featured.png|80px]]
Galerias[editar código-fonte]
Para fazer uma galleria de imagens:
<gallery> Image:Bob.png|Caption Image:Cscr-featured.png|Caption </gallery>
-
Caption1
-
Caption2
Criando sua Assinatura[editar código-fonte]
Assinatura[editar código-fonte]
A primeira coisa que alguém deve fazer quando entrar na wikipédia com pensamento de manter-se contribuindo no projeto de maneira efetiva, é criando uma assinatura. Sua assinatura será o seu cartão de visita, e muitos usuários poderão identificar você através dela.
Personalizando[editar código-fonte]
Para experiências, peguemos a assinatura do usuário que usa um atalho automático, ou seja, que não possui nenhum tipo de código.
Como dizem as regras, a assinatura deve ter um link para Página de usuário e Discussão, conhecidos vulgarmente como PDU.
Usando um código simples, nós temos:
[[Usuário:Boboca|<span title="Frase (opcional)"><font face="Comic Sans MS" size="2" color="#000000">'''Boboca'''</font></span>]]
- ---------->Font face é o estilo da fonte, que você encontra no Word do Windows.
- ---------->Font color é a cor, que encontra na Tabela de cores.
- ---------->Size é o tamanho da fonte.
Criando[editar código-fonte]
Repare que esse código ao possui link para discussão, por isso ele não pode ser usado. De qualquer forma, substituindo a frase por Usuário Teste, ele ficaria assim:
Nota-se que a parte "Frase (opcional)" foi substituída por “Fausto”. Quando um usuário passar o mouse por cima, ele verá Fausto. Caso você retire a frase, aparecerá o nome da página do usuário.
Caso você não goste da cor, você pode alterá-la usando a Tabela de cores ou Lista de cores.
Nas cores, escreva <font color="#008000">
ou <font color="green">
correspodente aquela que você deseja.
>Você também pode adicionar outros comandos dentro da assinatura. Lembrando que esses comandos devem ficar no começo e no final da parte que você quer usar-los. A Barra (/) é usada em toda Wikipédia para fechar os comandos.
- <b>negrito</b>
- <i>itálico</i>
- <u>sublinhado<u>
- <sub>subscrito</sub>
- <sup>sobrescrito</sup>
- <strike>
risco</strike>
Usando um código maior e diferente, podemos inserir o link da discussão que ainda falta.
[[Usuário: Usuário Teste|<span title="Corujal"><font face="Bookman Old Style" size="2" color="#ee82ee">'''Usuário Teste''' </font></span>]]<sup>[[Usuário Discussão: Usuário Teste|<span title="Discussão"><font face="Bookman Old Style" size="2" color="Black">''''''Discussão''''''</font></span>]]
- Fica:
Repare que a assinatura está acima da linha do link de discussão. Caso você queira mudar, é só colocar um dos códigos para mudar. No caso, usando o “sub”, o link fica acima.
[[Usuário: Usuário Teste|<span title="Corujal"><font face="Bookman Old Style" size="2" color="#000000">'''Fausto''' </font></span>]]<sup>[[Usuário Discussão: Usuário Teste|<span title="Discussão"><font face="Bookman Old Style" size="2" color="Black"><sub>''''''Discussão''''''</sub></font></span>]]
Caso você queira, você pode colocar duas cores no nome da assinatura usando um código de assinaturas diferente:
[[Usuário: Usuário Teste|<span style="font-size:13px; color:orchid;font-family:Bookman Old Style;">Go</span> <span style="font-size:13px;color:lavander;font-family:Bookman Old Style;">EThe</span>]][[Usuário Discussão: Usuário Teste|<span title="Discussão" span style="font-size:15px; color:SeaGreen ;font-family:Arial;text-shadow:deeppink 13px 3px 10px;"><sup>'''''Alô?'''''</sup></span>]]
Repare que os nomes “Lavander” e outros são as cores. Eles podem ser usado no lugar dos códigos numéricos.
Após criar sua assinatura, vá em "Preferências", e na secção de assinatura coloque: “{{SUBST:Usuário:Seu nome/Assinatura}}” No exemplo dado, “{{SUBST:Usuário: Usuário Teste /Assinatura}}”
Lista de assinaturas[editar código-fonte]
A seguir algumas assinaturas interessantes que podem servir de modelo para criação de outras.
|
Emoticons[editar código-fonte]
|
|
|
Ver também[editar código-fonte]
Guia de Edição |
Página de Usuário |
Como usar imagens |