Replacing Title/Header with an Image?

Any questions about styling and customising the layout, changing the number of columns, changing the number of sliding images and so on.

Re: Replacing Title/Header with an Image?

Postby mleigh33 » Mon Jan 04, 2010 2:20 am

I'm struggling with this too. I've tried all the tricks on this site. I can't get my image to even show up. It comes up as a little empty link. Am I putting my image in the wrong folder? Is there a special way I should be referencing the image in the code?

My site is at www.creativeinsomniac.com. I'm on WP 2.8. And yes, I'm a complete novice, but I'm getting better!

Thanks,
Michelle
mleigh33
I'm new here
 
Posts: 1
Joined: Sun Jan 03, 2010 7:52 pm

Re: Replacing Title/Header with an Image?

Postby JamCan » Sat Jan 09, 2010 5:38 am

LOL Michelle I guess we can be novices together.
JamCan
I'm new here
 
Posts: 2
Joined: Thu Dec 24, 2009 3:11 am

Re: Replacing Title/Header with an Image?

Postby wayne » Sat Jan 09, 2010 10:39 pm

Michelle you seem to have worked it out? How about letting us know what the problem was to help others who might have the same problem you had.
wayne
Site Admin
 
Posts: 727
Joined: Tue Apr 08, 2008 7:02 pm

Re: Replacing Title/Header with an Image?

Postby infinite » Wed Feb 10, 2010 2:04 am

I'm in the same boat, tried literally EVERYTHING with my sliding door theme, but still coming up as an empty link. I copied and pasted the code for both header and style exactly, and replaced the file name as my own, but on my PC it comes up as an empty link, and on mac it comes up as the vertical line.
I hope I am not beating a dead horse here but... HELP please!
infinite
I'm new here
 
Posts: 3
Joined: Thu Feb 04, 2010 12:02 am

Re: Replacing Title/Header with an Image?

Postby fanboi » Mon Mar 01, 2010 3:33 am

OI've been able to use the code in this threa to get the header image installed and clickable (returns to home page), but name of blog still appears above the image.

code from my stylesheet.php
Code: Select all
#welcomeheading a {


   font: 40pt "Trebuchet MS", "Lucida Grande", Lucida, Vernada, sans-serif;
   padding-top: 10px;
   color: #fff;
   text-decoration: none;
}

#welcomeheading {
width: 944px;
height: 64px;
display: block;
background: url(img/logo.png) no-repeat top center;
      text-align: center;
}

#welcomeheading h1 a {
position: absolute;
left: -5000px;
top: -5000px;
text-indent: -5000px;}

#welcomeheading a:hover {
   color: #ddd;



code from my header.php

Code: Select all
<div id="welcomeheading" onclick="location.href='http://pxlforge.com/wordpress';" style="cursor: pointer;" title="Back home (for example and if you want one !)">

<h1><a href="<?php bloginfo('url'); ?>/">

<?php    $replacethese = array('[',']');
      $replacewith = array('<span id="middleword">','</span>');
      echo str_replace($replacethese, $replacewith, get_bloginfo('title')); ?>
      </a></h1>
      <div id="description"><?php bloginfo('description'); ?></div>
</div>



any suggestions as to what I've done wrong?

UNRELATED QUESTION...currently my URL appears as page title (in tab) what do I need to do for a page title tage to show up instead?
fanboi
I'm new here
 
Posts: 1
Joined: Mon Mar 01, 2010 3:27 am

Re: Replacing Title/Header with an Image?

Postby wayne » Mon Mar 01, 2010 11:01 pm

You can replace all of this:

Code: Select all
<div id="welcomeheading" onclick="location.href='http://pxlforge.com/wordpress';" style="cursor: pointer;" title="Back home (for example and if you want one !)">

<h1><a href="<?php bloginfo('url'); ?>/">

<?php    $replacethese = array('[',']');
      $replacewith = array('<span id="middleword">','</span>');
      echo str_replace($replacethese, $replacewith, get_bloginfo('title')); ?>
      </a></h1>
      <div id="description"><?php bloginfo('description'); ?></div>
</div>


with this:

Code: Select all
<div id="welcomeheading"> </div>


add this in too if you want the description:

Code: Select all
<div id="description"><?php bloginfo('description'); ?></div>
wayne
Site Admin
 
