This tutorial was requested. If you would like to request a tutorial, visit our “Make a Request” page.
In this tutorial, I am going to show you how to take a standard blog layout (with the white section all the way down the middle, and replace it with a Header that has a transparent background, a post section and a footer section. This way, you have a border all the way around your posting area, from the header to the footer (Like seen below). Click here to learn how to make these elements using Pixlr.com OR Purchase a Set in my Shop for less than $5!
Step #1
The first thing that you need to do, is to change your template to the White Simple Theme.
Step #2
Next, you need to add your chosen background. I am adding this Chevron Background from my shop. If you need detailed instructions on how to add a seamless pattern background to your blog, check out my tutorial here.
Step #3
Upload your Header.
(Don’t worry if your header is cut off, or not centered like my example above… we will fix that later)
Step#4
We are going to move our header above our “content-inner” and we will also move our Footer below our “content-inner”. This is how we do that. Go to your Template and Edit HTML.
Then you are going to scroll way down until you see <header> and you are going to select from <header> all the way down to </header>. Then you are going to Cut (right click > CUT) all of that text…
…and Paste it directly under <div class=’content-outer’>.
Next, we also need to move the Footer Code. I you scroll down some more, you will see <footer>. You need to select from <footer> all the way down until </footer> and Cut it (right-click Cut).
Then you need to Paste it (right-click Paste) right below the first </div> after <!– content –> (like seen below).
Now your blog should look something like this:
Step #5
Now we need fix the sizing and add your images. So head over to your Template Designer, under Template and Customize.
Click on Advanced and Add CSS.
There you will add this Code:
.header {
width: 1000px;
}
.content-inner {
background: url('POSTING BACKGROUND IMAGE URL HERE');
background-color:transparent;
padding-bottom:10px;
padding-left:40px;
padding-right:40px;
padding-top:10px;
width: 920px;
}
.footer-inner {
background: url('POSTING BACKGROUND IMAGE URL HERE');
background-position: bottom;
width: 1000px;
}
.footer-outer {
background: url('FOOTER IMAGE URL HERE');
background-repeat: no-repeat;
background-position: 2px bottom;
border: 0px;
padding-bottom:59px;
width: 1000px;
}Then you will need to customize the code to suit your blog. If your header is 1000px wide, then all the number values are correct, if not, then use the info below to set yours up right. **If you need to know how to host your images, or find your “Direct Link – Image URL”, I have a tutorial here.
Phew! Did you get through that :) That is it, now you should have a lovely seamless blog design!
