1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need help with editing a wordpress theme!

Discussion in 'HTML & Website Design' started by cscott5288, May 16, 2008.

0
  1. #1
    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!
     
    cscott5288, May 16, 2008 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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
     
    wd_2k6, May 16, 2008 IP
  3. cscott5288

    cscott5288 Active Member

    Messages:
    912
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #3
    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() ) { ?> &raquo; 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!
     
    cscott5288, May 16, 2008 IP
  4. fragin_bastich

    fragin_bastich Guest

    Messages:
    65
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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!
     
    fragin_bastich, May 16, 2008 IP
    cscott5288 likes this.
  5. amedia

    amedia Well-Known Member

    Messages:
    819
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    130
    #5
    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
     
    amedia, May 16, 2008 IP
    cscott5288 likes this.
  6. cscott5288

    cscott5288 Active Member

    Messages:
    912
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #6

    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 :(
     
    cscott5288, May 16, 2008 IP
  7. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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.
     
    wd_2k6, May 17, 2008 IP
  8. cscott5288

    cscott5288 Active Member

    Messages:
    912
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #8

    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!
     
    cscott5288, May 17, 2008 IP
  9. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Yes mate just insert it after the </h1>
     
    wd_2k6, May 17, 2008 IP
  10. cscott5288

    cscott5288 Active Member

    Messages:
    912
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #10
    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
     
    cscott5288, May 17, 2008 IP
  11. cscott5288

    cscott5288 Active Member

    Messages:
    912
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #11
    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?
     
    cscott5288, May 17, 2008 IP
  12. cscott5288

    cscott5288 Active Member

    Messages:
    912
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #12
    fixed it! had to delete h1 tag within header

    thanks again for all your help guys!
     
    cscott5288, May 17, 2008 IP
  13. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Actually you can, as this example clearly demonstrates: http://www.pmob.co.uk/temp/headerreplacement3.htm
     
    Dan Schulz, May 17, 2008 IP