The header size for many of the themes in blogger is unusually large. This results in a title that consumes too much vertical page real estate.This can be seen in the image on the right. Even when setting a smaller font size, the white space below the title remained. This results in a large overall header.
The culprit is two issues. The first is that the h1 tag is set with margin-bottom: 10px. The second is that the titlewrapper is set with a 22 pixel vertical padding. Both can be modified by editing the CSS.
Once these two values have been changed, you may find that your blog title and description now can be set smaller. For me, the blog title was originally set at 36px and the description was set at 140% of the page text font. I set them to 30px and 100% respectively.
All the modified values have been highlighted in the CSS code listing below. This can be found by taking the following steps:
- Log in to your Blogger account.
- Click the “Layout” or “Design” link.
- Then click the “Edit HTML” link.
- Scroll until you find the header section, and edit the values marked in red as appropriate for your blog.
- Be sure to click “Preview” to check your modifications before saving.
/* Header
----------------------------------------------- */
.header-outer {
background: transparent none repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: normal normal 30px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #152568;
text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
margin-bottom: 0px;
}
.Header h1 a {
color: #152568;
}
.Header .description {
font-size: 100%;
color: #000000;
}
.header-inner .Header .titlewrapper {
padding: 0 30px;
}
.header-inner .Header .descriptionwrapper {
padding: 0 30px;
}
A comparison of the result of these changes can be seen below. Personally I feel that by removing the vertical space through this reduced padding and header size results in a significantly cleaner page then any of the modifications I was able to make through the “Customize Template” tool.
Be warned that if you significantly modify your blogger template at a later date through the customization tool, these CSS values may be overridden and you’ll need to tweak them again for the new template.
1 comment on “Reducing The Header Size in Blogger”
hi, i pasted the post as instructed but it didn’t work as my code is differnt from that in the post. the code is
/* Header
———————————————– */
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 10px;
padding-right: 10px;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: 130%;
}
/* Tabs
———————————————– */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}
.tabs-inner .section {
margin: 0;
}
.tabs-inner .widget ul {
padding: 0;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}
.tabs-inner .widget li {
border: none;
}
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: $(tabs.text.color);
font: $(tabs.font);
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
color: $(tabs.selected.text.color);
}
/* Headings
———————————————– */
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}
.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}
.footer-inner .widget h2,
.sidebar .widget h2 {
padding-bottom: .5em;
}
/* Main
———————————————– */