Thursday, August 23, 2007

Change blog title from all uppercase to only first alphabet uppercase

The previous post Change blog title from all uppercase to all lowercase or vice-versa (click BACK button to get back to this page). This post will describe how to change a blog which has its blog title all in all uppercase to only the first alphabet of a word in uppercase, with the rest in lowercase.

This has been tested on the blog Natural Remedies which you will notice have only the first alphabet of the blog title and description in uppercase. Previously, the blog Header looked like this:

blog Header with title and description all in uppercase

This was how the blog title and description was changed to only the first alphabet in uppercase. Before you do anything with the template, it is always wise to backup your current template PLUS the Page Elements as described in Backup New Blogger template plus Page Elements and edit template. When you are finished with what the above post instructed, you will still be in the template editor. Look for this block of codes:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Add a line

p:first-letter

to the block of codes so that it become

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
p:first-letter
text-transform:uppercase;

letter-spacing:.2em;
font: $pagetitlefont;
}

For the blog description, look for this block of codes:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Just as above, add the line

p:first-letter

so that the block of codes become

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
p:first-letter
text-transform:uppercase;

letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Preview, and if everything is OK, save the template.

NOTE: Both the examples in the previous post Change blog title from all uppercase to all lowercase (click BACK button to get back to this page) and this post use New Blogger Minima template modified to 3 column by Hackosphere (click BACK button to get back to this page). If you are using a different template, the codes may be different or the particular lines may be missing altogether. If so, just add the necessary lines in.

4 comments:

  1. That was really helpful, some templates you can find on the web have lowercase on default lol. Thanks it helped me out well!

    Am i allowed to leave a link?? hehe

    http://bbq-ideas.blogspot.com

    ReplyDelete
  2. hi Peter,
    fist of all, i must say i love all ur writings, it is very useful for everybody.i am hoping you could help me, i have tried recently a template from somewhere but decided not to use it,now i'm using another template but these links under my title keeps showing up, my link is:http://pinayjade.blogspot.com/

    ReplyDelete
  3. Hi Pinay Jade,

    Sorry about responding so late, but reasons given at Why your comments and emails are not getting prompt response: Apologies.

    I checked your blog and I don't see any links under the title?

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions_
    (Blogger FAQ in progress. More will be added as I have the time)

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics