Customizing Blogger/Blogspot - Changing the Banner

OK. Now my blog really looks like a canned template. Let's try to at least change the banner from the plain colour to the awesome stock photo I downloaded from Stock Exchange. So follow along as I think out loud:
  • First, I need to crop the photo to the dimensions I want: 1000px by 300px. So I did that with my photo editor.
  • Now, I need a place to host my photo. I'll use the same place where blogger puts all my photos for my blog posts - Picasa Web.
  • Once in Picasa, I add the photo to the e.Guidebook album. Once uploaded, I view it and right click on the photo to obtain the URL for the photo.

Once you have that, simply replace the Blog Header section:
/* Blog Header
----------------------------------------------- */
#header-wrapper {
background:$titleBgColor;
margin-top:0px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;

}
#header {
padding:0; margin: 0;
height: 300px; width: 1000px;
background: url('PUT YOUR IMAGE URL HERE') no-repeat left top;
}
#header h1 {
margin:0;
padding:90px 500px 30px 30px;
line-height:1.2em;
font: $pageTitleFont;
}
#header a,
#header a:visited {
text-decoration:none;
color: $titleTextColor;
}
#header .description {
margin:0;
padding: 5px 500px 10px 30px;
line-height:1.5em;
font: $descriptionFont;
}


Then we need to change the color of the title. This is stored in a variable called titleTextColor. I replaced it with a dark gray but you can choose your own color:

variable name="titleTextColor" description="Blog Title Color" type="color"
default="#fff" value="#333333"

No comments: