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
Rl,
Please, show me your code, for image header and tell me how did you do.
so I can help you,
oscar
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
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
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
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
When I try this all I get is:
Fatal error: Call to undefined function thm_bloginfo() in .../functions.php on line 32
You need to grab the latest SVN copy .. How to get the latest SVN copy of Thematic?
Chris
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
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
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.
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.
You must log in to post.
