Domingo, 17.05.09

Como ter os cantos arredondados no campo de introdução de twitts no Twitter

twitter cantos arredondados

Devido às suas dimensões, a imagem foi recortada. Clica nela para a veres completa.

 

No Firefox e respectivos clones, e outros browsers que usam o Gecko, o "motor de renderização" de conteúdos web desenvolvido pela Mozilla e usado no Firefox, o Twitter aparece com os cantos arredondados, como já devem ter reparado. Isto acontece apenas nestes e não nos outros browsers porque apenas o Gecko reconhece o "-moz-border-radius". Este atributo de CSS é a implementação feita pela Mozilla para o "border-radius", que está incluído na versão 3 da especificação do CSS.

 

Os cantos arredondados, na minha nada humilde opinião, dão um aspecto mais agradável ao site. Mas o campo onde se escrevem os twitts não teve a mesma sorte que o corpo do site. Em vez de um aspecto mais soft, parece uma mesa com quinas afiadas, daquelas que nos vazam os olhos só de olhar para elas.

 

Com o Firefox e a extensão Stylish, é possível dar a volta a isso. Depois de instalada a extensão e reiniciado o browser, visitem o Twitter.com, cliquem no ícone que aparece no canto inferior direito do Firefox (o rectângulo com o "S"), e escolham a opção "Write new style > For twitter.com...". Feito isto, aparece-vos uma pequena janela onde podem editar a folha de estilo do site à vossa vontade. Para ficarem com a caixa de introdução dos twitts com os cantos arredondados, introduzam o seguinte conteúdo nessa janela, e depois cliquem no botão "Save" para gravarem a alteração.

 

