MediaWiki Discussão:Common.css/LQT Archive 1

Saiba mais sobre esta página

Esta é uma página LiquidThreads que foi arquivada. Não edite o conteúdo desta página. Por favor direcione quaisquer comentários adicionais à página de discussão atual.

Adição

Último comentário: 11 de outubro de 20097 comentários3 pessoas na discussão

Gostaria que fosse adicionado o seguinte código ao MediaWiki:Common.css.

pre {
  overflow: auto;
}

Atualmente, quando começamos uma linha com um espaço, o texto fica destacado assim:

 Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo.

No entanto, quando a linha é muito extensa, o texto sai da página, para a direita. Depois de acrescentarmos o código, em vez de continuar para a direita, apareceria uma barra de rolagem horizontal, assim:

 Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo. Texto de exemplo.

Helder 00h38min de 2 de maio de 2009 (UTC)Responder

Funcionou? Há algum erro? - Jorge Morais 15h46min de 2 de maio de 2009 (UTC)Responder

Não e sim: É que nas páginas de css não podemos deixar os cabeçalhos == Texto == no meio do código. É preciso comentá-los usando um /* antes e um */ depois. Então falta adicionar um de cada em volta do "==Texto esborrando da tela ==" e um /* antes do "== prettytable ==". Helder 16h16min de 2 de maio de 2009 (UTC)Responder

A propósito, você usa o Firefox, não? Experimente abrir "Ferramentas → Console de Erros". É por lá que eu tenho encontrado a maioria dos erros na codificação de nossas páginas, e nos meus javascripts... Foi ali que eu recebi o aviso sobre o "<code>==</code>" Helder 16h16min de 2 de maio de 2009 (UTC)Responder

Continua sem funcionar? =( - Jorge Morais 16h26min de 2 de maio de 2009 (UTC)Responder

Não, agora está funcionando!! (só limpei o cache) Helder 16h39min de 2 de maio de 2009 (UTC)Responder

Para a tabela

Oi! preciso que alguém inclua esse código:

 .prettytable th div {
    text-align:left;
}

...para que seja possível escolher entre centralizado e alinhado a esquerda nos cabeçalhos da tabela.... --Raylton P. Sousa ^oi 12h42min de 11 de outubro de 2009 (UTC)Responder

Remoção

Último comentário: 2 de maio de 20093 comentários1 pessoa na discussão

Alguns trechos do código já podem ser removidos, pois estão disponíveis globalmente a partir de main.css (plainlinks):

/*
== Remover padding de plainlinks ==
  * consultar http://pt.wikisource.org/skins/monobook/main.css
  */
 #bodyContent .plainlinks a {
    padding: 0 !important
 }

e também o item ".noprint, " (por estar definido aqui). Helder 00h38min de 2 de maio de 2009 (UTC)Responder

Era para remover só o ".noprint, " mesmo. Os outros ainda tem sido incluídos em algumas predefinições por aí... Helder 16h16min de 2 de maio de 2009 (UTC)Responder

Agora sim! Helder 16h39min de 2 de maio de 2009 (UTC)Responder

Correção no código das classes wikitable/prettytable

Último comentário: 14 de outubro de 20093 comentários1 pessoa na discussão

Gostaria que fosse feita uma correção análoga a esta aqui, para que em páginas como "Wikibooks:Predefinições/Outras" possamos evitar que as tabelas que estiverem dentro de uma wikitable não herdem as bordas da wikitable externa. Tem uma explicação num dos arquivos da página de discussão do common.css da wikipédia inglesa. O código ficaria assim:

/* classes wikitable/prettytable para que tabelas normais
recebam estilos diferentes, de acordo com o 'skin'
selecionado pelos colaboradores */

