12 July 2013

Blogger Template Experiment 4: Sunny But All Business Blogger Template

12 July 2013
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! :)


17 comments:

  1. Gosh, if I was on Blogger I would go apeshit crazy at the site of these FREE templates! Leah, this is so so so generous of you. These are high quality!

    ReplyDelete
  2. I used you're freebies, so I thanked you on my blog hahaha :)

    byee

    ReplyDelete
  3. How did you get your sidebar like that?
    Im sorta wondering how to do something like that, but none of the tutorials work.

    ReplyDelete
    Replies
    1. Hi Emma! You mean adding a background to each widget on the sidebar? I added this code to the HTML of the template:

      .sidebar h2 {border-bottom: 1px dashed #ccc; }
      .sidebar .widget {background: #f3f3f3; padding: 20px; }

      The first line refers to the widget title. The second line is for the background of each widget. :)

      Delete
  4. Hello! This is such a pretty template! :)
    I have a question. Do you know how to adjust the height of tabs background? Can't find tuts about it.
    Thanks, btw! :)

    ReplyDelete
    Replies
    1. Thanks! :)

      I usually just adjust the padding. Try tweaking the padding (see code below 'Keep your page tabs to a minimum') and preview your template to see. :/

      Delete
  5. Finally found a perfect template! I'm currently using this on my blog. Thank you!

    http://thedeerlady.blogspot.com

    ReplyDelete
    Replies
    1. Hey, thanks, Krista! Let me know if you need help with anything. :)

      Delete
  6. I am really impressed by this blog! Very clear explanation of issues is given and it is open to everyone. thanks for posting this work of yours..
    also same like my web usestips.com

    ReplyDelete
  7. How can I use a normal length header image on top of tabs instead the one that overlaps the tabs bar? Can u please help me?

    ReplyDelete
  8. Lovely layout, thanks! Do you know how to make the widgets in the sidebar shift down a little so that I can have the circle header larger?

    ReplyDelete
  9. Nevermind, love, I figured it out myself :) Thanks again for the great layout, I LOVE it!

    ReplyDelete
  10. Hello Leah,
    I love this template...
    anyway can i make the post not fully show on the main page....
    adding "read more"

    ReplyDelete
  11. Hello Leah,
    thank you for the free template... it was very nice and i'm currently used it for my blog...
    but... i just wondering how i can make the posts show in the home page became shorter.... i mean how can i add "read more" button instead of showing full post..
    thank you..
    jaja, MY

    ReplyDelete
    Replies
    1. Hi Fariza, you can do that in the post editor itself. There's an icon that looks like a broken page (Insert jump break). :)

      Delete
© 2014 Color It YOU - Blog Design and Tips. Powered by Blogger.
Legal terms and disclaimers here.