ThemeShaper Forums » Thematic

[closed]

Header Image

(12 posts)
  • Started 10 years ago by rl
  • Latest reply from em hr
  • This topic is resolved
  1. rl
    Member

    Hello,

    I was wondering if anyone can help me. I could like to add an image in the header on www.eco-tourism.tv

    I have had a search through the previous postings and have come across several answers on how to add a header image. For some reason I must be doing something wrong as I can't seem to add an image in the header (I have no real experience in terms of coding etc).

    Any thoughts or hints would be very welcome!

    Many thanks,

    All the best,
    Rich

    Posted 10 years ago #
  2. Rl,
    Please, show me your code, for image header and tell me how did you do.

    so I can help you,

    oscar

    Posted 10 years ago #
  3. rl
    Member

    Hi Oscar,

    I added the following to the very bottom of the css file in wordpress.

    Ecotourism{
    background:url(http://www.eco-tourism.tv/wp-content/uploads/2009/10/ecotourism.jpg) no-repeat top left;
    display:block;
    text-indent:-9000px;
    width: 391px;
    height: 210px;
    }

    Thanks for getting back to me.
    Rich

    Posted 10 years ago #
  4. Rich,
    Put the code below in your style.css , into the /wp-content/themes/your-child-theme

    #header{
    background:url(images/ecotourism.jpg) no-repeat top left;
    display:block;
    text-indent:-9000px;
    width: 391px;
    height: 210px;
    }

    Now, create folder: images

    /wp-content/themes/your-child-theme/images

    put there your ecoturism.jpg

    should be fine

    oscar

    Posted 10 years ago #
  5. rl
    Member

    Hi Oscar,

    I have just tried the above. But for some reason it didn't seem to work. Many thanks for your time. I was wondering in the css file in the child theme where should i cut and paste the code too (I've tried pasting at the bottom and near the top).

    Rich

    Posted 10 years ago #
  6. rl-

    The css you're adding should go in your child theme's style.css anywhere under the last @import

    Are you trying to replace the blog-title "Ecotourism" text with an image? If so you'd need apply your css to #branding not #header. Text indenting #header will shift your navigation off the page. Also using a text indent of -9000px could lead to accessability issues if the image doesn't load.

    I prefer doing this with Thierry Image Placement. Follow the link for the full descrpition.

    With thematic you'd have to first pull the blog title text out of the anchor. In your child theme's functions.php put:

    function remove_thematic_header_actions(){
    	remove_action('thematic_header','thematic_blogtitle',3);
    }
    add_action('init','remove_thematic_header_actions');
    
    function tip_child_blogtitle() { ?>
        <div id="blog-title">
        	<span>
        		<a href="<?php thm_bloginfo('url', TRUE) ?>/" title="<?php thm_bloginfo('name', TRUE) ?>" rel="home"></a>
        		<?php thm_bloginfo('name', TRUE) ?>
        	</span>
        </div>
        <?php }
    add_action('thematic_header','tip_child_blogtitle',3);

    In your child theme's style.css put:

    #blog-title span {
    position:relative;
    }
    #blog-title span a {
    background:	; /* enter the path to your image */
    width:          ; /* enter the width of your image */
    height:         ; /* enter the approximate height of your image in ems */
    min-height:	; /* enter the min-height of your image in pixels */
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    }

    Good luck -Gene

    Posted 10 years ago #
  7. When I try this all I get is:
    Fatal error: Call to undefined function thm_bloginfo() in .../functions.php on line 32

    Posted 10 years ago #
  8. You need to grab the latest SVN copy .. How to get the latest SVN copy of Thematic?

    Chris

    Posted 10 years ago #
  9. stengl
    Member

    em hr,

    the Thierry Image Placement works like a charm. The only thing that "annoys" me is, that you see the text for a short second before the image is displayed (on larger header images). Is there any way to avoid this switch/flickering? Kinda looks strange when you reload/visit a page for the first time.

    greetings

    Posted 10 years ago #
  10. Hi stengl,

    This is an annoyance of mine also. It really depends on the browser and whether refreshing the page reloads cached images or not. Safari is the real culprit loading images everytime you hit the reload icon in the url textfield.

    If it's any consolation constantly clicking reload is not typical user behavior although it is typical site owner/developer behavior. If this is a real bother you could implement an image preloading script.

    -Gene

    Posted 10 years ago #
  11. stengl
    Member

    Hi Gene,

    You may be right about refresh-trigger-happy developers. Though it is an annoyance for any first-time visitor too. As I expect lots of tech-savvy first-time visitors on the site I'm building I'm about to ditch the accessability for design-beauty ;)

    The script would be an option, but I don't know how to do that.

    Posted 10 years ago #
  12. FYI: moving forward the function thm_bloginfo() has been deprecated using it will cause an error. Using get_bloginfo() will work fine with minor adjustments in it's place.

    Posted 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.