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 radrich1 » Wed Jun 15, 2011 8:05 pm

after reading through the many posts on this topic many tell you what code to put in the style.css and or header.php but I cannot find any that tell you exactly where to paste the code or if you have to delete any code before pasting the codes found in these threads. Many of you have successfully added the logo in place of text but many of us keep asking where and how and I cannot find any answers that have helped. I have gone through a long trial and error of pasting code, deleting code etc. but it is not working.

this is what my style.css sheet has under header:

/* =Header
-------------------------------------------------------------- */


#header {
padding: 0;
}

#site-title {
font-size: 50px;
line-height: 36px;
width: 900px;
margin: 0;
text-align: center;



}
#site-title a {
font: 40pt "Trebuchet MS", "Lucida Grande", Lucida, Vernada, sans-serif;
color: #fff;
text-decoration: none;
}
#site-description {
font: normal 14px Verdana, Helvetica, Sans-serif;

text-align: center;
margin-bottom: 20px;
color: white;
}



/* This is the custom header image */
#branding img {
border-top: 100px solid #fff;
border-bottom: 1px solid #000;
clear: both;
display: block;
}



Do I have to delete some of this code and paste in the code that is listed in the threads. If so what do I delete? If not, then where in the style.css sheet do I paste the code?
radrich1
I'm new here
 
Posts: 2
Joined: Thu May 26, 2011 11:44 pm

Re: Replacing Title/Header with an Image?

Postby rivercom » Mon Jun 27, 2011 10:53 pm

I successfully inserted my image, and centered it. Thanks everyone for all helpful posts. It looks great!

But, unfortunately, now the horizontal lines in the sliding door headers have disappeared on my main posts page. They are still visible on all the other pages of my site, so I'm not sure what's wrong. Has anyone else had this problem?

http://www.jordanrivercommission.org

thanks!
rivercom
I'm new here
 
Posts: 2
Joined: Tue May 10, 2011 8:14 pm

Re: Replacing Title/Header with an Image?

Postby bleggo » Fri Jul 01, 2011 5:42 am

This is very frustrating. I too want to change the header to an image instead of plain text and I've read dozens of these posts but none of them describe what I see on my system. For example, the code-string "welcomeheading" is frequently mentioned and I just do not have that text in my file. How can I change it if the instructions here don't even vaguely match what I see?

I'm a newbie so maybe I'm missing something here but I've been using cPanel and File Manager to look at the style.css and header.php files in the ....\themes\sliding-door directory but those 2 simply do not reflect the code I see here pasted by various people. What's going on?
bleggo
I'm new here
 
Posts: 3
Joined: Sun Jun 26, 2011 2:24 am

Re: Replacing Title/Header with an Image?

Postby JordanT » Sat Jul 02, 2011 7:54 am

Allright here it is in the most simple terms possible...

in the header.php file... you will need to scroll down halfway.
there you will see the following bit of code....

<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding" role="banner">

<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
#(&(#*&$(*&#)(*&)#(*&$)(*#&$)(#*&$)#(*&$)(#*&$##
</span>
</<?php echo $heading_tag; ?>>


You will see actual code between <span> and </span> you need to delete that coding completely.

Now insert the follow code in between <span> and </span> replacing the location of the previous code...

<div align="center"><img src="wp-content/uploads/2011/07/banner.jpg" width="940" height="200"> </div>

this will center whatever image you plan on placing there.

now replace the part that is in bold below...with the URL of your image....

<div align="center"><img src="wp-content/uploads/2011/07/banner.jpg" width="640" height="194"> </div>

Once this is finished, be sure to change the width and height to match the size of the image.

<div align="center"><img src="wp-content/uploads/2011/07/mybanner.jpg" width="640" height="194"> </div>


So now your final code should look like this... the areas in BOLD you will have to replace with your own specific information.

<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding" role="banner">

<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
<div align="center"><img src="[b]wp-content/uploads/2011/07/banner.jpg" width="940" height="200"> </div>[/b]
</span>
</<?php echo $heading_tag; ?>>

Now hit update :P and refresh your browser and look at your website.
JordanT
I'm new here
 
Posts: 4
Joined: Fri Jul 01, 2011 9:30 am

Re: Replacing Title/Header with an Image?

Postby bleggo » Mon Jul 04, 2011 7:42 am

Jordan, first of all, thanks so much. Your instructions were simple and clear and unlike all the others I saw yours reflected what I saw in my header.php file. I don't know if those were based on an earlier version of Sliding Doors or what but they weren't useful at all. I have my test banner in place and there may be issues with gaps and borders and such but this is a huge first step. Thanks again.


