Help with a Blogger template mod

Discussion in 'Web Design and Development' started by Stormyguy, Apr 24, 2006.

  1. Stormyguy macrumors regular

    Joined:
    Apr 15, 2002
    Location:
    UK (Sussex)
    #1
    Hi all

    I am trying (with NO success)! to adjust a standard Blogger.com provided template. It's just a plain template but I'd like to replace the header where the name of my blog and description goes with a .jpg graphic hosted on my own server.

    I can get the graphic to appear but I can't get it formatted properly - i.e. centred and the title and description of my blog insists on appearing over the top of it.

    It boils down to the fact that I know not enough about the code and have to admit defeat!

    If anyone has the right line of code for me to lob in I would be most grateful.

    Here is the basic template code. Note: I will post it from the top down as far as where the data for content and other stuff appears as I assume that it is not necessary. Of course if I am wroong there or you need anything else pls advise and I'll try and give you any required info.

    Also, I hope this is the best place for this post.... thanks in advance
    Danny


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title><$BlogPageTitle$></title>

    <$BlogMetaData$>

    <style type="text/css">
    /*
    -----------------------------------------------
    Blogger Template Style
    Name: Minima Black
    Designer: Douglas Bowman
    URL: www.stopdesign.com
    Date: 26 Feb 2004
    ----------------------------------------------- */


    body {
    background:#000;
    margin:0;
    padding:40px 20px;
    font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
    text-align:center;
    color:#ccc;
    font-size/* */:/**/small;
    font-size: /**/small;
    }
    a:link {
    color:#9ad;
    text-decoration:none;
    }
    a:visited {
    color:#a7a;
    text-decoration:none;
    }
    a:hover {
    color:#ad9;
    text-decoration:underline;
    }
    a img {
    border-width:0;
    }


    /* Header
    ----------------------------------------------- */
    @media all {
    #header {
    width:660px;
    margin:0 auto 10px;
    border:1px solid #333;
    }
    }
    @media handheld {
    #header {
    width:90%;
    }
    }
    #blog-title {
    margin:5px 5px 0;
    padding:20px 20px .25em;
    border:1px solid #222;
    border-width:1px 1px 0;
    font-size:200%;
    line-height:1.2em;
    color:#ccc;
    text-transform:uppercase;
    letter-spacing:.2em;
    }
    #blog-title a {
    color:#ccc;
    text-decoration:none;
    }
    #blog-title a:hover {
    color:#ad9;
    }
    #description {
    margin:0 5px 5px;
    padding:0 20px 20px;
    border:1px solid #222;
    border-width:0 1px 1px;
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#777;
    }
     
  2. steelphantom macrumors 6502a

    steelphantom

    Joined:
    Oct 15, 2005
    #2
    It would help if we could see what it looks like when you try to insert the new image into the header. A link to an example page would be preffered.

    Here's some CSS that might help:

    #header {
    background: url(yourimage.jpg) top center no-repeat;
    }

    Also, add this line in both the #blog-title and #description tags:

    display: none;

    That should cause both of those elements do disappear from view.
     
  3. Stormyguy thread starter macrumors regular

    Joined:
    Apr 15, 2002
    Location:
    UK (Sussex)
    #3
    Thankyou very much for the pointers steelphantom.

    I have managed to 'fiddle' it and get it to work - you put me on the right track with the code you sent and then I figured out it was the 'padding' that was then preventing my graphic from appearing - so at least I got the 2nd bit right all by myself :eek:

    Again, thankyou very very much for getting me sorted!

    Danny
     
  4. steelphantom macrumors 6502a

    steelphantom

    Joined:
    Oct 15, 2005
    #4
    No problem! Glad to hear you got everything working. :)
     

Share This Page