Wednesday, April 13, 2011

Remove underlining from menu-bar and post-title links

If you underline the links on your blog, then the page-links and post-titles are usually underlined too. But you can turn underlining OFF for these items, and adjust the spacing to make them stand out.


Underlining links


Recently, I made all the links on Blogger-Hints-and-Tisp blue, because "everybody" knows that real hyperlinks are "always" blue.

I also set them to be underlined because ProBlogger underlines his links, and I guess that he's done the research and knows it's a good thing to do.

 Also, I'm aware that colour-blind people sometimes find colour-only links difficult to distinguish.


Changing the links was easy: I just added some CSS rules to my template:
a:link {
text-decoration:underline;
}
a:visited {
text-decoration:underline;
}
a:hover {
text-decoration:underline;
}

The first rule underlines links that the reader hasn't visited yet.

The second does links that they have visited.

And the third says to keep the underlining showing even when someone hovers their mouse over it.

But adding these rules had one ugly side effect: underlinig the links also underlined post-titles, and the things in the menubar. This made the blog look "clunky", so I had to turn underlining off for certain links.


How to remove underlining from some hyperlinks


Horizontal Tab / Menu bar

To turn off the underlining for the items in the horizontal menu bar (where people usually put a Pages or Labels gadget), add this CSS style:
.tabs-inner .widget li a
{
text-decoration: none !important;
}

Notice the !important in that statement: roughly speaking, it says that even if a rule elsewhere in the blog says to underline links, this rule is more important than that one and so this rule should be followed.

Post titles

To turn off the underlining for the post titles, add this CSS rule:
h3.post-title a,
h3.post-title a:visited
{
text-decoration:none;
}
Note that this time I combined the instruction for both visited and un-visited links into the one CSS style rule. I didn't bother adding the !important (eg to make it "text-decoration:none !important);" - but I would have done if I'd found that the blog wasn't displaying correctly.

Using spacing to make post title stand out


Looking at the post titles, I realised that they were a bit cramped. So I added a bit of blank space to them by changing one piece of code, from:
h3.post-title{
font: $(post.title.font);
margin: 0 0 0;
text-align: left;
text-decoration: none;
}
to
h3.post-title{
font: $(post.title.font);
margin: 0 0 10px 0;
text-align: left;
text-decoration: none;
}

This time, instead of just adding a new rule, I made the change in the template myself. To do this, I:
  • Went to Template > Edit HTML > Proceed
  • Downloaded a backup copy of the template,
  • Used the search-tool in my browser to find the code I wanted to change.


This wasn't quite as easy as adding CSS through the Template Designer > Advanced tool, but it means that the rules will be kept together and so easer to change in future.

This was just a few small change to the margin - but it made a big difference to the "look" of my posts.



Related Articles




Adding a new, or updated, CSS rule to your blog

Centering the post title in your blog

Removing "Powered by Blogger" from Designer-template blogs

Planning changes to your blog - in private
Read more > Remove underlining from menu-bar and post-title links

Nissan Tiida 2012

TiidaE mais uma vez a Nissan mexe levemente na sua linha média. Infelizmente, por mais que o Tiida seja um excelente produto no aspecto técnico, ele já é conhecido por ser uma excelente definição de apatia quanto ao desenho, que ostenta uma confusão de linhas retas com altura não muito proporcional. Porém, agora parece ter passado a apelar ao custo/benefício para o sedã vender mais, enquanto o compacto quer agradar com os toques esportivos.

Nissan TiidaSe todos os modelos ganharam a opção da cor branca, o hatchback SL trouxe novos parachoques e rodas de 16 polegadas, além do sistema i-Key de chave inteligente que agora não é exclusiva dos modelos automáticos. Por outro lado, o sedã ganhou o ajuste de altura do banco do motorista. Sempre com o 1.8 16v de 125/126 cv, os Tiida começam em R$ 50.990.

Read more > Nissan Tiida 2012

Thursday, April 7, 2011

Fiat Doblò 2012

DoblòSe quando chegou ao mercado o Doblò até assustava pelo estranho desenho da dianteira, bastava um pouco de coragem para entrar no modelo, e qualquer pessoa se abismava com o seu enorme espaço, a ponto de logo se deixar seduzir pelo carro. E quando surgiu a versão Adventure surgiu a situação melhorou ainda mais, de forma que a multivan logo superou em vendas aos pioneiros Renault Kangoo, Peugeot Partner e Citroën Berlingo, ganhando a liderança da categoria.

Fiat Doblò 2012Mas enquanto a Fiat nem sonha em trazer a nova geração da multivan ao país, a linha 2012 vem com mudanças leves, na verdade uma adaptação do modelo à nova gama de versões. A de entrada passa a ser Attractive 1.4 e chega por R$ 53 mil com o motor de 85/86 cv e a novidade de o ar-condicionado opcional ter ficado mais barato. Já o motor 1.8 e.TorQ de 130/132 cv passou a equipar o Doblò Essence, que parte de R$ 59.290 com as mesmas listas de itens. No topo da linha, o Adventure agora tem o bloqueio de diferencial como opcional, de forma que seu preço básico agora baixou para R$ 64.300, com o mesmo motor.

Read more > Fiat Doblò 2012
 
 
Copyright © blog
Blogger Theme by Blogger Designed and Optimized by Tipseo