@namespace url(http://www.w3.org/1999/xhtml);

 

@-moz-document domain("twitter.com") {

fieldset.common-form input[type="text"], fieldset.common-form input[type="password"], fieldset.common-form textarea, fieldset.common-form select, fieldset.common-form checkbox {

-moz-border-radius-bottomleft:5px !important;

-moz-border-radius-bottomright:5px !important;

-moz-border-radius-topleft:5px !important;

-moz-border-radius-topright:5px !important;

padding:4px !important;

}

 

}

 

O resultado final é o que podem ver na imagem no ínicio do post. Acho que fica mais agradável assim.

publicado por brunomiguel às 15:54 | link do post | comentar | ver comentários (3)
Segunda-feira, 01.09.08

Não Muito Pastel: o tema

imagem
Grand Street: Painter, por moriza, sob uma licença Creative Commons 2.0

Eu não sou nenhum webdeveloper (webdevelopers, webdevelopers, webdevelopers) nem webdesigner (webdesigners, webdesigners, webdesigners), e depois do ter estado aqui às voltas com o novo layout por causa de umas merdices com o tamanho do texto, tenho pena de quem tem como profissão o webdesign. Diga-se a verdade, isto também é culpa da minha relativa inexperiência nisto; mas porra, ter que por o texto a aparecer em condições no maior número de browsers e sistemas operativos possível dá uma trabalheira do caraças!

Foram-me relatados alguns destes problemas com o tamanho do texto, e de facto vi-os quando usei o browsershots.com para testar o layout em diferentes plataformas e browsers. Eu estava a usar pixeis para o tamanho do texto, mas aparentemente isto consegue ser muito diferente de browser para browser e sistema para sistema. Agora estou a usar points na maioria do texto e 'em' nas zonas que apareciam demasiado pequenas nalguns browsers e sistemas.

E com isto, tanto a folha de estilo como o código xhtml do blog passam na validação da w3.org. Sabe bem, porque se não passasse, acho que iria ficar bastante lixado...

Bem, como prometi disponibilizar a folha de estilo que estou a usar, aqui a têm. Se a quiserem aplicar no vosso blog alojado no Sapo Blogs, primeiro escolham o tema Sapo na personalização básica, depois vão até à personalização avançada e escolham o editor de css, metam o visto em «Editar css do blog?», removam o código que lá está e colem este. É simples. Se o quiserem alterar, estejam à vontade.

Ah, como esta folha de estilo é baseada na Pastel, que está disponível em templates.sapo.pt, dei-lhe o original e genial nome de Não Muito Pastel. Brilhante, não?! Eu sei que sim! :P

publicado por brunomiguel às 03:57 | link do post | comentar | ver comentários (2)
Domingo, 31.08.08

Novo tema (sim, outro)

led trails
led trails, por CowGummy, sob uma licença Creative Commons.

Ainda ontem - e hoje - me queixava de uns problemas que estava a ter com o novo tema que tinha aplicado a este blog, e hoje já tenho outro tema. E este é bem catita, tipo Elisha Cuthbert, mas em formato blog.

A minha inspiração e base para este tema foi o Pastel, disponibilizado no blog templates.sapo.pt. Achei alguma piada a esse tema; as cores não me agradavam, mas achei que tinha ali algo para poder desenvolver um tema que realmente me agradasse e, ao mesmo tempo, fosse agradável para os visitantes.

Uns tweaks aqui, umas marteladas ali, uns insultos de tempos a tempos, e o tema está quase acabado - e com a sintaxe CSS e XHTML válida. Quase, porque ainda deve levar uns pequenos ajustes durante os próximos dias. Isto prende-se com o facto de o ter testado num ambiente muito limitado: um blog criado para testes, onde não são usadas listas, imagens, etc. Agora é em "ambiente de produção" (sempre quis escrever isto aqui) que o vou acabar.

A folha de estilo deverá estar disponível dentro de muito pouco tempo: minutos, horas ou dias, dependendo da disposição, mas nunca mais que o final da próxima semana.

publicado por brunomiguel às 23:03 | link do post | comentar | ver comentários (5)

Novo tema e algumas dores de cabeça

Eu não sei como é que consegui aguentar tanto tempo o mesmo layout no blog, mas o certo é que consegui. Mas isto não ia durar para sempre, ainda para mais quando eu tenho a mania de estar sempre a mudar tudo, por isso voltei a alterá-lo.

Na busca de inspiração, visitei o blog templates.sapo.pt e descobri um tema muito porreiro e simples chamado esquadro. Curti-o milhões, por isso decidi aplicá-lo aqui e fiz-lhe algumas pequenas alterações para ele ficar mais ao meu gosto.

Tu estava bem, pensava eu: o CSS valida, o XHTML também. Até que, sem que houvesse razão para isso, abri o Midori, um pequeno browser que usa o Webkit para fazer render às páginas. Quando entrei no meu blog, reparei que a parte que as tags de um post e a zona onde aparece o nome do autor e as links para comentar estavam com um distanciamento enorme, um distanciamento que não me aparecia nos browsers que usam o Gecko. Ainda pensei que fosse stress deste browser, por isso entrei no browsershots.com e testei o layout com todos os browsers que usam o Webkit. O resultado foi o mesmo.

Não sendo eu um hacker de CSS, andei uns tempos às voltas até que descobri que a culpa era de uma classe chamado clear que é usado nas tags br que estão entre os divs. Em browsers Gecko, consigo ter essa info dos posts próxima uma da outra sem ter que usar o display:none no .clear. Mas se usar o display:none no .clear, o #container, o div principal do tema, herda a altura do #header.

Até agora, a única solução que encontro para isto é a remoção da class das tags br que estão entre os divs em causa. Só que isso envolve a criação de layers com o sistema de blogging do Sapo Blogs, e o S2, a linguagem usada para criar layers, para mim está ao nível do mandarim. Para piorar, não consigo definir vários layers para um tema.

Agradeço sugestões para esta minha situação. E também sugestões para o layout do tema. Terei todo o prazer em recebê-las nos comentários.

publicado por brunomiguel às 13:48 | link do post | comentar | ver comentários (12)
Quinta-feira, 29.05.08

Pequena alteração no layout

Como podem ver, corrigi uns pequenos bugs no layout que me andavam a atormentar. As alterações foram poucas: a cor de fundo da página passou a ser um tom cinza escuro, o título do blog só fica com com de fundo quando o cursor está por cima dele e a folha de estilo perdeu os atributos que estavam comentados.

Espero que gostem das alteraçõe que fiz. Eu gosto, se não não as teria feito, como é óbvio.

Sugestões e críticas, como sempre, devem ser feitas nos comentários; é para isso que eles servem. O download da folha de estilo pode e deve ser feito aqui.

publicado por brunomiguel às 17:38 | link do post | comentar | ver comentários (14)

do not feed the trolls

Outros blogs meus

pesquisar neste blog

 

subscrever

RSS

Newsletter

posts recentes

arquivos

links