Entertainment
 

Ajuda:Estilo de usuário

Da Memória Alfa, a referência livre de Star Trek

Conteúdos → Estilo de usuário

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.

Índice

[editar] Cascading style sheets (CSS)

As folhas de estilo padrão são encontradas nos seguintes locais:

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

[editar] 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: #000000;
    }
    #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) "> ";
      }
    }

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

[editar] Exemplos

  • 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');

[editar] Veja também

Obtido em "http://memory-alpha.org/pt/wiki/Ajuda:Estilo_de_usu%C3%A1rio"