Usuários individuais têm permissão para criar modificações personalizadas na aparência da Memória Alfa em todas as skins do MediaWiki (por exemplo, no que diz respeito a fontes, cores, posições de links, etc.). Cascading Style Sheets (CSS) e JavaScript (JS) são usados com referência a seletores [1] de elementos HTML, classes, e linhas de ID especificadas no código HTML. Portanto, um usuário é capaz de examinar o código fonte em HTML da Memória Alfa e personalizar a aparência do site.
Cascading style sheets (CSS)[]
As folhas de estilo padrão são encontradas nos seguintes locais:
- Monobook: http://www.memory-alpha.org/pt/skins/monobook/main.css e MediaWiki:Monobook.css
- Padrão: http://www.memory-alpha.org/pt/skins/common/wikistandard.css e MediaWiki:Standard.css
- Azul colonial: http://www.memory-alpha.org/pt/skins/common/cologneblue.css e MediaWiki:Cologneblue.css
- Nostalgia: http://www.memory-alpha.org/pt/skins/common/nostalgia.css e MediaWiki:Nostalgia.css
Apenas administradores têm permissão para editar as páginas acima. Usuários podem especificar suas próprias folhas de estilo personalizadas ao editar as seguintes páginas:
- Monobook: http://www.memory-alpha.org/pt/index.php/Usuário:NOMEDEUSUÁRIO/monobook.css
- Padrão: http://www.memory-alpha.org/pt/index.php/Usuário:NOMEDEUSUÁRIO/standard.css
- Azul colonial: http://www.memory-alpha.org/pt/index.php/Usuário:NOMEDEUSUÁRIO/cologneblue.css
- Nostalgia: http://www.memory-alpha.org/pt/index.php/Usuário:NOMEDEUSUÁRIO/nostalgia.css
Exemplos[]
Você pode modificar a cor do fundo da seção de conteúdo principal para torná-lo mais escuro (e assim contrastar mais com o texto branco):
/* tornar a cor de fundo mais escura para a seção de conteúdo principal */
body {
background-image: url(/graphics/background_monobook.gif);
background-repeat: repeat;
background-color: #fff;
}
#content, #footer {
background-color: #000000;
color: #FFFFFF;
}
.pBody {
background-color: #000000;
color: #FFFFFF;
}
Você pode remover o estilo sublinhado do texto e fazê-lo aparecer apenas quando você colocar o cursor do mouse sobre o link:
/* fazer com que os sublinhados em links apareçam apenas usando o cursor do mouse */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
Você pode mudar a cor de vários subtipos de links, tais como links para artigos que ainda não existem, links para sites externos e links de e-mail:
/* mudar a cor padrão dos links */
a.new { color:#ff6633; }
a.stub { color: #772233; }
a.external, a.extiw { color:#999999; }
a.mailto { color: #FFCC00; }
#p-personal { color: #CCFFCC!important; }
Você pode omitir o ícone do "boneco" próximo ao seu nome de usuário:
/* omitir o ícone do boneco perto do seu nome de usuário */
li#pt-userpage { background: none }
Você pode ocultar o logotipo da Memória Alfa no layout:
/* não usar qualquer logotipo, mover as caixas para essa área */
#p-logo { display: none }
#column-one { padding-top: 0; }
Se você estiver usando um navegador Gecko como Mozilla, Firefox ou Camino, você pode criar um estilo de "cantos arredondados " para o layout:
/* tornar alguns cantos arredondados, no momento suportado apenas por moz/firefox/outros navegadores gecko */
#p-cactions ul li, #p-cactions ul li a {
-moz-border-radius-topleft: 1em;
-moz-border-radius-topright: 1em;
}
#content {
-moz-border-radius-topleft: 1em;
-moz-border-radius-bottomleft: 1em;
}
div.pBody {
-moz-border-radius-topright: 1em;
-moz-border-radius-bottomright: 1em;
}
/* o mesmo seguindo as especificações de rascunho de css3, algum navegador suporta isso? */
#p-cactions ul li, #p-cactions ul li a {
border-radius-topleft: 1em;
border-radius-topright: 1em;
}
#content {
border-radius-topleft: 1em;
border-radius-bottomleft: 1em;
}
div.pBody {
border-radius-topright: 1em;
border-radius-bottomright: 1em;
}
Você pode adicionar modificações específicas à interface que se aplicam apenas às páginas impressas:
/*
** Colocar todas as regras específicas para impressão em um bloco de impressão @media.
*/
/* poupar tinta e papel com fontes muito pequenas */
@media print {
#footer,
#content,
body { font-size: 8pt !important; }
h1 { font-size: 17pt }
h2 { font-size: 14pt }
h3 { font-size: 11pt }
h4 { font-size: 9pt }
h5 { font-size: 18pt }
h6 {
font-size: 8pt;
font-weight: normal;
}
}
/* Coisas avançadas: usando :before e :after é possível adicionar formatações
essa regra adiciona a href completa de um link depois dele (não necessário na versão atual): */
@media print {
#content a:link:after,
#content a:visited:after {
content: " <" attr(href) "> ";
}
}
JavaScript[]
Usuários também podem importar JavaScript personalizado ao adicionar o script nas seguintes páginas:
- Monobook: http://www.memory-alpha.org/pt/index.php/Usuário:NOMEDEUSUÁRIO/monobook.js
- Padrão: http://www.memory-alpha.org/pt/index.php/Usuário:NOMEDEUSUÁRIO/standard.js
- Azul colonial: http://www.memory-alpha.org/pt/index.php/Usuário:NOMEDEUSUÁRIO/cologneblue.js
- Nostalgia: http://www.memory-alpha.org/pt/index.php/Usuário:NOMEDEUSUÁRIO/nostalgia.js
Exemplos[]
- Você pode adicionar um conjunto de códigos espelhados na parte de baixo da seção #content do layout; veja Meta-Wiki: Estilos de usuário – códigos inferiores.
- Você pode mudar as chaves de acesso para modificar alguns elementos no agrupamento "ta" (veja [2]). Por exemplo:
ta['ca-nstab-main'] = new Array('c','Ver a página de conteúdos');
Veja também[]
- Ajuda:Preferências
- Meta-Wiki: Ajuda para estilos de usuários – Mais exemplos aqui (em inglês)
- Meta-Wiki: Galeria de estilos de usuários – Ainda mais exemplos! (em inglês)