GeekLimit

Blogger Template Overhaul – Part 4 of 8

Geeky May 21st, 2006

19 Responses to “Blogger Template Overhaul – Part 4 of 8”

1. Blogger Template Overhaul - Part 5 of 8 at GeekLimit Says:
   May 31st, 2006 at 6:23 am

   [...] Part 1 – Introduction Part 2 – Template Code Part 3 – Design Part 4 – Headers Part 5 – Posts Part 6 – Comments Part 7 – The Sidebar Part 8 – The Footer [...]

2. Hanim Says:
   June 13th, 2006 at 4:48 am

   I still don’t understand how can I upload background image i.e: do I have to upload it somewhere like Photobucket for example?

   Thank you..

3. taoski Says:
   June 13th, 2006 at 5:50 am

   Yes.

   You will need to upload and store the file at somewhere like Flickr or Photobucket.

4. lloyd Says:
   June 20th, 2006 at 11:08 pm

   The last part of the tutorial above screws up my whole blog, The texts got bigger and the whole blog doesn’t fit to the window browser even if it’s already enlarged. I only want to have my own blog banner/header which will replace my blog title and at the same time be a clickable link to my own blog. And so far i can only post a background image but still the bland default title is still there.

   To further clarify what i really want here’s another explanation

   ex.: my current blog has no image banner/header and i only used the default title of my blog which i filled up in the settings options (e.g. flutopia unchartered)complete with the blog description, now this is what i want to happen, i want to get rid of that bland default title and replace it with something i have created from Photoshop a banner/header image of the same title in a much higher artistic level than the previous and i want it there instead of the previous and at the same time be clickable for the viewer that will link to the blog itself much like a refresh button or a homepage button.

   any help is very much appreciated thank you!!

5. lloyd Says:
   June 21st, 2006 at 2:49 am

   here’s my link flutopiaunchartered.blogspot.com

6. Dorothee Says:
   July 21st, 2006 at 4:01 am

   Hi!

   As of now, I have my header image in the html code. (http://dknit.blogspot.com)
   So far, so good. Now, what I’d like to have now is that my header thingy spreads across my blog’s width just like the blogger navbar, without any white paddings around it (just like at this blog: http://thegreenonion.blogspot.com)

   How and where can I do that?
   Thanks!

7. Taoski Says:
   July 22nd, 2006 at 4:04 am

   It looks to me that all you need to do is resize your graphic to make it wider.

   Depending on where you put the HTML code, you may also need to make the #header width wider too.

   The blog layout and design looks perfect to me though – nicely proportioned and cool colour scheme too.

8. chuichi Says:
   July 24th, 2006 at 2:12 am

   im trying to place a image that whole zone 1 zone 2 thing is confusing what exactly is that?

   thanks

9. Taoski Says:
   July 24th, 2006 at 3:16 pm

   I made the “zones thing” so it would not be too confusing for people!

   What are you trying to do exactly?

10. C.G. Says:
    August 16th, 2006 at 12:39 pm

    Hi,

    Thanks for dissecting the template code, it really helped.

    Great job!!

    Cheers,
    ~C.G.

11. chromium Says:
    August 18th, 2006 at 9:38 am

    I tried to code to replace the text-header box with a banner and it kinda worked
    It’s been the best solution that I have been able to find, but the header isn’t completely gone.
    I still have a smaller box above my banner with the windows icon for broken link

    Did I do something wrong or do I need to leave more stuff out ?

    http://www.chromium.be/

    thanks

12. Dorothee Says:
    August 19th, 2006 at 7:55 am

    Thanks for your comment, and thanks for the compliment!

    I found out how I can make my banner wider, but I still can’t move it up or down.
    My Zone 2 looks like this:

    /* Header
    ———————————————– */
    @media all {
    #header {
    width:897px;
    height:150px;

    margin:0 auto 10px;
    border:0px solid #ccc;
    }
    }
    @media handheld {
    #header {
    width:90%;
    }
    }

    #blog-title {
    margin:0px 0px 0;
    padding:1px 1px .25em;
    font-size:200%;
    line-height:1.2em;
    font-weight:normal;
    color:#666;
    text-transform:uppercase;
    letter-spacing:.2em;
    }
    #blog-title a {
    color:#666;
    text-decoration:none;
    }
    #blog-title a:hover {
    color:#c60;
    }
    #description {
    margin:0 1px 1px;
    padding:0 1px 1px;

    max-width:1000px;
    font:78%/1.4em Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#999;
    }

    and Zone 3 looks like this:

    
    

    Where can I change the banner’s position (e.g. make it go closer to the blogger navbar)?

    Thanks!

13. Annisa Says:
    August 23rd, 2006 at 11:31 pm

    I have the same problem as chromium. I’ve tried so many different ways and this way finally works to my liking but my image is still not displaying. Is there a problem? Please help. Thank you.

14. taoski Says:
    August 24th, 2006 at 1:16 am

    Chromium and Annisa – i think i just realised what the problem is…

    My code above has been corrupted.
    On Chromium’s site, a link has been inserted in the header code as follows:

    img xsrc=”http://i45.photobucket.com/albu….. etc

    But is should read src, not xsrc
    I think Geeklimit must have corrupted my entry – i will try to change it.

15. taoski Says:
    August 24th, 2006 at 1:36 am

    Dorothee:

    You can make it go a little nearer by changing this line:

    body #header {margin-top:50px;}

    Make the value smaller and the header jumps up the page slighty.
    However, it goes UNDER the NavBar, so don’t pull it back too much or it might look odd.

16. chromium Says:
    August 24th, 2006 at 2:44 am

    Hoozah !!! it worked.

    By deleting the link : img xsrc=”http://i45.photobucket.com/albu….. etc the problem is gone… the little “x” in front of the tag was really the culprit; if it hadn’t been there I would have seen my banner appear twice and now what to delete in the first place…but now I just had a broken link icon (due to the “x”) above my banner and didn’t know where to start

    Thanks

    http://www.chromium.be/

17. Annisa Says:
    August 24th, 2006 at 5:39 pm

    Taoski,

    I figured it out last night through a LONG search and I saw the problem with my very limited HTML knowledge. But I’m very grateful for your writings and responses. You’re “Blog Template Overhaul” has helped me a LOT! and I’m sure I’ll be coming back to it. Thank you for all of the effort you have poured into this. Blogger should seriously thank you because they don’t do so well with member support even though it is a free service. Anyway, thank you and keep up the amazing work.

18. Brandon Says:
    September 5th, 2006 at 12:20 am

    amazing tutorial. thank you so much…

    question: i’m trying to edit the kubrick 2 template in blogger… i went through the painstaking process of trying to add my image for a header via HTML code. (painstaking for me bc im just learning here)… it worked except it was published a little off to the right from where it should be… id like to try adding the header by editing the CSS code, but there is no “#header” in the code for K2. please advise.
    thanks!!!!

19. jessica Says:
    September 7th, 2006 at 9:58 am

    deperately need help in changing the header. i used a template from blogger. i need kindergarten instructions. please, please help. thank you so much

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website