Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » Forum Usage » Forum How-To »

[SOLVED] Change header images on each page


  #1  
Old Sep 21, 2012, 04:11 PM
westpro
 
55 posts · Sep 2012
Am brand new to Atahualpa. Set up a beautiful homepage without any problems. The homepage features 5 rotating images that are 950px by 600px.
However, on the rest of the pages on the site I would like a single header image (different image for each page) that measures 950px by 300. Beyond this, everything remains the same as the homepage.
I have very limited knowledge of php or css.
Thank you.
westpro
  #2  
Old Sep 21, 2012, 04:28 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
have you searched the forums?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Sep 22, 2012, 07:53 PM
westpro
 
55 posts · Sep 2012
Thank you for this solution.
One more question. The header on my home page measures 950px by 600px. The headers I want to use on the other pages need to be 950px by 300px. Do I need to add code to each of the headers to make them appear the right size?
  #4  
Old Sep 22, 2012, 08:58 PM
westpro
 
55 posts · Sep 2012
I got ahead of my self. Yesterday I posted:
"Am brand new to Atahualpa. Set up a beautiful homepage without any problems. The homepage features 5 rotating images that are 950px by 600px.
However, on the rest of the pages on the site I would like a single header image (different image for each page) that measures 950px by 300. Beyond this, everything remains the same as the homepage.
I have very limited knowledge of php or css.
Thank you."
Was sent a great solution. Before I could try it I posted another question. Now when I try to find the solution Juggledad sent all I can find is a message that reads, "have you searched the forums?"
I have been searching the forums for over an hour now and cannot relocate the solution sent to me yesterday.
If possible, please send it again.
Thank you,
Westpro
  #5  
Old Sep 23, 2012, 12:56 PM
westpro
 
55 posts · Sep 2012
Still trying to keep rotating header images on homepage but have different header images on the rest of the pages and posts.
Per instructions added to HTML/CSS Inserts:

body.page-id-7 div#imagecontainer {
background-image: url(http://yourdomain.com/wordpress/wp-c.../page-id-7.jpg) !important;} (of course I substituted my pages and images)

Did not work. Still have homepage rotating header images appearing on each page. Have tried searching forums but it's looking for a needle in a haystack.

Trying to get this site completed. Please give me some direction.
Thank you,
Westpro
  #6  
Old Sep 23, 2012, 01:19 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
To just have an item showing on the front page you can set it to display:none and than after that CSS you set it to display block but target the home page.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Sep 23, 2012, 01:26 PM
westpro
 
55 posts · Sep 2012
I think I have poorly communicated what I want to do.

1. Homepage - it is working perfectly rotating the images that are in the header images folder - no problem.

2. I want different images displayed in the header of each (of the other)pages and posts -these images are a different size from those currently displaying in the homepage. The dimensions of the homepage images are 950x600. The images I want to display on each of the (other) pages are 950x300.

I was searching around and found articles on page templates but I do not know how to edit the header images on a template.

I'm getting a little desperate. Thank you, for any help you can offer.
Thanks,
Westpro

Last edited by westpro; Sep 23, 2012 at 01:35 PM. Reason: confusing
  #8  
Old Sep 23, 2012, 02:59 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
One possibility is adding a new widget area in place of %image and then use a slider or slideshow plugin to to display the front page images and an image widget to display the other page images. Then you would use another plugin such as widget logic to limit the display to where you want.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Sep 23, 2012, 03:55 PM
westpro
 
55 posts · Sep 2012
ATAHUALPA -
I am getting nowhere at breakneck speed.
There has got to be a reasonable way to accomplish what I want.
My home page is perfect - images rotating - excellent!
The images on the homepage are located in the header image folder as they should be.
I want to keep the homepage just as is.
Every other page needs a smaller header image which I have prepared. However, if put into the header image folder . . . they just become part of the header gallery so you see a 950px by 600 image followed by a 950 px by 300px image. I got that part! So I removed the smaller images and am back to square one.
Home page . . . fine. Every other page needs a static header image - 950px by 300.
I so wanted to have this done by tomorrow but can't get a clean, clear solution. As for adding all the widgets . . . there's got to be a better way.
Am totally burned out as I have searched threads for 2 days.
Surely, someone has faced the exact same challenge. Really need some help.
Thanks,
Westpro
  #10  
Old Sep 23, 2012, 04:16 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
To have your images on the front page only show on the front page you could use something like the following in CSS Inserts. This assumes you want the images showing on the home page.
HTML Code:
#imagecontainer {
display:none;
}
body.home #imagecontainer {
display: block;
}
That should take care of your header images showing on the front page. What I would do to get a different header image for different pages is to use a plugin like WP Display Header. This requires php added which is not directly allowed by WordPress so you would need to add a new widget area per the instructions in the theme options and add the php code given by the plugin in a php aware widget. Now you would configure your pages per the instructions for the plugin to display the images you want.

I know of no simpler way to accomplish this although this is not terribly complex.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old Sep 23, 2012, 07:20 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
First add a new div with an id of 'my-imagecontainer' right after the %image in the 'Configure Header area'
second in the css code add
HTML Code:
#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-371 div#my-imagecontainer {
     display: block; 
     height: 400px;
     background: url('http://yourdomain.com/wp-content/uploads/path-to-image') top center no-repeat;");
     width: 700px;
}
adjust height and width as you want, repeat for each page
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Sep 24, 2012, 09:41 AM
westpro
 
