Help:User style/es

From Meta, a Wikimedia project coordination wiki
Jump to navigation Jump to search

El usuario puede personalizar fuentes, colores, posiciones de los enlaces en los márgenes y ¡muchas otras cosas!

Esto se puede hacer a través de la hoja de estilos en cascada almacenada en las subpáginas de la página de usuario.

Por ejemplo, para crear su propia modificación para la apariencia «Vector», cree la página en Special:Mypage/vector.css que contiene el CSS que desea utilizar y/o la página Special:Mypage/vector.js que contiene el JavaScript personalizado.

Tenga en cuenta que cuando se utiliza esta característica en Proyectos Wikimedia, las plantillas de estilo personalizado y código JavaScript se visualizan de manera pública y el usuario está de acuerdo con la liberación de los derechos según las licencias GFDL y CC-BY-SA 3.0.

Geral[edit]

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 aqui no Meta 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 LocalSettings.php#Stylesheet_Location.

No skin monobook, você pode agora alterar qualquer aspecto do UI especificado em http://en.wikipedia.org/style/monobook/main.css e en: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&action=raw&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 (neste caso aqui no Meta referindo-se a //meta.wikimedia.org/style/wikistandard.css) 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[edit]

CSS em subpáginas versus CSS em um arquivo local[edit]

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[edit]

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: help:index (veja o vs :link)
  • :link:link
  • :link:visited
  • :link#contentTop
  • :link.external - http://example
  • :link.extiw – interwiki no corpo da página - w:pt: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) - Media:example
  • :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[edit]

  • Edit box: textarea#wpTextbox1
example1
  • Edit summary box: input#wpSummary
example2

Principais blocos de estilo[edit]

  • 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