table.wikitable,
table.prettytable {
    margin: 1em 1em 1em 0;
    background: #f9f9f9;
    border: 1px #aaa solid;
    border-collapse: collapse;
}
.wikitable th, .wikitable td,
.prettytable th, .prettytable td {
    border: 1px #aaa solid;
    padding: 0.2em;
}
.wikitable th,
.prettytable th {
    background: #f2f2f2;
    text-align: center;
}
.wikitable caption,
.prettytable caption {
    margin-left: inherit;
    margin-right: inherit;
    font-weight: bold;
}

Nota: depois eu farei a modificação necessária na página Wikibooks:Predefinições/Outras, ou nas predefinições que precisarem... Helder 15h41min de 4 de maio de 2009 (UTC)Responder

Conforme w:en:Removing prettytable and wikitable, o código que define a classe wikitable já está no shared.css do Wikilivros. Segundo o que vi por lá, o código pode ser removido daqui do commons, a não ser que ainda existam páginas que usem a outra classe com mesma finalidade: a prettytable. Por mim, podemos remover: Fazendo uma busca, [1], [2], não vi nada para atualizar e como existe a predefinição {{Prettytable}}, que já usa a classe wikitable, e que é razoavelmente popular, acho pouco provável que haja alguma tabela escondida no projeto onde a incomum classe prettytable esteja sendo usada. Helder 23h53min de 27 de junho de 2009 (UTC)Responder

Feito: fiz a remoção. Se aparecerem imprevistos, não serão nada graves e a gente resolve! Helder 23h25min de 14 de outubro de 2009 (UTC)Responder

Listas horizontais

Eu adicionei o css necessário para que seja possível criar listas com * que sejam exibidas na horizontal, como se costuma fazer em alguns lugares (Predefinição:Novos wikilivros e Predefinição:Wikilivros órfãos, por exemplo). Uma vantagem em relação às que são feitas com a inserção manual dos marcadores "•" é que eles sempre ficarão juntos com a primeira palavra, mesmo que a linha acabe (isso acontece conforme a resolução da tela, experimente redimencionar a janela enquanto exibe uma lista). Outra vantagem é que a bolinha combina com o tema vector. E uma outra é que o código wiki das listas fica bem mais legível, pois passa a conter apenas um item por linha.

Quem precisar usar, é só adicionar class="horizontal" em um <div> que esteja em volta da lista:

<div class="horizontal">
* Teste
* Continuação do teste
* Fim do teste
</div>

resulta em:

Teste
Continuação do teste
Fim do teste

Imagino que será útil. Helder 15h20min de 1 de Dezembro de 2009 (UTC)

Etapas

Se a intenção for diminuir o código(lembra do efeito cascata [3] [4]) podemos colocar:

.horizontal li.etapa-indef,
.horizontal li.etapa-00,
.horizontal li.etapa-25,
.horizontal li.etapa-50,
.horizontal li.etapa-75,
.horizontal li.etapa-100 {
		background:transparent no-repeat scroll 0;
}

no lugar de:

.horizontal li.etapa-indef,
.horizontal li.etapa-00,
.horizontal li.etapa-25,
.horizontal li.etapa-50,
.horizontal li.etapa-75,
.horizontal li.etapa-100 {
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-color:transparent;
	background-position:left center;
}

dava para simplificar as classes/seletores também (atribuindo duas classes ao mesmo elemento), mas isso seria meio como cuspir para cima... o custo beneficio não é legal =X

Para não esquecer... Pow Helder, legal você ser tão bom em lapidar as coisas tão rapidamente... eu tanho uma ideia vaga de uma coisa e você põe em pratica menos de um dia... *cara de surpresa*... Ah! acho que já descobriu para que serve o zero, né? na duvida: em geral a ordem é essa

Raylton P. Sousa ^{qualquer coisa estou aqui! =D} 11h59min de 6 de Dezembro de 2009 (UTC)

Na verdade não descobri não... mas chuto que tem alguma relação com o background-position. Mas se for isso, é pra por de novo? Como era um zero só eu não entendi... Não seriam dois?

