ThemeShaper Forums » Thematic

[closed]

How do I add a header image?

(71 posts)
  • Started 14 years ago by melemel
  • Latest reply from Danieliser
  • This topic is resolved
1 2 3

  1. Chris
    Moderator

    IE6 is the problem .. no real PNG Support .. you could try to use one of the fixes or live with using GIFs for IE6 only instead (doesn't look as good as PNGs)

    Cheers,

    Chris

    Posted 14 years ago #

  2. labriej
    Member

    Thanks, that clears it up. I upgraded to IE7 and all looks ok now. Phew, very relieved! :)

    Posted 14 years ago #

  3. froots
    Member

    Hi there,i used this code for my header but it seems the header's height increased after i load up my 180px x 940px banner. What seems to be the prob? I modified the existing style.css :

    #blog-title a {
    display:block; /* We do this so we can add a background image */
    text-indent:-9000px; /* Hides the text--but not from search engines */
    height: 180px; /* height of your logo, like 180px */
    width: 940px; /* width of your logo, like 940px */
    background:url(images/logo.gif) no-repeat top center; /* adds in the logo image */
    }

    #blog-description {
    color:#fff;
    }

    Posted 14 years ago #

  4. Chris
    Moderator

    Hey,

    there's nothing wrong with your code .. let's do some math:

    The regular #branding consists of blog-title and blog-description. That means:

    40px (blog-title) + 22px (blog-description) + 88px (#branding padding-top) + 44px (#branding padding-bottom) = 194px (height)

    Now you exchange the blog-title against your picture:

    180px (picture) + 22px (blog-description) + 88px (#branding padding-top) + 44px (#branding padding-bottom) = 334px (height)

    It's obvious that you get an increased height for your header :)

    If you want to decrease the height of your header you need to decrease padding-top and / or padding-bottom for #branding or decrease the height of your picture.

    Install FireFox plus the Firebug Addon to see the layout of an element and / or change settings on the fly.

    Cheers,

    Chris

    Posted 14 years ago #

  5. froots
    Member

    Thanks for your tips chris. I'm not a coder and i'm really bad with codes. Before even replying to this thread i was fiddling with the codes since morning 9am till about 2pm in the afternoon. Now where and how can i reduce my header gaps? Thanks in advance to everyone.

    Posted 14 years ago #

  6. Chris
    Moderator

    Edit your child theme's style.css and add:

    #branding {
   padding-top: 88px;
   padding-bottom: 44px;
}

    Now you can adjust the padding to your needs.

    Cheers,

    Chris

    Posted 14 years ago #

  7. froots
    Member

    Hi chris, i'm not using the child theme's style.css but directly making the changes in the thematic's main style.css. How can i solve this then?

    Posted 14 years ago #

  8. Chris
    Moderator

    You should use a child theme 'cause otherwise your work is not protected against upcoming Thematic updates / upgrades.

    Take a look into /thematic/thematic-sample-child-theme and follow the readme.txt .. nearly everything in terms of design can be done by editing the child theme's style.css and / or its functions.php.

    Cheers,

    Chris

    Posted 14 years ago #

  9. labriej
    Member

    The other nice thing about using a child theme is that it makes things a lot easier when you are troubleshooting.

    Being a newbie at coding as well, I know that if something goes wrong, it is 99.999% sure it is because of something I did.

    Using style.css and functions.php makes it so I only have to look in two places for my mistakes. :)

    Posted 14 years ago #

  10. Mike_sa
    Member

    Hi

    I am also struggling to get a background image to display in my header. I have followed the various posts with no luck.

    I have created a child theme and placed my images folder inside the child theme.

    To the default.css I have added:

    background:transparent url(images/head-bg.jpg) no-repeat scroll center top;
    background-position: bottom;

    I am new to the thematic setup and am following along with the sitepoint wicked wordpress themes. I can change the background color with ease but as soon as I either use the above code or background-image: url(images/head-bg.jpg) nothing happens.

    I can see the background gradient being called in the header using firefox's firebug.

    I am not sure what I am doing wrong, the file is spelled correctly and the image folder is within my child theme. Adding a color background to the #header in the default.css works but adding a background image does not work.

    Help please:)

    P.S. I copied the child theme that comes with the thematic theme and also copied the library folder into the child theme and changed the the urls called in the style.css to the correct urls in the child theme.

    Posted 12 years ago #

  11. Danieliser
    Member

    For header images i have created a better method if you would like to check it out. It keeps all of the Thematic SEO Goodness by adding a span with link to the header below the blog title and description. This span is sized to 100% of the header div and will appear layered over your header text. You can read about it here.

    Here is the snippet

    Add this to functions.php

    // Add Header Image // Add Header Image
function thematic_logo_image() {
 echo '<a href="'.get_bloginfo('url').'" title="'.get_bloginfo('name').'" ><span id="header-image"></span></a>';
}
add_action('thematic_header','thematic_logo_image',6);

    And this to styles.css

    #branding {
 height: 187px; /* Change this to your images height */
 padding: 0;
 position:relative;
}
#header-image {
 background:url("images/header.jpg") no-repeat transparent; /* Change This to Your Image */
 height:100%;
 width:100%;
 position:absolute;
 cursor: pointer;
 top:0;
}
    Posted 12 years ago #

RSS feed for this topic

1 2 3

Topic Closed

This topic has been closed to new replies.