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

Origem: Wikilivros, livros abertos por um mundo aberto.
Saltar para a navegação Saltar para a pesquisa

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[editar código-fonte]

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>" Teeth.png 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!! Teeth.png (só limpei o cache) Helder 16h39min de 2 de maio de 2009 (UTC)[Responder]

Para a tabela[editar código-fonte]

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[editar código-fonte]

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[editar código-fonte]

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 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]
Yes check.svg Feito: fiz a remoção. Se aparecerem imprevistos, não serão nada graves e a gente resolve! Smile.png Helder 23h25min de 14 de outubro de 2009 (UTC)[Responder]

Listas horizontais[editar código-fonte]

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[editar código-fonte]

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)
Tongue.png
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 imagem do sprite 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[editar código-fonte]

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[editar código-fonte]

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!

.printonly {
display:none;
}
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 ... 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)
Yes check.svg 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... Tongue.png Agora está Yes check.svg Feito Helder 12h39min de 22 de Janeiro de 2010 (UTC)

Novidades[editar código-fonte]

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[editar código-fonte]

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

Yes check.svg Feito
Mas alguns dos nomes escolhidos são meio estranhos... Tongue.png Helder 19h06min de 9 de Maio de 2010 (UTC)

Atualização da caixaPP[editar código-fonte]

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;
 }
Yes check.svg 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)
Symbol support vote.svg 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)
Yes check.svg Feito Helder 00h36min de 11 de Maio de 2010 (UTC)

CSS para a {{Portal/Topo}}[editar código-fonte]

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;
}
Yes check.svg 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[editar código-fonte]

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)
Yes check.svg Feito Helder 00h36min de 11 de Maio de 2010 (UTC)

CSS da biblioteca[editar código-fonte]

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á Yes check.svg 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)
Yes check.svg Feito Helder 00h36min de 11 de Maio de 2010 (UTC)

Listas[editar código-fonte]

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[editar código-fonte]

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