Não estou conseguindo usar a em vez das imagens individuais na "lista" de livros... Sugestões? (mas preferir andar a metade do caminho: removendo adicionando as imagens via css em vez de direto no código da página principal [com sua sugestão ficou bem mais fácil =)]) Helder 12h55min de 6 de Dezembro de 2009 (UTC)

É o seguinte... quando somente um valor é especificado a posição horizontal é configurada com o valor definido e a posição vertical com 50%... o que significa que o zero no final da propriedade é o mesmo que o seu background-position:left center;, entendeu?

Quanto a imagem... não tenho certeza, mas quando penso nisso o que me vem a cabeça background-size:valor;(que é suportado porcamente pela maioria dos agentes), com uma bagunçada no background-position:valor;, mas isso é outra daquelas historias de custo beneficio... lambra do KISS principle?

Raylton P. Sousa ^{qualquer coisa estou aqui! =D} 14h16min de 6 de Dezembro de 2009 (UTC)

Remoção

Sugiro a troca do seletor body.page-Página_principal por .page-Página_principal, isso possibilita o uso dos estilos da página principal em paginas de teste como essa, no entanto... talvez seja interessante não remover do código que oculta o título da pagina pois não teria serventia adequada em outras páginas... Raylton P. Sousa ^{qualquer coisa estou aqui! =D} 16h06min de 12 de Dezembro de 2009 (UTC)

Sim... acho que vai ser bom se livrar da versão atual do seletor...

Eu coloquei do jeito que está só por que fiz CTRL+C CTRL+V do outro que já estava ali, mas o que eu queria era ter classes nas caixas da direita e da esquerda (sei lá, talvez caixa-d e caixa-e), para poder usá-los em vez do nome da página principal... Aí como vi que você estava fazendo uns testes também, coloquei aquele ali, mesmo que fosse provisório... =) Helder 18h28min de 12 de Dezembro de 2009 (UTC)

Ah! então deixa... quando a gente mover o código todo resolvemos isso =D!--Raylton P. Sousa ^{qualquer coisa estou aqui! =D} 16h04min de 19 de Janeiro de 2010 (UTC)

Printable

Sabe...? eu fiz uns testes... e o código desta especificação não funciona(nem lá... pelo menos de acordo com o teste rápido que fiz). fiquei meio frustrado, já que mediante aos teste que eu e o Helder estamos fazendo sobre um tipo de impressão automática, isto seria no minimo interessante. Então criei um código que faz com que a especificação funcione!

1. para o Common.css

.printonly {
display:none;
}

2.para o Print.css

