Blogger: Transparent Header with Simple Template

Recently I came upon a blogger looking to use a transparent image header with the Simple template. They wanted to have the page body background show through the transparency with the rest of the blogs color intact below.

Unfortunately, the Simple template applies it's background color to the entire content section meaning we can't simply set the header to a transparent background. Instead we're left to alter a number of styles to get the job done.

Making the Simple Header Transparent
Two styles applied to four total template elements do most of the work. Start by opening Design->Edit HTML and Ctrl+F to find /* Mobile. Now, paste these lines just above:

.header-outer, .content-inner { background-color: transparent; }
.main-outer, .tabs-outer { background-color: $(content.background.color);}

Correct Margin and Padding
Preview your changes and you should see a transparent header with a colored background behind your tabs and blog. Unfortunately, the tabs section will overflow to the sides and the blog content will have odd looking bars to the side. Correcting these problems requires changing the padding and margin with two more styles. Paste these just below the first two.

.tabs-inner .widget ul { margin: 0px -15px;}
.content-inner{padding: 0px;}

Preview again and the problems should be corrected. The blog content and tabs should fill the width of the blog, the header is transparent and the blog background should look much as it did before. Still, one issue remains.

Remove the Box Shadow
You probably notice the header is broken up by shaded bars on either side. This is the result of a box shadow style. To fix it just remove the styles responsible. Search for .content-outer { and remove the four lines with box shadow in them. Preview again and things should look nice and smooth across the header. Below is a preview of these changes, along with some other tweaks of my own applied to this blog.

Other Issues
The exact look you're going for with the header may still not be right. Simple template applies a number of margin and padding rules which may throw things off a bit. A prior post on header customization is a good place to start looking for other tweaks. If you're having problems I can likely help solve them, just leave a comment with a link to the blog and I'll see what I can do.

Summary
The Simple template makes it anything but simple to create a transparent header. Several styles come into play, far more than some other templates. Still with a little knowledge it can be done without too much pain. Keep in mind though this tutorial is based on an unmodified template, so if your template is heavily modified additional work may be required. Good luck with your blogging and I hope this helps get the look you want.

Support JSBlogStop:

Donate with Dwolla