Wikipédia:Software/CSS

	Outros projetos Wikimedia também contêm material sobre este tema:
	Meta-Wiki

Se for um usuário registado, poderá personalizar aparência da Wikipédia através de Cascading Style Sheets (CSS). A Wikipédia possui definições CSS para todos os usuários (registados ou não) na página MediaWiki:Common.css, e para os usuários registados que tenham nas preferências a aparência pré-definida Monobook na página MediaWiki:Monobook.css. Estas duas páginas só podem ser editadas por administradores por afectarem todos os usuários. Caso queira ter as suas próprias definições de Cascading Style Sheets, poderá colocá-las na sua página pessoal, editável apenas por si e por administradores, que se encontra em Usuário:Nome_do_usuário/monobook.css no qual "Nome_do_usuário" deve corresponder ao nome da sua conta. Para visualizar a sua página CSS pode clicar na seguinte ligação: Especial:Mypage/monobook.css Note que, esta página refere-se a página de CSS no estilo pré-definido monobook. Caso tenha definido nas suas preferências outra aparência, deve colocar na página respectiva. Por exemplo, se escolher nas preferências a aparência "nostalgia", a sua página CSS corresponderá a Usuário:Nome_do_usuário/nostalgia.css

Geral[editar código-fonte]

Nota: Na configuração padrão, qualquer código estilo de usuário será ignorado. Para ativar o estilo de usuário, as seguintes composições têm que ser habilitadas através do LocalSettings.php:

$wgAllowUserJs  = true;
$wgAllowUserCss = true;

Para cada estilo definido pelo usuário, um skin é selecionado, junto com o CSS correspondente. O usuário pode fazer diversas mudanças em cada skin. O CSS é especificado com referência nos seletores [1]: Elementos HTML, classes e indentificações especificadas no código HTML. Portanto, as possibilidades de modificação de cada skin podem ser vistas olhando o código HTML de cada página, em particular observando estas classes e identificações: quanto mais, maior a versatilidade da página.

Os padrões de todos os skins estão em MediaWiki:Common.css. Outras páginas CSS estão separadas por skin. Por exemplo, na Wikipédia anglófona, os padrões estão em:

e no Meta nós temos:

e na Wikipédia lusófona nós temos:

Os arquivos nos diretórios de estilo são para um determinado skin, provavelmente o mesmo em cada projeto. O nome do diretório de estilo está determinado na instalação, veja meta:LocalSettings.php#Stylesheet Location.

No skin monobook, você pode agora alterar qualquer aspecto do UI especificado em https://en.wikipedia.org/style/monobook/main.css e MediaWiki:Monobook.css ou similar usando seu próprio JavaScript ou CSS. As mudanças estão em subpáginas da sua página de usuário, chamadas monobook.css e monobook.js.

Além disso você pode alterar o skin clássico; suas subpáginas dever ser nomeadas Usuário:usuário/ standard.css e Usuário:usuário/ standard.js (similares para outros skins).

Adicione alguns css/js em sua subpágina. O preview funciona aqui de forma diferente: ele possibilita a observação das margens das páginas (não o conteúdo) com base nas informações de estilo de dentro da página, provindo que aquele skin usado seja o skin pelo qual as configurações são aplicadas. Mas existem limitações. Um preview possibilita ver as alterações, mas estas variam nas páginas que você deseja ver. Depois de salvar, enquanto as configurações são carregadas, faça um recarregamento (shift-reload/ctrl+F5) para conseguir as alterações.

O código HTML contêm linhas como:

 <script type="text/javascript"
 src="/w/wiki.phtml?title=User:''username''/standard.js&amp;action=raw&amp;ctype=text/javascript">
 </script>
 @import "/style/wikistandard.css";
 @import "/w/wiki.phtml?title=User:''username''/standard.css&action=raw&ctype=text/css";

no CSS do projeto para determinado skin e no JS/CSS pessoal para um skin específico.

Para o MySkin não há um css principal aplicável. O css aplicável é pessoal e deve ser localizado em Usuário:usuário/ myskin.css.

CSS[editar código-fonte]

CSS em subpáginas versus CSS em um arquivo local[editar código-fonte]

