Blogger Template Experiment 4: Sunny But All Business Blogger Template

This one has a split header so technically you can add a gadget on the top left (above the page tabs). I prefer keeping that space empty though.

For the longest time I couldn't figure out how to make the header overlap with the main content until I googled it and found the answer. Sheesh. ;)

Demo | Download XML File

Don't forget to back up your original template first before uploading a new one! ;)

Upload your own header image

This template works best with a header image that's less than 200px in height. If you have a big header image and it covers up a part of the sidebar widget, you'll need to adjust the header height. Go to Template, Edit HTML, expand the code (click on the little black arrows on the left side), and look for this code:

.header-left{
display: inline-block;
height: 70px;
width: 280px;
float: right;
position:relative;
z-index:9999;
}

Adjust the height (text in red) until it looks just about right to you. :)

Keep your page tabs to a minimum

You can't have too many page tabs because some of them will get covered up by the header image. If you really have a lot of pages, you can try adjusting the spaces between tabs to make them fit. Go to Template, Edit HTML, expand the code (click on the little black arrows on the left side), and look for this code:

.tabs-inner .widget li a {
  display: inline-block;

  padding: .25em 1.5em;

  font: $(tabs.font);
  font-size: 90%;
  text-transform: uppercase;
  color: $(tabs.text.color);

  border-$endSide: 1px solid $(tabs.separator.color);
}

Adjust the padding (text in red) until it looks just about right to you. In addition, if you don't want the tabs to be in all caps, change text-transform into lowercase (text in blue). ;)


That's it!

This template can be customized using the template designer.

Let me know if you're having any problems with this template! :)