Adding a header image to Thematic: Unsolved Mystery

  • Resolved dhoa

    (@dhoa)


    15 years, 3 months ago

    Hey everyone,

    Curious about an aspect of this. I made the blog title into an image on style.css:

    #blog-title a {
background:url(https://www.aerismorpheme.com/wp-content/uploads/2009/12/banner.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: 940px;
height: 275px;
position:relative;
z-index:10;
}

    And it only shows the image on Safari.

    And my header.php looks like this:

    </div><!-- #header-->
<div id="header">
<?php thematic_header() ?>
</div><!-- #header-->

<?php thematic_belowheader(); ?>

<div id="main">

    Do I have to alter anything in the php file? Again, it works fine in Safari. Should the image be sourced from somewhere else? Any help would be appreciated. Oh, the site is https://www.aerismorpheme.com.

Viewing 10 replies - 1 through 10 (of 10 total)

  • well….why not put the banner.jpg into your actual theme’s folder?
    It should have an images folder right?

    background:url(https://www.aerismorpheme.com/wp-content/uploads/2009/12/banner.jpg) no-repeat top center;

    could then be
    background:url('images/banner.jpg') no-repeat top center;
    Dunno if that would fix anything

    your header.php file is calling to a thematic_header file I guess, which if the above doesn’t fix we may need to see

    Thread Starter dhoa

    (@dhoa)

    Thanks RV, I tried that but to no avail…

    Are you committed to having the background image on “#blog_title a”?

    I assigned a background image to the #header div on a thematic site, and it works great.

    #header {
    background-image: url(images/headerimage.jpg);
    }

    i dare say your image ‘banner.jpg’ is not where you think it is, or it is not an image.
    if i use ‘folk-magic.jpg’ in the same line, it shows in the header.

    please re-upload your banner.jpg and check double, that it is there and you can see it.
    try to enter https://www.aerismorpheme.com/wp-content/uploads/2009/12/banner.jpg into the browser, and you will see that it does not show your image ??

    btw: i couldn’t see any header in safari/pc

    Hey there. I recommend reading How To Modify WordPress Themes The Smart Way and looking through the The ThemeShaper Forums. There’s lots of info on how to easily do this—without editing any of the Thematic files.

    Thread Starter dhoa

    (@dhoa)

    @alchymyth: I see what you’re saying. And when I click on the URL https://www.aerismorpheme.com/wp-content/uploads/2009/12/banner.jpg I do see an image….(in Safari 4.0.4)
    But when I load that link into, say, firefox, I just see the link text.
    And @iandstewart–Ive gone through themeshaper, very good information…

    When I go into the FTP files and show the URL of the banner image it shows this:
    ftp://fishbowl42.com/wp-content/themes/thematic/images/banner.jpg
    But when I load it into a browser, it’s a 404 Not found.

    I’m so confused.

    Thread Starter dhoa

    (@dhoa)

    Does anyone have any ideas?….I’d be really grateful for any pointers.

    dhoa –

    Like alchymyth, I was able to pull an existing image that was already on your page and shove it into the header using firebug, but your ‘banner’ jpg doesn’t seem to be existent in the folder you’ve got it pointing to in the css file.

    to prove it works, just plug this in the css file under your #blog-title element and REMOVE it from the ‘#blog-title a’ area.

    background:transparent url(https://www.aerismorpheme.com/wp-content/uploads/2009/12/parad_pomeg.jpg) repeat scroll 0 0;

    once you see that it works, just replace the parad_pomeg with whatever pic you want, and remove the ‘repeat scroll’ properties

    the ONLY other thing I could think may be causing a problem is that you don’t have the image checked in with Dreamweaver (if you’re using dw for ftp) – depending on your settings and your server settings, it could be locked up and prevented from displaying. this has happened to me once before –

    good luck

    Thread Starter dhoa

    (@dhoa)

    Thanks everyone for your input. I ended up getting another theme (thematic power blog, worth every penny) and the issue just sort of went away.

    Try this for your header image. Using text-indent:-9000; can get you penalized in google rankings, its best to not try and hide text anywhere outside the renderable window. This method 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;
}

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Adding a header image to Thematic: Unsolved Mystery’ is closed to new replies.