Change font size of blog Header

There was a request for changing the font size to 615px. I tested that at Testing team member removal. The result wasn't pretty. I am putting a screenshot of part of the page below as obviously, I don't want the blog to remain that way and may change it anytime to its original state:



Note that you can't see the whole page and there is a horizontal scroll bar at the bottom when previously, there were none.

This is the way I did it. The first thing you should do before editing or changing template is to backup the template PLUS Page Elements. Refer to Backup and edit New Blogger template and Page Elements and Backup and change New Blogger template PLUS backup Page Elements.

This is the way I did it. I opened the template editor as explained in the above 2 posts and looked for this block of code:

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

I added font-size: 615px; to anywhere to the line of codes, for example, at the bottom as shown below:

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

Of course, if 615px is too large a font size for you, but you still want to change font size, you can still do it as described above, but give a different (smaller) value to the font size.

BTW, I reread the commentator's question and it appear that what she wants may be to change the graphic image width. If that is so, I may do a new post.

Another way of adding graphic to your blog Header

I have previously posted various ways of adding a graphic to your blog Header. See

New Blogger: Adding a graphic to your blog Header
New Blogger: Adding graphic background to your blog Header (click BACK button to get back to this page).
Special fonts for your graphic Header and without removing the text title

I have found another way to add a graphic header, however a test showed this to be an unsatisfactory way. See Testing adding graphic header. Maybe you can experiment to make the result acceptable, but I don't want to try as the above methods are well acceptable to me. (Note: You will see the blog text title together with the graphic. If you have incorporated the blog text title into the graphic and want to remove the blog text title, in the method described below, you can delete the text from the "Blog Title" field). I will be repeating this test again later when I have the time and either update this post or publish a new one. Also in the example above, you see the graphic extending beyond the boundary of the Header. If you don't want this to happen, you should resize the graphic with a photo editor or use the free and very good Irfanview as described in the post: Using Irfanview photo editor for your blog. Click BACK button to get back to this post. I will probably have to redo this post or do a new post to explain this method better).

Anyway, if you want to do it, this is the way. First you have to have the graphic saved in your computer or uploaded to the web. Sign into Dashboard. Click Layout for the relevant blog. You will see a Page Element right at the top of the Layout with the title of your blog. Click edit and you will get this pop-up:



Click BROWSE and locate the graphic you have saved in your computer or type in the URL of the hosted graphic on the web. Then click "Save changes".

How to put an image or logo on the side of the blog Header

Perhaps the easiest way to describe how to add an image or logo on the side of the blog Header is to describe step-by-step how I got to display the photo of a baby at the side of the Header of this blog: Baby Center - everything about baby care.

I have to start with an image, and this was the photo I started with. Then I have to create an image with background color the same color as the background color of the header, which is white. I opened Irfanview (click "BACK" button to get back to this page) and in the menu bar at the top, click Image > Create New (empty) Image, and a pop-up window will appear:



In the Dashboard, for that blog, I clicked Layout, then the TEMPLATE tab, then the EDIT HTML sub-tab to open the template editor window. I searched for this block of codes:

#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

