I am extremely unfamiliar with php..my site is www.wdzine.com and im trying to insert an image where the title in the header ("wdzine - web design blog") is. im guessing i have to edit either the Page template.php, Main Index Template.php or the Header.php. Im using the template: Sleeper release 1.0 by Jason Sanzone thanks ahead!
Yep to edit the top it's header.php, although if you want to add an image, I guess it's going to be a header image, so you could add it as the background image inside the style.css instead. If we look inside style.css we see: /* ========== HEADER */ #header{ width:870px; height:89px; clear:both; background:url(images/hbg2.gif) left top repeat-x; position:relative; } This is the current background image for the header (the dark black) you could change this. Or you could set a background image to the body at the top of the page. Hmm but if you want a clickable header image, then you'll have to edit it inside header.php
Ok heres what my header.php looks like: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <!--[if IE 7]> <style type="text/css" media="screen"> #sidebar h2{ text-indent:-15px; } </style> <![endif]--> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_get_archives('type=monthly&format=link'); ?> <?php wp_head(); ?> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-4006937-3"; urchinTracker(); </script> </head> <body> <!-- wrapper start --> <div id="wrapper"> <!-- header start --> <div id="header"> <h1><a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h1> <?php include (TEMPLATEPATH . '/searchform.php'); ?> </div> <!-- header end --> <!-- container start --> <div class="clearfix" id="container"> PHP: Do you know what in there i should edit to change it to an image? It seems the script is using the title of the page (in normal HTML what would be <title></title>) and inserting it as a clickable image - apparently a COM/file. thanks for the help!
It kinda depends on what you want to do, and there are a few different ways you can go about it. If you want your entire header replaced by a single image (the easiest method) simply change the background image in your styles.css under header /* ========== HEADER */ #header{ width:870px; height:89px; clear:both; background:url(images/hbg2.gif) left top repeat-x; position:relative; } Code (markup): Then you can either A: Add a hidden H1 title by amending all of the header H1 with: visibility:hidden; what this will do is allow search engines to see your H1 (title) but visitors to only see your background image. It's basically an alternative, and more effective method of an "alt" function. With this method you won't have to change anything in your header.php, just in the css here's an example code (It's from your site, but you may have to tweak it a bit) /* ========== HEADER */ #header{ width:870px; height:89px; clear:both; background:#ffffff url(images/hbg2.gif); position:relative; } /* ========== LOGO */ #header h1 a{ visibility:hidden; } #header h1 a:hover{ visibility:hidden; } Code (markup): I added a color to your header background as well (right now I just put white as default, #ffffff, you can use this to match the background of your image, so the positioning doesn't have to be perfect...assuming you are using a solid color. Like I said, with this method you don't have to worry about messing with your header file, just do it in your stylesheet. Make a header image that is 870x89 and your good to go!
The easiest way is to just upload a new image named "hbg2.gif" to your image folder. Just make sure it is the same width and height as the original
haha done! final product= http://www.wdzine.com/ thanks so much! changing the visibility on the title...genius my only problem now is that it's not clickable
If you want a clickable header then you have to insert it as an image inside the HTML, so you can't have a background image clickable. So you would do something like: <a href="www.site.com" title="my site"> <img src="link2img.jpg" alt="desc of image" /> </a> Then inside the CSS you would define: header img { width: 800000px; height: blahpx; } Also add borders if you want and even change border color on hover.
do i insert the image (<a href="www.site.com" title="my site"> <img src="link2img.jpg" alt="desc of image" /> </a>) somewhere in the header.php? If thats true i have no idea where i would insert it!
ok, ive done that and ive changed the header to: /* ========== HEADER */ #header{ header img { width: 870px; height: 87px; } clear:both; position:relative; } It inserted the image but it's off a bit. Look at it here www.wdzine.com what am i doing wrong? thanks again
ive figured out my problem guys. my page still has my title "wdzine - webdesign blog" in the header, even though it is invisible..i know that because when i set my site title to nothing, everything fits in perfect. So now that we've narrowed down the problem, how can i keep my page title (for search engines), yet not have it display in my page?
Actually you can, as this example clearly demonstrates: http://www.pmob.co.uk/temp/headerreplacement3.htm