Note: It is alway best to dowload a copy of your full template to your computer before making changes to the HTML
Also, you can select "Preview" to view edits as you make them before "Saving".
Navigate to the following area when editing your blog --> Layout Tab ---> Edit HTML Sub Tab
How to add a new image to your blog body background:
1. Decide on an image you would like to use2. Add the following code before your: body {
** For what ever reason I am unaware - I had to import this code as an image for you to see as it was not showing up when I typed it in here...
3. Add the following code or change the code to your selected image here: (You will be changing the whole url string in background: to source your own image you are going to use.)
body {
Now that you have done that it is time to make the back ground header transparent so that you can see your blog body image through it.
background:#fff url("http://addressyourblog.blogger.com/YOUR IMAGE GOES IN THIS SECTION.jpg") no-repeat $endSide bottom;
background-attachment:fixed;
margin:0;
padding:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small; font-size: /**/small;
text-align: center;
}
4. Find the /* Header section in the HTML of your blog
5. Find the header-wrapper section and add the following code for "Opacity". The opacity, filter and -moz-opacity lines must match. So, if you change the opacity to .950 - then you have to change the filter to opacity=95 and the -moz-opacity to .950. I found that .850 gives the blog a great transparency without loosing the ability to read the text.
#header-wrapper {
6. Now you need to add the opacity to your outer-wrapper as well. Let's find the section under the outer-wrapper called main-wrapper and make the following additions to the code.
background-color: #FFFFFF;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;
width:925px;
margin:15auto 10px;
}
#main-wrapper {
7. You must also change your side bar wrappers adding the opacity code as follows. Find the section sidebar-wrapper and add the code.
background-color: #FFFFFF;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;
width: 450px;
float: left;
padding: 0;
margin-right: 10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
8. Depending on your blog layout - you may have multiple sidebars - in that case you need to edit each one and add the opacity code as follows in this example:
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;
width: 220px;
float: right;
background: $sidebar2bgcolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#right-sidebar-wrapper {
background-color: #FFFFFF;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;
width: 220px;
float: right;
padding: 0px;
background: $sidebar1bgcolor;
margin-right: 15px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
0 comments:
Post a Comment