div.printonly {
display:block;
}
span.printonly {
display:inline;

Ficaria feliz se alguem adicionasse o mais rápido possível, para prosseguir com meus testes... até - Raylton P. Sousa ^{qualquer coisa estou aqui! =D} 16h18min de 19 de Janeiro de 2010 (UTC)

Antes de adicionar, tenho uma pergunta: os "@media print" que estão atualmente no Common.css deviam ser movidos para o Print.css, né? Isso foi feito na en.wp em 2008, quando algo assim foi movido daqui para cá... Seria bom aproveitar e mover também, certo? Helder 17h43min de 19 de Janeiro de 2010 (UTC)

Sim! não tinha olhado para o código mas acho que sim... provavelmente você sabe... quando for mover não precisa definir o tipo de mídia. isto já é feito aqui...

<link rel="stylesheet" href="/w/index.php?title=MediaWiki:Print.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=2678400&amp;action=raw&amp;maxage=2678400" type="text/css" media="print" />

- Raylton P. Sousa ^{qualquer coisa estou aqui! =D} 01h11min de 20 de Janeiro de 2010 (UTC)

Feito Helder 20h51min de 20 de Janeiro de 2010 (UTC)

Olha! na verdade ainda não está resolvido... é preciso adicionar aqui no Common.css:

.printonly {display:none;}

Como eu disse logo acima! até depois! - Raylton P. Sousa ^{qualquer coisa estou aqui! =D} 10h36min de 21 de Janeiro de 2010 (UTC)

Me escapuliu... Agora está

Feito Helder 12h39min de 22 de Janeiro de 2010 (UTC)

Novidades

Sabe... Tenho escrito alguns estilos para melhorar e diminuir os códigos das páginas, alguém poderia fazer o que se pede? por favor =D

Novos esquemas de cores

Na seção /* Esquemas de cores para uso geral */ adecione isso

Feito

Mas alguns dos nomes escolhidos são meio estranhos... Helder 19h06min de 9 de Maio de 2010 (UTC)

Atualização da caixaPP

Troque o código da classe caixaPP por

.caixaPP {
  margin: 5px 0px 5px 0px;
  border: 1px solid #DEDED3;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
 }

Feito Helder 19h06min de 9 de Maio de 2010 (UTC)

Acho que adicionar um "padding:5px;" não faria mal algum... =D. Os títulos ficaram muito grudados nas bordas... Helder 19h10min de 9 de Maio de 2010 (UTC)

Concordo em adicionar um "padding:5px;" para o uso que fazemos dela isso é bastante adequado...--Raylton P. Sousa ^{qualquer coisa estou aqui! =D} 13h56min de 10 de Maio de 2010 (UTC)

Feito Helder 00h36min de 11 de Maio de 2010 (UTC)

CSS para a `{{Portal/Topo}}`

Adicione uma seção para estilizar a predefinição {{Portal/Topo}}

/* Predefinição:Portal/Topo */
.top{
	border:1px solid #abd5f5;
	background-color:#d0e5f5;
	font-size: 95%;
	clear:both;
	margin-bottom:5px;
}
 
.top .info{
	padding:0.2em 0.5em 0.2em 0.5em;
	clear:both;
}
 
.top .info .titulo{
	width:53%;
	float:left;
}
 
.top .info .data{
	width:45%;
	float:right;
	text-align:right;
}
 
.top .cont{
	width:100%;
	border-top: 1px solid #abd5f5;
	background: #f1f5fc;
	clear:both;
}
 
.top .cont span{
display:block;
}
 
.top .cont .titulo{
	text-align:center;
	font-weight: bold;
	font-size: 200%;
}
 
.top .cont .guia{
	border-top:1px solid #abd5f5;
	background-color:#d0e5f5;
	padding:0.2em 0.5em 0.2em 0.5em;
	clear:both;
}

Feito Helder 19h06min de 9 de Maio de 2010 (UTC)

Thanks! =D --Raylton P. Sousa ^{qualquer coisa estou aqui! =D} 13h57min de 10 de Maio de 2010 (UTC)

CSS para as categorias das etapas de desenvolvimento

E outra seção para estilizar as listas das páginas nas categorias da biblioteca por etapa

/*Imagens de etapas para as respectivas categorias */ 
 
body.page-Categoria_Livros_na_etapa_8_de_8 #bodyContent #mw-pages ul {
list-style-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/8de8.svg/10px-6de8.svg.png");
}
 
body.page-Categoria_Livros_na_etapa_7_de_8 #bodyContent #mw-pages ul {
list-style-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/7de8.svg/10px-7de8.svg.png");
}
 
body.page-Categoria_Livros_na_etapa_6_de_8 #bodyContent #mw-pages ul {
list-style-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/6de8.svg/10px-6de8.svg.png");
}
 
body.page-Categoria_Livros_na_etapa_5_de_8 #bodyContent #mw-pages ul {
list-style-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/5de8.svg/10px-5de8.svg.png");
}
 
body.page-Categoria_Livros_na_etapa_4_de_8 #bodyContent #mw-pages ul {
list-style-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/4de8.svg/10px-4de8.svg.png");
}

body.page-Categoria_Livros_na_etapa_3_de_8 #bodyContent #mw-pages ul {
list-style-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/3de8.svg/10px-3de8.svg.png");
}
 
