WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] embarrasing noob Q: how to add a header i’ve created!

[Resolved] embarrasing noob Q: how to add a header i’ve created!

  • hi all,

    i’ve recently changed my theme and its not got a header as such just an image in the sidebar (which im managed to change)

    all the other themes have had a header before, ive designed an image that I want at the top of the site to the right above the posts …. (www.chrissayburn.com)

    i’ve tried copying and pasting code from other templates but cant it to show,

    im sure its simple for you skilled people out there!

    chris

Viewing 15 replies - 1 through 15 (of 21 total)
  • Does your theme include a header as a default?
    or are you trying to place a header in a theme that does not currently have one?

    hi shadoukat

    thanks for the quick reply, it has a sidebar header but not a top of the site header – see
    http://www.chrissayburn.com

    thanks

    chris.

    Check your index.php and see if the first line contains <?php get_header();?>

    This tag calls the file in your template called header.php. If your site doesn’t have one or either of these then you need to add the tag in your index.php and create the header.php file.

    It’s likely you have both of these as the header.php page is where all you CSS, META data and the like goes. In this file you will notice the last HTML tag or almost last will be <BODY>. After this tag you should be able to create a table the width you want and insert your header image there.

    Use something like this. You may need to further optimize it as this is the most basic table code:

    <TABLE>
       <TR>
          <TD>(Insert your image tag here)</TD>
       </TR>
    <TABLE>

    This will insert your header image at the very top of every page in your template.

    Since you are new to wordpress, I suggest you try to choose a theme that currently has a regular header and you can upload your personalized header to overwrite the default one without having to change your code.

    If you wish to still use the theme you currently have, can you please post the current code that you have in your style.php? it will be easier to see what you have going on and how to help you.

    /*
    Theme Name: Upstart Blogger Minim
    Theme URI: http://www.upstartblogger.com
    Description: A minimalist, <b>widgetized</b> theme from <a href="http://www.upstartblogger.com/" title="Upstart Blogger">Upstart Blogger</a>.
    Author: Robert Ellis
    Author URI: http://www.upstartblogger.com
    Version: 1.0
    License: Creative Commons Attribution-Share Alike 3.0 (http://creativecommons.org/licenses/by-sa/3.0/). Feel free to make any changes, but please keep a link back to Upstart Blogger in your sidebar or footer.
    */
    
    body {
    	background-color: #fff;
    	font-family: Arial, Helvetica, Geneva, sans-serif;
    	padding: 20px;
    	font-size: .88em;
    	line-height: 1.5em;
    	color: #444444;
    }
    
    #container {
    	width: 840px;
    }
    
    #sidebar {
    	width: 336px;
    	float: leftt;
    	font-size: .8em;
    	line-height: 1.4em;
    	padding: 0 10px 25px 0;
    	}
    
    #sidebarleft {
    	width:180px;
    	float: left;
    }
    
    #sidebarright {
    	width: 125px;
    	float: right;
    }
    
    #footer {
    	width:180px;
    	float: left;
    	clear: both;
    	font-size: .64em;
    }
    
    #entries {
    	width: 468px;
    	float: right;
    	}
    
    .post {
    	margin-bottom: 1em;
    }
    
    a {
    	color: #6699cc;
    	text-decoration: none;
    	font-weight: bold;
    
    }
    
    a:link h3 {
    	color: #951400;
    	border: none;
    }
    
    a:link img {
    	border: none;
    }
    
    ul {
    	list-style: none;
    	margin-left: 0px;
    	padding-left: 0px;
    	margin-top: 0px;
    }
    
    li.linkcat {
    	list-style-type: none;
    }
    
    img {
    	border: none;
    }
    
    .imgleft {
    	float:left;
    	margin-right: 10px;
    	margin-bottom: 10px;
    }
    
    .imgright {
    	float: right;
    	margin-left: 10px;
    	margin-bottom: 10px;
    }
    
    img.frame {
    	padding: 2px;
    	border: solid 1px #DEE4E5;
    }
    
    h1 {
    	font-size: 2em;
    	line-height: 1em;
    	text-transform: uppercase;
    }
    
    .title {
    	border-bottom: 1px solid silver;
    }
    
    h3 {
    	font-weight: bold;
    	font-size: 1.2em;
    	text-transform: uppercase;
    	margin-bottom: .2em;
    	margin-top: 2em;
    	letter-spacing: .2em;
    	color: #34353e;
    	border-bottom: 1px solid silver;
    }
    
    .post h3 {
    	border-bottom: none;
    	letter-spacing: normal;
    	margin-bottom: -.5em;
    }
    
    blockquote {
    	background-color: #f3f3f3;
    	padding: 10px;
    	margin: 15px 0;
    }
    
    /* Begin Comments*/
    
    .comments_tiny {
    	color: #b8b8b8;
    	border-bottom: 1px solid silver;
    }
    
    .alt {
    	margin: 0;
    	padding: 10px;
    	background: #f3f3f3;
    }
    
    .commentlist {
    	margin-top: 0px;
    
    }
    
    .commentlist li {
    	margin: 5px 0 0 0px;
    
    }
    
    .commentlist p {
    	margin: 10px 5px 10px 0;
    }
    
    #commentform p {
    	margin: 5px 0;
    }
    
    .nocomments {
    	text-align: center;
    	margin: 0;
    	padding: 0;
    }
    
    .commentmetadata {
    	margin: 0;
    	display: block;
    }
    
    li.comment {
    	font-weight: bold;
    	padding: 10px;
    	list-style: none;
    }
    
    .commentlist p {
    	font-weight: normal;
    	line-height: 1.5em;
    	text-transform: none;
    }
    
    #commentform {
    	margin-top: 30px;
    }
    
    .commentmetadata {
    	font-weight: normal;
    }
    
    small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
    	color: #777;
    }
    
    .content {
    	margin-bottom: 25px;
    	padding-left: 5px;
    	font-weight: normal;
    }
    
    .commentbox {
    	width: 100%;
    	height: 100px;
    }
    
    /* End Comments */

    thanks

    aldo thanks skaufmann, it does have the <?php get_header();?> in the index, and there is a header.php, when i tried to add your code after the <body> end section it just came up with the written code on the site, did i link the image wrong? i did url=(images/banner.png)

    sorry to be such a noob, ive managed to do everything else!

    Your code should look something like this:

    <TABLE>
       <TR>
          <TD><img src="http://www.chrissayburn.com/image.jpg"></TD>
       </TR>
    <TABLE>

    Of course the URL to the image needs to be set properly.

    Also it looks like your theme is using CSS to lay your site out which is why it’s getting stuffed to the left. Possibly try the following:

    <TABLE width=840px>
       <TR>
          <TD><img src="http://www.chrissayburn.com/image.jpg"></TD>
       </TR>
    <TABLE>

    This should tell the table to be a certain width and span across the whole top keeping everything else below.

    Also check to see if <div id="container"> is in your header. You’ll want to add the TABLE code I gave you after <div id="container">

    thanks again for the help… its stil not showing any image
    am i right in thinking you do mean post the code in the header.php?

    here is my code…

    <!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" />
    <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_head(); ?>
    </head>
    <body>
    <TABLE width=840px>
       <TR>
          <TD><img src="/images/banner.png"></TD>
       </TR>
    <TABLE>

    There is no image at this location.
    http://www.chrissayburn.com/images/banner.png

    Navigating to this image should give you the image, instead it a broken URL.

    its in my wordpress theme’s folder /images/banner.png 🙂

    man it hurts to be this noobish at this!

    Then this is the path you want to use:
    http://www.chrissayburn.com/wp-content/themes/UpstartBloggerMinim/ubminim/images/banner.png

    You’ll also want to make sure you use full path to the image.

    you star!!

    Thank you SO much , i really appreciate your time.

    NP. I just noticed something. If you go to http://www.chrissayburn.com/?p=102 your layout is messed up.

    Looking at your code I see you added <div id="container"> before the TABLE code but you need to close it after the </TABLE> tag.

    Replace </TABLE> with </TABLE></div>

    thanks mate

    just one thing the header has now suddenly vanished from the site?

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘[Resolved] embarrasing noob Q: how to add a header i’ve created!’ is closed to new replies.