That tells me the Header is 750 pixels wide, so I set the width of the New (empty Image to be 745px and the height to a suitable figure. I clicked on the "Background Color" button and selected white as the background color of the empty image I am going to create. When I am done, I clicked OK and I will be presented with an empty image (without that box with black border). Using the mouse, I "click, dragged and dropped a box where I want the photo to be pasted in and below is the screenshot of what I ended up with.



Having done that, I copied the above photo of a baby into clipboard, went back to Irfanview and pasted the content of the clipboard into the selection (box with black border) by clicking on EDIT > PASTE in the menu bar. The baby photo will then be pasted into the box (selection). The resulting image is shown below:



Actually, if not for the border added by Blogger around the originally empty white image with the baby photo pasted into the selection, you will just see the photo of the baby at the left. The border you see is not part of the image. Anyway, I would like to show just the baby without the gray background, so I saved the image with a suitable name, opened the image with Paint that comes with Windows, then use the eraser icon and erased the gray background of the photo of the baby. I saved the image, then uploaded it into the file section of a Google group Photo Store file section I created just for uploading files and photos, click on the file to open the image on the web, copied the URL from the address bar (alternatively, you can right-click on the photo file, then select "Copy Link Location to get the URL of the photo) to use to put the image as a background as described in this post Adding an image as a background to your blog header

Note that by doing it this way (adding the image as a background), I do not have to delete the text Title of the blog, which I am of the opinion is important to preserve as the Title figures prominently in determining what your blog is all about. I don't think incorporating a graphic Title into the graphic image, then getting rid of the text Title is a good idea from the SEO (Search Engine Optimization) point of view.

5 July 2007: When I set up the Google group Photo Store, it was set up as a private group without me knowing. I tested this method and could view the baby photo (logo) at the left side of the Header without problem. That was because I was signed into the Google account which was used to set up the Google group. What I didn't realise was others who are not members of the Google group would not be able to see the baby photo (logo). Many must have read this post and viewed that blog Baby Center - everything about baby care, but no one bothered to comment to alert me. It was only today when I was using another browser in which I was not signed into that Google account and checked that blog. I was shocked to see that the baby photo (logo) wasn't visible! I now took time to upload the photo into Photo for Baby Center blog and used the URL of the uploaded photo to replace the one in the Google group. The baby photo (logo) should now be visible to everyone. My only regret is those who spotted the problem did not bother to alert me.

Adding graphic background to blog Header

I have previously published a post on how to add a graphic to the New Blogger blog header in this post: Adding a graphic to your blog Header. With this method, other than pictures, you can add other stuff like Google AdSense ads, search box, etc. You also have the choice of leaving the Title alone (for search engine purpose this is good). Or like what a lot of people do, incorporate the title into the graphic and delete the text title which I think is a bad move as text title figure prominently in search engine for figuring out what a blog is all about.

Another way is to leave the Header and the Title as it is and add a background picture, as is done in this blog Business, Travel and Leisure and change color of the text Title to contrast with the background image (for example, for a dark image, make the text Title white). The way to do it is as follows:

First, backup your template (see post Backing up and changing your New Blogger (formerly Blogger Beta) template.

You will need a suitable picture already hosted on the web and have the URL ready. You can either use Blogger to host the graphic. See post Getting the New Blogger (formerly Blogger Beta) to host the photo for your profile, sidebar, Header, etc. (click "BACK" button to get back to this page) or use Photobucket.

Amazon products for graphics

Then in the template editor window, look for this block of codes

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Add the following line to the CSS:

background-image: url(URL of photo);

where URL of photo is the actual URL of the photo already hosted on the web. (Note: you will see some advocating using
background: url(URL of photo);
but background has been deprecated and you should be using background-image instead)

The block of codes then become

#header {
margin: 5px;
background-image: url(url of photo);
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

You will have to ensure that the color of the title contrast with the color of the background picture. In the case of the blog Business, Travel and Leisure, the picture is dark, and the original color of the blog title will not contrast well with the background picture, making it almost invisible. I changed the color to white. The block of text was then changed to

#header {
margin: 5px;
background-image: url(url of photo);
border: 1px solid $bordercolor;
text-align: center;
color:#FFFFFF;
}

where #FFFFFF is the HTML code for white.

To make things clearer, I paste below the actual codes to produce the background picture and to change the color of the Business, Travel and Leisure blog:

#header {
margin: 5px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKIH1aNq34GHmJHcW08W0e3F9xKCc0CVad_w3Mvq8HPRBI_UPQzl9ocC_1zobBRbFW7ybPJ4n9uwhXrKzqI0IPCbezGTrKlV_LTM2m8vg41JjnQVD1FXysgu6OgWwDdkiCznYRSrMNTm_o/s1600/Bukit+Tinggi,%2BPahang%2BHEADER%2BGRAOHIC.jpg);
border: 1px solid $bordercolor;
text-align: center;
color:#FFFFFF;

Update 15 July 2007: Regarding whether there is a need to resize the picture to fit the Header, please refer to my response to Eternalsoul in the comments

Related posts

Special fonts for your blog clickable graphic header

How to put image or logo no the side of the header