Monday, August 31, 2015

How to disable an uppercase font style in blog header

If you're currently using other templates i.e templates other than those provided free of cost by blogger, blog title/header will be in uppercase font just like in our case. Some templates though appear better in such style but many don't suit well. Moreover, there will be as many people who like lowercase style as who like uppercase style. There should be choices. 
   
Our blog title in Uppercase Text-Transformation

If your current third party template also has this style i.e uppercase font style activated in blog title/header font and also in page-tab fonts, let us try to make them into normal/lowercase. 

To convert uppercase font style in blog title to lowercase font style:

Login to your blog>Click on Template>Click on Edit HTML>Find (Ctrl+F) the given CSS:

  h1{
  margin: 10px 0 20px;
  font-size: 3.3em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0em;
  word-spacing: .1em;

In above CSS, you can replace blue font i.e uppercase into normal/lowercase. Once it's being replaced, you can click on Save Template and then on View Blog to see the changes. If it's as you wanted, you must have got it right. And if you want to convert lowercase (if your template has that) to uppercase, you can repeat entire steps and just replace lowercase/normal to uppercase. 

To convert uppercase font style page-tabs to lowercase font style:

We have converted uppercase text-transformation in blog header to lowercase transformation. Now let us customize this font style in pagelist/page-tabs of a blog.
      
Our blog title in lowercase text-transformation

Login to your blog>Click on Template>Click on Edit HTML>Find (Ctrl+F) the given CSS:

  #mainNav li{
  display: inline;
  margin-right: 20px;
  font-size: 1.5em;
  text-transform: uppercase;

In above CSS, you can replace red font i.e uppercase into normal/lowercase. Once it's being replaced, you can click on Save Template and then on View Blog to see the changes. If it's as you wanted, you must have got it right. And if you want to convert lowercase (if your template has that) to uppercase, you can repeat entire steps and just replace lowercase/normal to uppercase. 

Hope you got this tutorial well. Please leave as a comment if you have across any problem while customizing this in your blog. Thanks!  


No comments:

Read our comment Policy to know your rights & responsibilities before actually leaving a comment for this article.

Related Posts Plugin for WordPress, Blogger...