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 kckal » Wed Nov 04, 2009 1:38 am

Same result on my attempt as well. Did you follow instructions that followed in this discussion thread? Not sure what you need, or what your code says, but try out what was discussed. At the minimum, the thin line problem will change. Mine did :mrgreen:
kckal
I'm a regular
 
Posts: 7
Joined: Sun Sep 21, 2008 1:29 am

Re: Replacing Title/Header with an Image?

Postby Junj » Tue Nov 10, 2009 4:06 am

Hi,

I've tried to insert an image for the header or the main title for the page.
I've got a thin vertical line instead of an image.

I've tried to follow the instruction above @kc, but it didn't really work....

please perhaps someone make the instruction clearer for me?

Thanks
Junj
I'm a regular
 
Posts: 6
Joined: Mon Nov 09, 2009 11:59 pm

Re: Replacing Title/Header with an Image?

Postby wayne » Mon Nov 16, 2009 6:42 am

Did you work it out?
wayne
Site Admin
 
Posts: 727
Joined: Tue Apr 08, 2008 7:02 pm

Re: Replacing Title/Header with an Image?

Postby kanth » Thu Nov 26, 2009 8:08 pm

Hello .. I replaced the image as u suggested above ... It works fine in my chrome and mozilla but the whole banner is shifted to deep left making the banner half visible on page in Internet Explorer .. :( can u plsss help ? i' need this theme badly .. i'm in love with this theme since i saw :(
kanth
I'm new here
 
Posts: 2
Joined: Thu Nov 26, 2009 7:56 pm

Re: Replacing Title/Header with an Image?

Postby Oonie » Thu Nov 26, 2009 10:27 pm

I don't know if it's can help, but to replace the title and description by an image header in the picture-perfect theme, I did that :

In your page "style.css" :

Code: Select all
#welcomeheading
{

/*as say before by kckal */

width: 940px;
height: 40px;
display: block;
background: url(img/banner.png) no-repeat top center; /*put your own image adress*/

/*following code is already there, keep it*/
   
text-align: center;
position: absolute;
margin-top: 25px;
margin-left: 300px;
margin-right: 0;
}
 
/*following code is to hide the title and description without really hide them, because Google don't like the "display", so we put them far away */

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


And in your "header.php", if you want that your image still clickable (I'm not sure of the world, sorry I'm french) to go back on your home page :

Code: Select all
<div id="welcomeheading" <!-- ADD THIS FOLLOWING CODE --> onclick="location.href='http://yoursite';" 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>



I try on Firefox and Safari, it's ok, but I don't know for IE.
Sorry if there are some mistakes in my posts : I'm french. ^^
Oonie
Legend!
 
Posts: 48
Joined: Thu Nov 26, 2009 6:08 pm

Re: Replacing Title/Header with an Image?

Postby Junj » Thu Nov 26, 2009 11:53 pm

Wayne, Kc, Oonie, h0rserdude,

Thanks for your help!

For those who are still having trouble with replacing text with an image, what I've done is

Step 1. including an image in the [header.php] as h0serdude suggested. except I included my own image file name where it is says /images/banner.png>

Code: Select all
   
<div id="welcomeheading">
    <h1><a href="<?php bloginfo('url'); ?>/">
       <img src="/images/banner.png">
    <!--<?php    $replacethese = array('[',']');
          $replacewith = array('<span id="middleword">','</span>');
          echo str_replace($replacethese, $replacewith, get_bloginfo('title')); ?>-->
          </a></h1>
    </div>


and then the thin vertical strip came up.

Step 2. Creating a "space" or "frame" for the image to live in. You can do this by editing the stylesheet (style.css) as suggested by KC

Code: Select all
    #welcomeheading h1 a {
       width: 940px;
       height: 40px;
       display: block;
       background: url(img/HeaderImage.png) no-repeat top center;


What happened next for me was the image i had was too big for 940w by 40h. (again include your own image source where it says img/HeaderImage.png

so

Step 3. Edit the image and change the "frame size"

where you can customise the image height and width as you wish. I changed my height to 200 or something but I would stick to the width of 940px to fit with the theme.

I still had the vertical line on top of image, which was annoying so we used 'firebug' ( a plugin for firefox) to work out where that little line was coming from and deleted the code . or coded out by /* */

I think that was all we did.

It worked for Firefox, and Chrome, there is a thin horizontal line showing up in safari, and i dont have IE. I think PC users should just download Firefox...

anyway hope this helps.

junj
Junj
I'm a regular
 
Posts: 6
Joined: Mon Nov 09, 2009 11:59 pm

Re: Replacing Title/Header with an Image?

Postby kanth » Fri Nov 27, 2009 2:41 am

Thanks for all ur reply ... But i badly need it for IE .. In our country many people use IE still ... So plss somebody help .. I just want the header image to be in the center ..
kanth
I'm new here
 
Posts: 2
Joined: Thu Nov 26, 2009 7:56 pm

Re: Replacing Title/Header with an Image?

Postby Oonie » Fri Nov 27, 2009 3:54 pm

Sorry kanth, I have a Mac and I don't have IE... I search it on the web to download and try for you, but I don't find a version for Mac. :cry:
Sorry if there are some mistakes in my posts : I'm french. ^^
Oonie
Legend!
 
Posts: 48
Joined: Thu Nov 26, 2009 6:08 pm

Re: Replacing Title/Header with an Image?

Postby ksauer99 » Mon Dec 14, 2009 1:11 pm

I was able to successfully replace my title header with an image following junj's instructions however I now have a thin border around the image that I need to get rid of...... how do I do that???? Please help! I think it might have to do with the fact that the image links to the homepage
http://www.christiansburghillside.com/
ksauer99
Legend!
 
Posts: 16
Joined: Mon Nov 23, 2009 5:10 am

Re: Replacing Title/Header with an Image?

Postby JamCan » Thu Dec 24, 2009 3:26 am

Hi everyone, my first time trying to do anything like this. I feel like a dork!!

Here is my website using the picture perfect template:
http://www.getmaddancers.com


I hate the header and want to replace it with a custom logo that my son is doing in Corel. We are making the dimensions 940 X 200 (or whatever height works for this template). I have NO CLUE, even after reading the last 2 pages in here, how to do the code to make this custom header happen.

Here is what my header code looks like right now, untouched.


<div id="wrapper">

<div id="welcomeheading">
<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>

And here is what my CSS code looks like, untouched.

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

#welcomeheading {
text-align: center;
position: absolute;
margin-left: 300px;
margin-right: 0;


NOW, what I need is for someone to PLEASE just make this code what I need it to be so I can just paste it. Otherwise I have no idea how to change all this code to make it work. I really have zero experience with php code and don't even know where to start.

Can anyone help me please??? Thank you!!
JamCan
I'm new here
 
Posts: 2
Joined: Thu Dec 24, 2009 3:11 am

PreviousNext

Return to Advanced - Customising the theme