WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Grr - Header Image (10 posts)

  1. letricoteuse
    Member
    Posted 7 years ago #

    I want to use this image ( http://img.photobucket.com/albums/v22/moontheloon/knittingdailytop.png ) as my main header image, but I don't know the CSS code for it. Somebody please help!

  2. intricateartist
    Member
    Posted 7 years ago #

    It looks like your image should go in the header div in your themes stylesheet:

    #header {
    background:#fff url('http://img.photobucket.com/albums/v22/moontheloon/header.png') no-repeat bottom;
    height:183px;
    width:760px;
    border:#fc9 0 solid;
    margin:0 auto;
    padding:0;
    }

    Replace that URL and see if that works for you. :)

  3. letricoteuse
    Member
    Posted 7 years ago #

    I have used that code, but it doesn't work. This is what my header codes look like (click on it)

    http://img.photobucket.com/albums/v22/moontheloon/codes.png

  4. intricateartist
    Member
    Posted 7 years ago #

    In your theme stylesheet, look for the header div that I showed above. That code is in your stylesheet.

    Replace the url that is looking for header.png image with your image, knittingdailytop.png

  5. letricoteuse
    Member
    Posted 7 years ago #

    But my codes are written like this:

    <!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">
    <head profile="http://gmpg.org/xfn/1">
    	<title>
    		<?php if (is_404())
    			_e('Error 404 - Not Found &raquo; ');
    		elseif (is_search())
    		{
    			_e('Search Results for ');
    			echo '“'.$s.'” &raquo; ';
    		}
    		else
    			wp_title(' ');
    
    		if(wp_title(' ', false)) echo ' &raquo; ';
    		bloginfo('name'); ?>
    	</title>
    
    	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
    	<meta name="author" content="Ajay D'Souza" />
    	<style type="text/css" media="screen">
    		@import url( <?php bloginfo('stylesheet_url'); ?> );
    	</style>
    	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    	<?php wp_get_archives('type=monthly&format=link'); ?>
    	<link rel="shortcut icon" href="<?php bloginfo('url'); ?>/favicon.ico" />
    	<?php wp_head(); ?>
    </head>
    
    <body>
    <div id="rap">
    <div id="header">
    	<ul id="topnav">
    		<li><a href="<?php bloginfo('url'); ?>" id="navHome" title="Posted Recently" accesskey="h">Home</a> |
    		<li><a href="/?page_id=6/" id="navAbout" title="About the Author" accesskey="a">About</a> |
    				<li><a href="/?page_id=5/" id="navLinks" title="Recommended Links" accesskey="l">Links</a>
    
    	</ul>
    	<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
    	<div id="desc"><?php bloginfo('description');?></div>
    </div>
  6. intricateartist
    Member
    Posted 7 years ago #

    That is your header.php file.

    In your theme files, look for Stylesheet.

    That's where you'll find the #header information that calls to the image.

  7. letricoteuse
    Member
    Posted 7 years ago #

    I have the #header codes filled in with the correct address but the header area just shows up blank (see: http://www.letricoteuse.net/)

  8. intricateartist
    Member
    Posted 7 years ago #

    This is the div id header in your header.php file:

    <div id="header">
    	<ul id="topnav">
    
    		<li><a href="http://www.letricoteuse.net" id="navHome" title="Posted Recently" accesskey="h">Home</a> |
    		<li><a href="/?page_id=6/" id="navAbout" title="About the Author" accesskey="a">About</a> |
    				<li><a href="/?page_id=5/" id="navLinks" title="Recommended Links" accesskey="l">Links</a>
    
    	</ul>
    	<h1><a href="http://www.letricoteuse.net" title="Le Tricoteuse">Le Tricoteuse</a></h1>
    	<div id="desc"></div>
    </div>

    That is all wrapped in a header div tag. The header div tag is defined in the stylesheet. This is how your deader div is defined in your stylesheet:

    #header {
    background:#fff url('http://img.photobucket.com/albums/v22/moontheloon/header.png') no-repeat bottom;
    height:183px;
    width:760px;
    border:#fc9 0 solid;
    margin:0 auto;
    padding:0;
    }

    It is looking for header.png image in that photobucket location. That needs to change in order for your image to appear, unless you just want to rename the image you want to have as your header (knittingdailytop.png) to "header.png". That may actually be easier.

  9. letricoteuse
    Member
    Posted 7 years ago #

    AH! Thank you so much!!!!

  10. intricateartist
    Member
    Posted 7 years ago #

    Ahh there it is. :)

    (don't forget to mark resolved on your topic.)

Topic Closed

This topic has been closed to new replies.

About this Topic