JordanT wrote:Allright here it is in the most simple terms possible...

in the header.php file... you will need to scroll down halfway.
there you will see the following bit of code....

<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding" role="banner">

<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
#(&(#*&$(*&#)(*&)#(*&$)(*#&$)(#*&$)#(*&$)(#*&$##
</span>
</<?php echo $heading_tag; ?>>


You will see actual code between <span> and </span> you need to delete that coding completely.

Now insert the follow code in between <span> and </span> replacing the location of the previous code...

<div align="center"><img src="wp-content/uploads/2011/07/banner.jpg" width="940" height="200"> </div>

this will center whatever image you plan on placing there.

now replace the part that is in bold below...with the URL of your image....

<div align="center"><img src="wp-content/uploads/2011/07/banner.jpg" width="640" height="194"> </div>

Once this is finished, be sure to change the width and height to match the size of the image.

<div align="center"><img src="wp-content/uploads/2011/07/mybanner.jpg" width="640" height="194"> </div>


So now your final code should look like this... the areas in BOLD you will have to replace with your own specific information.

<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding" role="banner">

<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
<div align="center"><img src="[b]wp-content/uploads/2011/07/banner.jpg" width="940" height="200"> </div>[/b]
</span>
</<?php echo $heading_tag; ?>>

Now hit update :P and refresh your browser and look at your website.
bleggo
I'm new here
 
Posts: 3
Joined: Sun Jun 26, 2011 2:24 am

Re: Replacing Title/Header with an Image?

Postby natalie » Wed Jul 20, 2011 2:40 pm

I too found your instructions very, very clear - thanks!!

My problem is that this only seems to have been effective on the home page of my site, all the other pages show a white blank space in place of the logo,

Anybody got any ideas why this might be happening?

Thanks
natalie
I'm new here
 
Posts: 1
Joined: Wed Jul 20, 2011 2:14 pm

Re: Replacing Title/Header with an Image?

Postby TSP » Thu Jul 21, 2011 8:25 pm

Thank you JordanT for the instructions, I did what you suggested and all the pages that have the "Parent" field populated with "Main Page (no parent)" in the Quick Edit section on the Pages screen are showing the image correctly. However my "sub pages" or "child pages" (the pages that have any other option then "Main Page (no parent)" in the "Parent" field) are not showing the image. Please help and here is the link to my website so you can see for your self.

Home page (image shows):
http://truesightphotography.com/

Child page (no image shows):
http://truesightphotography.com/galleries/preggers

Also, I would like to know how to make the image link back to the home page.

Thanks.
TSP
I'm new here
 
Posts: 2
Joined: Thu Jul 21, 2011 8:10 pm

Re: Replacing Title/Header with an Image?

Postby TSP » Thu Jul 21, 2011 11:37 pm

Okay, I was able to figure it out. I was missing the entire URL in the code.

I had this: -witch worked for the main pages, but not the child pages-
<span>
<div align="center"><img src="wp-content/uploads/2011/07/TrueSightPhotography.jpg" width="940" height="200"> </div>
</span>

I made it this:
<span>
<div align="center"><img src="http://truesightphotography.com/wp-content/uploads/2011/07/TrueSightPhotography.jpg" width="940" height="200"> </div>
</span>

Now it works with all the pages. Hope this helps others.

Still need to make the image link back to my home page though.
TSP
I'm new here
 
Posts: 2
Joined: Thu Jul 21, 2011 8:10 pm

Re: Replacing Title/Header with an Image?

Postby dbsteph0 » Sun Jul 24, 2011 5:54 am

add <a href=" your web domain here"> tag to it
dbsteph0
I'm a regular
 
Posts: 5
Joined: Fri Jul 22, 2011 9:32 pm

Re: Replacing Title/Header with an Image?

Postby jedwards » Mon Aug 08, 2011 6:41 pm

I just got started on this project, but the folloiwng worked for me...sort of. As long as I leave Site Title and Tagline filled in it shows, but if I leave that blank (so I can put what I want on the header graphic), the graphic disappears behind the sliding doors images? Is there a way to put that in a table or something so it stays fixed at the top, above the sliding doors images whether I choose to use the Site Title and Tagline or not?

#header {
padding: 0;
background: url(images/header3.jpg) no-repeat; /* Header Graphic */
}
jedwards
I'm new here
 
Posts: 4
Joined: Mon Aug 08, 2011 3:40 pm

PreviousNext

Return to Advanced - Customising the theme