Em adição ao escrito acima, ou alternativamente, ao CSS local, o css/js pode ser ajustado no browser. Se você usa múltiplos browsers, cada um pode ser ajustado com um diferente CSS. Cada um aplica a configuração na web, não somente no projeto MediaWiki (deste modo o CSS está ativado mesmo se você não estar logado). De qualquer modo, a preferência somente afetará webpages que usam o mesmo nome de classe; uma preferência no seletor a.extiw afeta menos páginas do que um h2.

Muitos computadores, geralmente públicos, não permitem que os usuários ajustem as preferências no browser. Neste caso, as subpáginas alteram o estilo sempre que o usuário logar.

Quando o browser está ajustado para ignorar a o tamanho da fonte especificado pela webpage ou pelo CSS externo, os comandos do CSS redefinem o tamanho da fonte de acordo com o definido.

Seletores CSS[editar código-fonte]

The CSS selectors, expressed in terms of elements, classes and id's, relevant for the style of the page body include the following. As far as possible, examples are given, which show the result for the current style settings:

Os seletores CSS, expressos em termos de elementos, classes e identificações, são relevantes para o estilo do corpo da página. Exemplos estão dispostos, enquanto mostram o resultado do estilo nas preferências atuais:

:link - links - exemplo: meta:help:index
:link:link
:link:visited
:link#contentTop
:link.external - http://example
:link.extiw – interwiki no corpo da página - exemplo
:link.image – link de imagem no tamaho normal para descrição da imagem
:link.internal – link para o próprio artigo (Media:), e liks para o thumbnail e ícone de lupa para a página de descrição da imagem (a cor e o tamanho da fonte são especificados pelo a.internal e somente aplicados no primeiro caso)
:link.new exemplo
body.ns-0, ..., body.ns-15 (namespaces)
div#bodyContent
div#column-content
div#editsection
div#globalWrapper
div#tocindent
div.tocline
h1.firstHeading
h2
h3
img.tex TeX image
small - example
table.toc

Links internos normais não estão na classe interna (eles são usados, e permanecem em sites que utilizam uma versão antiga do software - [2]); eles podem ser personalizados sendo referidos no :link e :link:visited, em geral, depois de serem alterados no :link.extiw etc., que pode conseguir exceções no estilo geral para os links.

Para links interlínguas:

#p-lang a

Pode variar também no estilo dependendo de valor de um atributo com os seletores:

:link[title ="User:username"]
:link[title ="pagename"]
:link[href ="full url "]

para código-cor ou destque de determinados usuários (incluindo si próprio) e/ou links para páginas particulares (como o negrito nas páginas vigiadas das Mudanças Recentes). Este trabalha no Opera, mas não no IE. Veja também Help:Watching pages#CSS.

Os artigos vigiados e Mudanças Recentes usam duas classes:

autocomment
example
new (see below)

O histórico da página tem classes que comentam automaticamente e:

user
minor

Deste modo a fonte especificada para usuário aplica o histórico da página, mas não nos artigos vigiados ou Mudanças Recentes.

Editando páginas[editar código-fonte]

Edit box: textarea#wpTextbox1

example1

Edit summary box: input#wpSummary

example2

Principais blocos de estilo[editar código-fonte]

column-content - todo o espaço dentro das margens que tem conteúdo existe
content - a cor de fundo branca, mais a caixa margeada fina que contém o conteúdo da página principal.
firstHeading - a classe da tag inicial existente no topo de cada página
bodyContent - o conteúdo da página principal dentro da caixa de conteúdo
contentSub - o nome do wiki imediatamente embaixo do cabeçalho inicial, mas acima do corpo de texto

A classe portlet no estilo usado por todos os blocos div ao redor do conteúdo principal. Identificados blocos usando esta classe:

p-cactions - identficação da lista debas acima do conteúdo principal
p-personal - identificação da lista de links que inclui a página de login/logout no topo da página
p-logo - identificação do bloco que contém o logo (na esquerda superior)
p-navigation - identificação do bloco que contém os links de navegação na esquerda da página
p-search - o bloco que contém os botões de busca
p-tb - o bloco que contém os links das ferramentas

O rodapé no fim da página incluindo blocos com as seguintes identificações:

