WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Image over header? (18 posts)

  1. nitroglicerino
    Member
    Posted 6 years ago #

    Hi!

    I want to put an image (the logo of my blog - same size as header) over my blog header. I tried to put html code (img and img scr) in the top of index.php and header.php, but nothing worked.

    What do i need to do, and where?

    Thank you :)

  2. jberghem
    Member
    Posted 6 years ago #

    I just answered this in another post: http://wordpress.org/support/topic/171061

    Feel free to contact me should you still have difficulties after reading the other post.

  3. nitroglicerino
    Member
    Posted 6 years ago #

    Hi!

    Thank you for your help. I've been reading the topic you wrote, and I've been trying some things without any success. I don't want to replace the name of my blog. I've already hidden it. All I want is putting an image on the top of the blog, having the header below it (which is also another image, but it rotates). That "new image" will have the same size as the header. Should I also "write" code in the .php files, as I need to so in the style.css?

    Thanks for your support :)

  4. boober
    Member
    Posted 6 years ago #

    it would be the header.php that you need to alter. its pretty simple, but we cant help much unless you give more details. what code did you try to add, and where?

  5. nitroglicerino
    Member
    Posted 6 years ago #

    I just want to put an image at top of my header :)

  6. Indojepang
    Member
    Posted 6 years ago #

    make div before yours now, but if you don't know how, i really suggest you learn basic CSS first.
    search google for CSS tutorial

  7. nitroglicerino
    Member
    Posted 6 years ago #

    If I knew CSS, probably I wouldn't had asked here for help!

    Thank you anyway :)

  8. boober
    Member
    Posted 6 years ago #

    I just want to put an image at top of my header :)

    seriously? thats your reply? you expect help when you dont even give us the info we need?

    but we cant help much unless you give more details. what code did you try to add, and where?

    try again. give us your header code, something. or your question will just get ignored. asking the same thing over and over wont get you any better results.

  9. nitroglicerino
    Member
    Posted 6 years ago #

    This is my header.php:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head profile="http://gmpg.org/xfn/11">
    	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- deja esto para estadisticas -->
    	<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 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    	<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    	<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
    	<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico" type="image/x-icon" />
    	<link rel="icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico" type="image/x-icon" />
    <?php wp_head(); ?>
    </head>
    
    <body>
    
    <div id="outline">
    
    	<div id="header">
    		<div class="blogtitle">
    			<h1><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
    		</div>
    	</div> <!-- fin de #header -->
    
    	<div id="navbar">
    		<ul class="menu">
    			<li class="<?php if ( is_home() ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>"><?php _e('Principal'); ?></a></li>
    			<?php wp_list_pages('sort_column=id&depth=1&title_li='); ?>
    			<?php wp_register('<li>','</li>'); ?>
    		</ul>
    
    		<div class="searchbar">
    			<?php include (TEMPLATEPATH . '/searchform.php'); ?>
    		</div>
    	</div> <!-- fin de #navbar -->
    
    <div id="wrapper">
    
    <div id="content">

    And my style.css for the header:

    /**********************
    *   Header            *
    ***********************/
    
    #header {
    	width: 100%;
    	height: 219px;
    	background: transparent url(headers/rotate.php) left bottom;
    	}
    
    #header .blogtitle {
    	display:none;
    	width: auto;
    	height: 50px;
    	background: transparent url(images/rotate.php) left bottom;
    	}
    #header h1 {
    	display:none;
    	padding: 50px 0 0 50px;
    	}
    #header h1 a {
    	display:none;
    	color: #fff;
    	}
    
    	#navbar {
    		clear: both;
    		float: left;
    		width: 100%;
    		height: 31px;
    		background: transparent url(images/nav_bg.gif) repeat-x 0 0;
    		}
    
    	ul.menu {
    		float: left;
    		margin: 0;
    		padding: 0 15px;
    		list-style-type: none;
    		}
    	ul.menu li {
    		float: left;
    		}
    	ul.menu li a {
    		float: left;
    		display: block;
    		height: 28px;
    		padding: 3px 15px 0 15px;
    		line-height: 24px;
    		color: #fff;
    		}
    	ul.menu li a:link,
    	ul.menu li a:visited {
    		color: #fff;
    		background: none;
    		}
    	ul.menu li a:hover,
    	ul.menu li a:active {
    		color: #fff;
    		background: url(images/nav_hover.gif) no-repeat center top;
    		text-decoration: none;
    		}
    
    	ul.menu li.current_page_item a:link,
    	ul.menu li.current_page_item a:visited,
    	ul.menu li.current_page_item a:hover,
    	ul.menu li.current_page_item a:active {
    		color: #fff;
    		background: transparent url(images/nav_active.gif) no-repeat center bottom;
    		text-decoration: none;
    		}
    
    	.searchbar {
    		float: right;
    		width: 290px;
    		height: 31px;
    		margin: 0;
    		}
    	.searchform {
    		width: 290px;
    		height: 20px;
    		text-align: left;
    		}
    	input#s {
    		width: 265px;
    		height: 18px;
    		margin: 5px 0 0 1px !important;
    		margin: 4px 0 0 1px; /* Fuck IE */
    		padding: 1px 0 0 2px;
    		border: 1px solid #999;
    		background: #fff url(images/searchbg.gif) repeat-x 0 0;
    		}

    Thank you and sorry :)

  10. nitroglicerino
    Member
    Posted 6 years ago #

    By the way. My site is: http://www.nitroglicerino.com

  11. boober
    Member
    Posted 6 years ago #

    where and what have you tried adding?
    did you try something between these two?

    <div id="outline">
    
    	<div id="header">
  12. nitroglicerino
    Member
    Posted 6 years ago #

    Yes. I tried to put some code in that place. I put this code:

    <img scr="images/nitroglicerinologo.png" alt="nitroglicerino.com">

    but it didn't work... :(

  13. boober
    Member
    Posted 6 years ago #

    can you put that back in there so i can see what it does?
    you should self close that tag, by the way
    <img scr="images/nitroglicerinologo.png" alt="nitroglicerino.com" />

    also, are you trying to make this change through the theme editor in the wordpress admin? that may cause problems. and what browser are you using to try and see results? ive wrestled with problems like this before, only to finally figure out that my file path was wrong, but firefox just wasnt displaying any sort of visual broken image. safari shows a little question mark box, so you know when thats the problem.

  14. jberghem
    Member
    Posted 6 years ago #

    Maybe this will give you some insight.

    change this:

    #header {
    	width: 100%;
    	height: 219px;
    	background: transparent url(headers/rotate.php) left bottom;
    	}
    
    #header .blogtitle {
    	display:none;
    	width: auto;
    	height: 50px;
    	background: transparent url(images/rotate.php) left bottom;
    	}
    #header h1 {
    	display:none;
    	padding: 50px 0 0 50px;
    	}
    #header h1 a {
    	display:none;
    	color: #fff;
    	}

    into this:

    #header {
    	width: 955px;
    	height: 219px;
    	background: transparent url(headers/rotate.php) left bottom;
            position: relative;
    	}
    
    #header h1 {
    	position: absolute;
    	text-indent: -9999px;
     	width: 955px;
    	height: 219px;
    	background: url(images/nitroglicerinologo.png)  no-repeat;
    	}

    If this doesn't help let me know.

  15. boober
    Member
    Posted 6 years ago #

    jberghem that doesnt make any sense. that will put the image inside of the header, covering the rotating header image. if i understood correctly, he wants another image ABOVE his current header image.
    like this
    NEW IMAGE
    CURRENT IMAGE

  16. jberghem
    Member
    Posted 6 years ago #

    Sorry my bad

    He means above instead of over

    Any way it looks like he solved the problem.

  17. microinf
    Member
    Posted 5 years ago #

    hi, i've been looking at this post, and i solve the header image problem, but i have another mistake...

    is there any way to make this navbar show in only one line?

    http://www.eldiariodeazul.com.ar

    thanks to all

  18. jocha
    Member
    Posted 5 years ago #

    Hi, this is my first post. I´m new in the world of WordPress and I have a problem with the header.
    The Problem is this: I took the kubrickheader.jpg and opened it on Photoshop. I put an image over it, which have the same size as the blue part of Kubrick header. After that, I rename the image and insert it in the same folder where the kubricheader.jpg is. I open Stylesheet (style.css) and change the header´s part
    #header {
    background: #73a0c5 url('images/XXXX.jpg') no-repeat bottom center;
    }

    When i reload my page, i only see my new header in Safari, not in any another explorer.
    But the real problem comes that when i put the original header again (kubrickheader.jpg). I see this header in all the explorers.
    What am I doing wrong?
    my site is: http://www.snowbolg.com.ar
    Awaiting for any reply
    Thank you very much

Topic Closed

This topic has been closed to new replies.

About this Topic