Wikipédia:Centro de edição de página de usuário/Estilo

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

Cabeçalho título alternativo página editar

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:

  1. Primeiro, crie uma subpágina de usuário intitulado "Usuário:ExemploUsuário / Cabeçalho"
  2. 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 ")
  3. 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

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!
Página de Usuário · Discussão · Paredão · Awards · Contribuições · Edit count·Livro de Assinaturas

Mairéad Ní Mhaonaigh (Gweedore, Condado de Donegal, 26 de julho de 1962) é uma irlandesa vocalista da banda folk irlandesa Altan.[1]|}


O formato acima é melhor usado para páginas curtas, já que imita uma moldura. Ele trabalha bem com imagens, prêmios, etc.
width=75% valign="top" style="-moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.75);; padding-right: 15px; background:#fffff6; border: 0;"





O que acha dessa borda?


Coloque seu navegador aqui

Oi Galera
   

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

TEXT TEXT To customize, change the border colors. TEXT TEXT

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

E ai?
   

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

Curvas redondas editar

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

Ver artigo principal: Web colors

Mudar a cor da página com CSS editar

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

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

Aqui está um exemplo de como esconder e mostrar secções:

Caixas editar

  • Para fazer uma caixa, faça o seguinte:
  1. Coloque <div style="background-color:COR QUE VOCE QUER;"> antes do texto
  2. Digite o texto
  3. 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:
Sua Alteza Real

Bordas em curva editar

  • 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
  Oi, eu sou o Willy e passei por aqui.  

Formatando o Texto editar

Aqui estão algumas dicas de como formatar o seu texto:

Alinar no centro editar

  • Para centralizer seu texto, use:
  1. Entr e<div style="TEXT-align: center;">
  2. Então coloque seu texto
  3. 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

  • Para riscar seu texto, use:
  1. Coloque <s> antes do texto.
  2. Muito Doidão
  3. 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

  • Para inserir um sobre-escrito, use:
  1. Coloque um <sup> antes do texto.
  2. Coloque o TEXTO
  3. 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

  • Para inserir, use o código:
  1. Coloque um <sub> antes do texto.
  2. Coloque o TEXTO
  3. 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

  • Para inserir um comentário Escondido, use o código a seguir:
  1. Coloque um <!-- antes do texto.
  2. Coloque o TEXTO
  3. 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

  • Para inserir uma linha secundária, use o código a seguir:
  1. Coloque um == antes do texto.
  2. Coloque o TEXTO
  3. Coloque um == após o TEXTO.
  • No final, seu código deve ficar assim:

==O Rei Está Morto. Viva o Rei!==

Tab editar

  • Para inserir uma tab, use o código a seguir:
  1. 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

  • Para mudar a cor do texto, use o código a seguir:
  1. Coloque um <span style="color: ColorName"> antes do texto.
  2. Escolha a cor
  3. Coloque o TEXTO
  4. 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:
  1. Coloque um <font color="ColorName"> antes do texto.
  2. Escolha a cor
  3. Coloque o TEXTO
  4. 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

  • Para mudar o cursor do mouse quando passer pelo texto, faça o seguinte:
  1. Coloque um <span style="cursor:CURSOR QUE VOCÊ QUER;"> antes do texto.
  2. Escolha o cursor, (ex. crosshair, default)
  3. Coloque o TEXTO
  4. 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

  • Para fazer ligações externas parecerem internas, faça:
  1. Coloque um <span class="plainlinks"><font color="002bb8"> antes do texto.
  2. Coloque a ligação externa
  3. 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:

Ligação externa

Tamanho da letra editar

  • Para aumentar o tamanho da letra, use o código a seguir:
  1. Coloque um <font size="10"> antes do texto.
  2. Escolha o tamanho
  3. Coloque o TEXTO
  4. 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

  • Para alterar a família da fonte, use os códigos abaixo:
  1. <span style="font-family: (fonte desejada); font-size: 12pt">
  2. Coloque a fonte que você quer
  3. Diretamente após o código, coloque seu texto
  4. 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

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

Imagens, com os diretos devidos, podem ser colocadas em sua página.

Inserindo uma imagem editar


[[Imagem:Cscr-featured.png]]

Isso coloca a imagem abaixo.


[[Imagem:Cscr-featured.png|Star]]

Toda imagem deve ter uma breve descrição do texto.

Estrela


[[:Image:Cscr-featured.png]]

Adicionar dois pontos para criar um link de imagem antes de uma imagem

Image:Cscr-featured.png

Alinhamento à esquerda editar


[[Imagem:Cscr-featured.png|left]]

Isso alinha a imagem à esquerda.

Alinhamento à direita editar


[[Imagem:Cscr-featured.png|right]]

Isso alinha a imagem à direita.

Alinhamento centralizado editar


[[Imagem:Cscr-featured.png|center]]

Isso alinha a imagem no centro.

Emoldurar editar

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

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

Para mudar o tamaho de uma imagem:


[[Imagem:Cscr-featured.png|80px]]

Galerias editar

Para fazer uma galleria de imagens:


<gallery>

Image:Bob.png|Caption

Image:Cscr-featured.png|Caption

</gallery>

Criando sua Assinatura editar

Assinatura editar

As Pessoas Gostam de Coisas Bonitas

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

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

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:

Usuário Teste

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:

Usuário Teste 'Discussão'

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

A seguir algumas assinaturas interessantes que podem servir de modelo para criação de outras.

Emoticons editar

Ver também editar

Guia de Edição
Página de Usuário
Como usar imagens