Posts: 727
Joined: Tue Apr 08, 2008 7:02 pm

Re: Replacing Title/Header with an Image?

Postby cgarvey » Sat Mar 06, 2010 3:31 pm

So, where is that vertical line coming from and how can I get rid if it??
cgarvey
I'm new here
 
Posts: 4
Joined: Fri Feb 19, 2010 8:28 pm

Re: Replacing Title/Header with an Image?

Postby ysmael » Mon Mar 08, 2010 2:00 pm

i got everything working. versions of the PhP was updated (in my case) to make it compatible with the theme. (thanks to my host :D )

with the header: thanks to Junj (i followed your instructions including installing firebug addon for firefox) but i also installed MeasureIt (add on of firefox) to get exact measurements of my header that i want to have before making one with photoshop. i opted for the delete instead of the /**/ that you posted. works fine and better.

the real trick here is do all of jjhun's instructions. on the 3rd step, delete what you inserted the first time in your header.php to get rid of the white vertical line. dont forget to press update each and every step.

thanks to all of you :D

http://www.eyedigitalphotography.net
ysmael
I'm new here
 
Posts: 1
Joined: Mon Mar 08, 2010 1:46 pm

Re: Replacing Title/Header with an Image?

Postby 4cwealth » Sun Apr 18, 2010 6:10 pm

Re: thin line around image in header

Hello,

I am having the same problem with my logo which I have inserted into the header. Where do I deactivate the thin box around my logo (or at least change the colour to FFF/white)?

website in progress: www.4cwealth.ca

Thanks,

Marko
4cwealth
I'm a regular
 
Posts: 8
Joined: Mon Mar 15, 2010 2:57 am

Re: Replacing Title/Header with an Image?

Postby JohnN » Sun May 09, 2010 7:04 am

Hi guys, thanks to all the others that posted here, I used your combined info and made a work around that works for me. I thought that I inturn should share my experience with this Picture Perfect theme and hope that if it helps anyone else.

I wanted to use a header graphic in place of the normal Text Header and Description, had a lot of trial and error so this is what I have now and still tweaking.

Open the header.php using Notepad as the text editor. Add in the full url img src to your header graphic like beow. <img src etc etc.....

<<div id="wrapper"><div id="welcomeheading"><h1><a href="<?php bloginfo('url'); ?>/">
/*add in full file path to image looks like the following but of course you substitute your domain and image and size*/<img src="http://www.wedding-manchester.co.uk/images/header14.jpg" alt="wedding manchester header" height="120px" width="934px" /><?php $replacethese = array('[',']'); $replacewith = array('<span id="middleword">','</span>'); echo str_replace($replacethese, $replacewith, get_bloginfo('title')); ?> </a></h1> <div id="description"><?php bloginfo('description'); ?></div></div>

The image depth I use displaces the blog title and descrption downwards and over the content, because it's too deep for the inbuilt space. So, in the css style sheet (I opened mine with a free html editor Kompozer) I amended the font sizes to zero so they do not show, I'm not sure if any SEO advantage is ruined by the zero, maybe someone good at SEO could enlighten me on that?

/*font size to 0px*/

#welcomeheading a {
margin-bottom: 10px;
padding-bottom: 15px;
font: 0pt "Trebuchet MS", "Lucida Grande", Lucida, Vernada, sans-serif;
padding-top: 30px;
color: #fff;
text-decoration: none;

#description {
text-align: center;
font: normal 0px Verdana, Helvetica, Sans-serif;
color: #fff;
padding-bottom: 5px;
padding-top: 10px;

Then because my header graphic is too deep I had to drop the content and sidebar down a bit so I increased the padding-top value, I can amend more or less to suit but of course both padding-top vaues should be = to each other.

#content {
margin-left: 300px;
margin-right: 240px;
float: none;
padding-top: 150px;
display: block;
}

#sidebar {
width: 180px;
float: right;
text-align: left;
margin-right: 20pt;
padding-top: 150px;
display: inline;
}


THAT'S IT - I hope it helps.

Regards

John
It's a great them isn't it!
JohnN
I'm a regular
 
Posts: 7
Joined: Thu May 06, 2010 1:38 pm

PreviousNext

Return to Advanced - Customising the theme