body.page-Categoria_Livros_na_etapa_2_de_8 #bodyContent #mw-pages ul {
list-style-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/2de8.svg/10px-2de8.svg.png");
}
 
body.page-Categoria_Livros_na_etapa_1_de_8 #bodyContent #mw-pages ul {
list-style-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/1de8.svg/10px-1de8.svg.png");
}
 
body.page-Categoria_Livros_na_etapa_0_de_8 #bodyContent #mw-pages ul {
list-style-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/0de8.svg/10px-0de8.svg.png");
}

Acho que precisamos adicionar o id "mw-pages" em algum lugar, para evitar que eventuais listas colocadas no conteúdo das categorias recebam as imagens das etapas também... Helder 19h06min de 9 de Maio de 2010 (UTC)

Tem rasão... se colocar #mw-pages logo depois #bodyContent tudo ficará melhor... -Raylton P. Sousa ^{qualquer coisa estou aqui! =D} 14h10min de 10 de Maio de 2010 (UTC)

Feito Helder 00h36min de 11 de Maio de 2010 (UTC)

CSS da biblioteca

E por ultimo o código para mover todos os estilos da biblioteca para essa folha de estilo

/* Estilos da Biblioteca*/
.bb h3 {
font-size:105%;
}
.bb {
clear:both;
}
.bb .coluna {
background-color:#FAF5FF;
border:1px solid #DDCEF2;
float:left;
margin:5px 0 5px 0;
padding:8px;
width:47.8%;
}
.bb .coluna + div {
float:right;
margin-left:10px;
}
.bb .coluna, .bb h2 {
-moz-border-radius:10px;
-webkit-border-radius:10px;
 
}
.bb h2 {
background-color:#DDCEF2;
border:1px solid #AFA3BF;
font:bold 120% Verdana,Arial,Helvetica,sans-serif;
padding:2px 0 2px 8px;
text-align:left;
}
.bb .coluna ul {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:90%;
}

-Raylton P. Sousa ^{qualquer coisa estou aqui! =D} 14h28min de 9 de Maio de 2010 (UTC)

Já tínhamos um outro código da biblioteca aqui no common.css. Imaginei que era para removê-lo. Mas notei que havia um código para margens que não está presente na nova versão. Foi removido de propósito?

body[class*=page-Wikilivros_Biblioteca] h2 { margin: 0.5em 0; ... </source>

Se foi, está

Feito... [5] Helder 19h06min de 9 de Maio de 2010 (UTC)

Olha tudo que fez está certo, mas depois que fui aplicar os códigos notei uns bugs(de resolução, largura etc)... então o código novo com as devidas correções é esse--Raylton P. Sousa ^{qualquer coisa estou aqui! =D} 13h37min de 10 de Maio de 2010 (UTC)

Feito Helder 00h36min de 11 de Maio de 2010 (UTC)

Listas

Passando no en.books eu achei isso e resolvi fazer umas adaptações... será que alguém pode adicionar pra mim =D

PS: O código serve para numerar corretamente as listas(diferente do que acontece) Raylton P. Sousa ^{qualquer coisa estou aqui! =D} 16h15min de 1 de Agosto de 2010 (UTC)

Não consegui entender o que isso faz, nem o motivo da adaptação ser tão maior do que o original... Poderia explicar melhor? Helder 19h41min de 8 de Agosto de 2010 (UTC)

Estilo dos botões de edição

O texto que aqui estava foi movido para: Tópico:Wikilivros_Discussão:Portal_comunitário/Estilo_dos_botões

Adicionar tópico

MediaWiki Discussão:Common.css/LQT Archive 1

Adição

Para a tabela

Remoção

Correção no código das classes wikitable/prettytable

Listas horizontais

Etapas

Remoção

Printable

Novidades

Novos esquemas de cores

Atualização da caixaPP

CSS para a {{Portal/Topo}}

CSS para as categorias das etapas de desenvolvimento

CSS da biblioteca

Listas

Estilo dos botões de edição

CSS para a `{{Portal/Topo}}`