- 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:
Post a Comment