I am using the Watercolor Template for my blog and would like to add my profile photo to the header before my blog title.
Is it possible to do so with that template?
Thanks in advance for your reply.
Rick-n-Karen
Yeah, should be quite feasible. It's not completely trivial due to the way the layout of that particular blog template is set up, but not too much CSS to write either.
Step by step:
1) Go to Control Panel -> My Blogs -> Manage -> Template (little tab in the top-right) -> Customise this template (a small grey/orange link directly underneath the image of your currently selected template).
2) Find the following block of CSS:
#title {
margin: 0;
font-family: Georgia;
font-size: 42px;
margin-bottom: -290px;
}
and change it to this:
#title {
background: url(http://photos.travellerspoint.com/587598/thumb_322417B72219AC6817A78E2BD2F2B9A4.jpg) no-repeat 15px 0;
background-size: auto 103px;
width: 880px;
padding-left: 120px;
margin: 0 auto;
font-family: Georgia;
font-size: 42px;
margin-bottom: -290px;
}
3) Find the following block of CSS:
#header p#description {
color: #8A5B4E;
width: 1000px;
margin: 0 auto;
padding-left: 70px;
font-family: Georgia;
font-size: 14px;
font-style: italic;
}
and change it to this:
#header p#description {
color: #8A5B4E;
width: 850px;
margin: 0 auto;
padding-left: 220px;
font-family: Georgia;
font-size: 14px;
font-style: italic;
}
The result will look .
One minor problem: the "background-size" property I use to make the image fit in exactly in the height of the header isn't supported in really old versions of Internet Explorer. So people who still use that will see the image at a sligthly larger size, with a bit of your title and the background of your blog area overlapping your profile photo. Nothing disastrous, but it looks a bit weird. If that bothers you, you could upload a resized version of your profile photo (103px high), and use that photo rather than the current one. Or you could base it on the square photo instead. Hover over the header of my example blog to see what that'd look like. If you like that better, use the following substitutions instead:
#title {
background: url("http://photos.travellerspoint.com/587598/square_322417B72219AC6817A78E2BD2F2B9A4.jpg") no-repeat 27px 12px;
width: 930px;
padding-left: 70px;
margin: 0 auto;
font-family: Georgia;
font-size: 42px;
margin-bottom: -290px;
}
#header p#description {
color: #8A5B4E;
width: 900px;
margin: 0 auto;
padding-left: 170px;
font-family: Georgia;
font-size: 14px;
font-style: italic;
}
[ 13-May-2013, at 10:47 by Sander ]
0 Response to "Adding profile photo to blog template header"
Post a Comment