WordPress.org

Forums

[resolved] embarrasing noob Q: how to add a header i've created! (22 posts)

  1. Chris777uk
    Member
    Posted 6 years ago #

    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

  2. Anonymous
    Unregistered
    Posted 6 years ago #

    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?

  3. Chris777uk
    Member
    Posted 6 years ago #

    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.

  4. skaufmann
    Member
    Posted 6 years ago #

    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.

  5. Anonymous
    Unregistered
    Posted 6 years ago #

    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.

  6. Chris777uk
    Member
    Posted 6 years ago #

    /*
    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

  7. Chris777uk
    Member
    Posted 6 years ago #

    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!

  8. skaufmann
    Member
    Posted 6 years ago #

    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.

  9. skaufmann
    Member
    Posted 6 years ago #

    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">

  10. Chris777uk
    Member
    Posted 6 years ago #

    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>
  11. skaufmann
    Member
    Posted 6 years ago #

    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.

  12. Chris777uk
    Member
    Posted 6 years ago #

    its in my wordpress theme's folder /images/banner.png :)

    man it hurts to be this noobish at this!

  13. skaufmann
    Member
    Posted 6 years ago #

    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.

  14. Chris777uk
    Member
    Posted 6 years ago #

    you star!!

    Thank you SO much , i really appreciate your time.

  15. skaufmann
    Member
    Posted 6 years ago #

    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>

  16. Chris777uk
    Member
    Posted 6 years ago #

    thanks mate

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

  17. Chris777uk
    Member
    Posted 6 years ago #

    im trying to use http://www.chrissayburn.com/wp-content/themes/UpstartBloggerMinim/ubminim/images/headertitle.png

    code is....

    <div id="container">
    <TABLE width=840px>
       <TR>
          <TD><img src="http://www.chrissayburn.com/wp-content/themes/UpstartBloggerMinim/ubminim/images/headertitle.png</TD>
       </TR>
    </TABLE></div>

    ??

  18. Roy
    Member
    Posted 6 years ago #

    close the image tag Chris! You have to 'end' the image address by closing with " and close the image tag with />, both after headertitle.png. And don't delete the </td> of course.

    That makes:

    <div id="container">
    <TABLE width=840px>
    <TR>
    <TD><img src="http://www.chrissayburn.com/wp-content/themes/UpstartBloggerMinim/ubminim/images/headertitle.png" /></TD>
    </TR>
    </TABLE></div>

  19. Chris777uk
    Member
    Posted 6 years ago #

    lol oops!! :D

    thanks i'll give it a try (hides)

  20. Chris777uk
    Member
    Posted 6 years ago #

    i remember how i cocked it up now I tried to align the image to the right! (i cant even do that!) sigh

  21. Roy
    Member
    Posted 6 years ago #

    not sure, but can't you just add align="right" between headertitle.png and the closing /> ?

  22. Chris777uk
    Member
    Posted 6 years ago #

    thats the one thanks mate, i really appreciate your time!

Topic Closed

This topic has been closed to new replies.

About this Topic