55 posts · Sep 2012
I did the following:
In the Configure Header area I added

%pages %image <div id="my-container"> %bar2

In the css insert I added

#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-4 div#my-imagecontainer {display:block;

height: 200px;
background: url("http://www.clbengineers.com/wp-content/uploads/2012/09/WaterPlantHeader-for-pages.jpg") top center no-repeat;
width: 950px;

It got rid of the homepage header for the "Aboout Page" but did not replace it with the header image I specified for the "About Page" which is the first page I am trying.
Have I done something wrong?
  #13  
Old Sep 24, 2012, 09:58 AM
westpro
 
55 posts · Sep 2012
I did the following:
In the Configure Header area I added

%pages %image <div id="my-container"> %bar2

In the css insert I added

#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-4 div#my-imagecontainer {display:block;

height: 200px;
background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/WaterPlantHeader-for-pages.jpg') top center no-repeat;");
width: 950px;

It got rid of the homepage header for the "Aboout Page" but did not replace it with the header image I specified for the "About Page" which is the first page I am trying.
Have I done something wrong?
  #14  
Old Sep 24, 2012, 10:56 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Your div has an id of my-container but your CSS is using div#my-imagecontainer as the selector.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #15  
Old Sep 24, 2012, 11:11 AM
westpro
 
55 posts · Sep 2012
Thank you! Thank you! Thank you! It works!!!!!
  #16  
Old Sep 24, 2012, 11:25 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Make sure you add a closing div in the configure header so it should be
HTML Code:
%image <div...></div>
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #17  
Old Sep 24, 2012, 11:42 AM
westpro
 
55 posts · Sep 2012
This is working for pages 4, 8, and 12 but not for pages 6 and 10??? Can you see any reason why?


#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-4 div#my-imagecontainer {
display: block;
height: 200px;
background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/WaterPlantHeader-for-pages.jpg
') top center no-repeat;");
width: 950px;
}

#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-6 div#my-imagecontainer {
display: block;
height: 200px;
background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/RoadsHeaderforPages.jpg
') top center no-repeat;");
width: 950px;
}

#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-8 div#my-imagecontainer {
display: block;
height: 200px;
background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/ConstructionPageHeader.jpg
') top center no-repeat;");
width: 950px;
}

#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-10 div#my-imagecontainer {
display: block;
height: 200px;
background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/LandDevelopmentPageHeader.jpg
') top center no-repeat;");
width: 950px;
}

#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-12 div#my-imagecontainer {
display: block;
height: 200px;
background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/WaterPlantHeader-for-pages.jpg
') top center no-repeat;");
width: 950px;
}
  #18  
Old Sep 24, 2012, 12:52 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
First off, you don't have to repeat all the css you only need the
HTML Code:
#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
once. You can also combine the commen rules and end up with this
HTML Code:
#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}

div#my-imagecontainer {
   display: block; 
   height: 200px;
   width: 950px;
}
body.page-id-6 div#my-imagecontainer {
   background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/WaterPlantHeader-for-pages.jpg') top center no-repeat;");
}

body.page-id-6 div#my-imagecontainer {
   background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/RoadsHeaderforPages.jpg') top center no-repeat;");
}

body.page-id-8 div#my-imagecontainer {
   background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/ConstructionPageHeader.jpg') top center no-repeat;");
}

body.page-id-10 div#my-imagecontainer {
   background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/LandDevelopmentPageHeader.jpg') top center no-repeat;");
}

body.page-id-12 div#my-imagecontainer {
   background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/WaterPlantHeader-for-pages.jpg') top center no-repeat;");
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #19  
Old Sep 24, 2012, 01:13 PM
westpro
 
55 posts · Sep 2012
Thank you. It certainly shortened the code. However, it didn't help me on the images. I am going to reload the missing images from my computer and see if they will work.
I am sorry for taking so much of your time. I just feel that I am too far into this project to look for another theme. I appreciate very much your help.
-westpro
  #20  
Old Sep 24, 2012, 01:16 PM
westpro
 
55 posts · Sep 2012
By the way, the site I am working on is http://www.clbengineers.com - if you have a chance you can see what is happening.
Thanks
  #21  
Old Sep 24, 2012, 02:04 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
get rid of the extra double quote's at the end of each line - since there is one at the end of the pade-id-4 code it makes everything after that - up to the end of the page-id-6 code - a literal nad it is ignored.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #22  
Old Sep 24, 2012, 02:11 PM
westpro
 
55 posts · Sep 2012
Curious.
Checking the source code of the three pages that are working.
On line 217 the images don't all agree with what I typed in on the CSS insert.

www.clbengineers.com

looking at About, Construction and Contact pages.
  #23  
Old Sep 24, 2012, 02:34 PM
westpro
 
55 posts · Sep 2012
It's all working!

Bookmarks

Tags
header images

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Header Images - One fixed image for Home Page - Rotate all images on all other pages? ClearlyRobert Header configuration & styling 10 Oct 12, 2010 01:12 PM
I don't have the images/header file on wordpress to allow me to change pics? norwichkaren Header configuration & styling 1 Jul 9, 2009 07:25 AM


All times are GMT -6. The time now is 05:46 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.