footer - todo o rodapé contém blocos
f-poweredbyico - a imagem powered by Mediawiki que normalmente reside na direita da página
f-list - identidade da lista que contém todos os pedaços de texto no fim da página

Exemplos[editar código-fonte]

Seguem-se alguns exemplos de código que pode colocar na sua página CSS.

Código	Descrição
#footer {display:none}	Esconde as notas de rodapé que aparecem em todas as páginas onde se vê: Esta página foi modificada pela última vez a 15:58, 10 Maio 2007. O texto desta página está sob a GNU Free Documentation License. Os direitos autorais de todas as contribuições para a Wikipédia pertencem aos seus respectivos autores (mais informações em direitos autorais). "Política de privacidade", "Sobre a Wikipédia", "Avisos gerais" e as imagens
#editpage-copywarn {display:none}	Permite esconder o aviso que aparece ao editar páginas: MediaWiki:Copyrightwarning
#editpage-specialchars-Caracteres {display:none}	Permite esconder os caracteres especiais de acesso rápido que aparecem abaixo da caixa de edição: Caracteres: Á á É é Í í Ó ó Ú ú À à È è Ì ì Ò ò Ù ù Â â Ê ê Î î Ô ô Û û Ä ä Ë ë Ï ï Ö ö Ü ü ß Ã ã Ñ ñ Õ õ Ç ç G, g, K, k, L, l, N, n, R, r, S, s, T, t, C' c' L' l' N' n' R' r' S' s' Ý ý Z' z' ? ? U* u* C( c( D( d( L( l( N( n( R( r( Š š T( t( Ž ž A( a( E( e( I( i( O( o( U( u( A- a- E- e- I- i- O- o- U- u- u"- u"' u"( u"` C^ c^ G^ g^ H^ h^ J^ j^ S^ s^ W^ w^ Y^ y^ A( a( G( g( U( u( C. c. E. e. G. g. I. ? Z. z. A; a; E; e; I; i; U; u; ? ? O" o" U" u" L. l. ? ? Ð ð Þ þ Œ œ Æ æ Ø ø Å å – — … ~ \| ° ± - × ² ³ ½ €
#editnotice-n° do domínio { display: none; }	Permite esconder as editnotices (notas que aparecem ao editar as páginas e você pode ver as páginas existentes aqui
#editpage-specialchars-C.C3.B3digo {display:none}	Permite esconder os códigos de acesso rápido que aparecem abaixo da caixa de edição: Código: [] [[]] {{}} —~~~~ [[Categoria:]] #REDIRECT [[]] <gallery></gallery> <s></s> <u></u> <sup></sup> <ref></ref> <ref name=""></ref> <references/>
body.page-Especial_CategoryTree .firstHeading, body.page-Especial_CategoryTree #jump-to-nav, body.page-Especial_CategoryTree p, body.page-Especial_CategoryTree form, body.page-Especial_CategoryTree .CategoryTreeParents, body.page-Especial_CategoryTree .portlet, body.page-Especial_CategoryTree #footer, body.page-Especial_CategoryTree #siteSub { display:none !important; } body.page-Especial_CategoryTree { background:white; } body.page-Especial_CategoryTree #content { margin:0; padding:0; border:none; background:white; } body.page-Especial_CategoryTree .CategoryTreeItem { white-space:nowrap; }	Permite visualizar a árvore de categorias da Wikipédia numa aba lateral do Mozilla Firefox. Depois de adicionar este código à sua página CSS, terá de aceder à página Especial:Árvore de categorias/Categorias e colocar essa página nos seus Marcadores (favoritos) do Firefox. De seguida, com o cursor sobre esse marcador, clique com o botão direito do rato e seleccione a última opção do menu "Propriedades". Active a opção "Carregar este marcador na barra lateral" e no botão "OK". Após esta operação, quando estiver a visualizar uma página qualquer da Wikipédia, pode visualizar a árvore de categorias na aba lateral.

Ver também[editar código-fonte]

Wikipédia:Software/Scripts

Ligações externas[editar código-fonte]

(em inglês) Propriedades de exibição de CSS
(em inglês) http://css-discuss.incutio.com Discussão sobre CSS
(em inglês) Grandes idéias para criar css avançado