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 » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

Different header images for different pages


  #1  
Old Nov 13, 2011, 05:07 AM
jms5017's Avatar
jms5017
 
112 posts · Jul 2010
NY/NJ Metro area
I have one page background image for my home page and one for all other pages. Following these instructions, http://forum.bytesforall.com/showthr...der+image+post
I put the bg image for *all other pages* into ATO ->Style and configure layout ->Layout container style as follows:
padding: 0;
background: url(/wp-content/themes/atahualpa/images/pagetopcontent.jpg) no-repeat center top;
(Header area height is set to 505, which is the size of the image. )
Then I added overrides to HTML/CSS as follows:
body.page-id-24 div#container {
padding: 0;
background-image: url(/wp-content/themes/atahualpa/images/pagetophome.jpg) no-repeat center top !important;
}
The image that shows up on the home page is the one set in config layout style>layout container, not the override one. (The home page has a header widget to hold an image gallery) The other pages just get cut off before the entire 505 pixel bg image is displayed.
What did I do wrong?
The attachment is the image that should display for the home page. The content page has the same radial background, but doesn't have the bottom "Imagine Formulate Appreciate" band at the bottom. The radial just continues for 505 pixels.

Last edited by jms5017; Aug 27, 2014 at 11:40 AM.
  #2  
Old Nov 13, 2011, 05:15 AM
jms5017's Avatar
jms5017
 
112 posts · Jul 2010
NY/NJ Metro area
Sorry, I forgot, The site is jkstest.info
  #3  
Old Nov 13, 2011, 05:20 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
Following these instructions, http://forum.bytesforall.com/showthr...der+image+post
I put the bg image for *all other pages* into ATO ->Style and configure layout ->Layout container
ummm...better go read the directions again...
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Nov 13, 2011, 07:15 AM
jms5017's Avatar
jms5017
 
112 posts · Jul 2010
NY/NJ Metro area
Ok, I found the dopey error
I had the div#container instead of div#imagecontainer. But you already knew that.

Still not seeing the proper header image on the home page or the entire 505pixel image on any other content page.
I even changed the path name in the CSS override code (and yes, did load the image to that folder)
background-image: url(http://jkstest.info/wordpress/wp-con...agetophome.jpg) no-repeat center top !important; even though I couldn't imagine the location of the image would matter. ...and it didn't. I'd prefer to use the
background-image: url(/wp-content/themes/atahualpa/images/pagetopcontent.jpg) no-repeat center top;
notation so that I have one less thing to change when I move the site to the production domain name.
What's wrong?
  #5  
Old Nov 13, 2011, 07:45 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
This is all done in the CSS Inserts area
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Nov 13, 2011, 08:05 AM
jms5017's Avatar
jms5017
 
112 posts · Jul 2010
NY/NJ Metro area
Are you saying the problem is that I can't set up a "default" header image for 99% of the page in the
ATO ->Style and configure layout ->Layout container style and then just override the home page in the insert CSS? I have to "override" each page in the CSS inserts?
  #7  
Old Nov 13, 2011, 09:37 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
when I enter
HTML Code:
http://jkstest.info/wordpress/wp-content/uploads/pagetophome.jpg
into the browser address I get a 'Not Found'. this could be caused by the image name being wrong or the file permission might be incorrect.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Nov 13, 2011, 12:56 PM
jms5017's Avatar
jms5017
 
112 posts · Jul 2010
NY/NJ Metro area
URRGH its the directory that's wrong. it should be jkstest.info/wp-content/uploads/pagetophome.jpg
In my zeal to go back and follow the directions exactly, I followed the directions exactly, and let my brain disengage.

Making that correction didn't seem to matter anyway....Does the location of the folder really matter, as long as I specify the path properly...In other words,
Is it necessary to put the override image in the uploads folder Per the above path) or should it work if I used
/wp-content/themes/atahualpa/images/pagetophome.jpg (assuming of course that pagetophome.jpg was in that images folder?
  #9  
Old Nov 13, 2011, 01:43 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
(don't you just hate it when you do that )

It shouldn't matter, but I'd suggest using 'wp-contents/images_atahualpa' then you won't have to change it during an update or have to move the images
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Nov 13, 2011, 03:16 PM
jms5017's Avatar
jms5017
 
112 posts · Jul 2010
NY/NJ Metro area
Good grief, I need to call it a day.....now the header that is supposed to only show up on the HOME page is showing up on EVERY PAGE....Can it be the widget image gallery on the page that is doing something weird?
  #11  
Old Nov 13, 2011, 04:25 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you only have an override for page id 24
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Nov 14, 2011, 03:55 AM
jms5017's Avatar
jms5017
 
112 posts · Jul 2010
NY/NJ Metro area
That's what I think, only override page id 24. But all the pages show the pagetophome.jpg image, not the pagetopcontent.jpg image. I even switched the code in the ATO>Style and configure layout>
layout container style to point to the same /wp-content/uploads directory as the override does. Of course, that makes no sense. But I do appreciate the point you made about flexibility by using the uploads directory.
  #13  
Old Nov 14, 2011, 04:59 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I think I see what is happening.

You have set the pagetocontent.jpg as the background for the div#container (ATO->Style & configure LAYOUT->Layout Container Style

However, the CSS you are putting in to do an override is using 'body.page-id-24 div#imagecontainer'

The image container is for the header IMAGE (when you use %image in the header configuration). Try changing 'body.page-id-24 div#imagecontainer' to 'body.page-id-24 div#container'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Nov 14, 2011, 07:38 AM
jms5017's Avatar
jms5017
 
112 posts · Jul 2010
NY/NJ Metro area
We have come full circle....that's where I started yesterday am, when you suggested I read the directions again. The difference between what I had and what was in the directions were
div#container vs div#imagecontainer and folder where both the override and the regular images
were stored, which we both agree that the location makes no difference as long as the path is properly specified. Dare I go back and re-live yesterday?
  #15  
Old Nov 14, 2011, 07:50 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
The location of the file on the server makes no difference, but the place you put that image in the HTML does.

you are dealing with two different image locations, the 'container' and the 'image container'.

The container is the area that contains everything, the header, sidebars, middle and footer.
The image container is a part of the header area. It only shows up when you use the %image option.

So since you haven't got the %image, no 'image container' is created in the page source so the CSS to override it is not used.

Since you apply the main image to the 'container' you want the CSS selector to reference that HTML area to override it.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #16  
Old Nov 14, 2011, 10:25 AM
jms5017's Avatar
jms5017
 
112 posts · Jul 2010
NY/NJ Metro area
I had this wild fantasy that changing it back to container would fix it. No dice. In my travels around the bfa forum yesterday, I decided that firebug would be a good thing for me to install and learn to use. So, I'm no expert, but in my limited knowledge, I view the page with firebug and I can clearly see pagetopcontent.jpg as being invoked, and no sign of pagetophome.jpg anyplace....yet the image that renders everyplace is pagetophome.jpg!

Is is possible that the image gallery widget is the culprit somehow? Its the only other variable in the mix!
  #17  
Old Nov 14, 2011, 11:51 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
please go to ATO->EXPORT/IMPORT settings and export your settings, then attach them to a reply
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #18  
Old Nov 14, 2011, 12:47 PM
jms5017's Avatar
jms5017
 
112 posts · Jul 2010
NY/NJ Metro area
Thanks - here it is.

Last edited by jms5017; Aug 27, 2014 at 11:40 AM.
  #19  
Old Nov 14, 2011, 02:41 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Your syntax is incorrect
HTML Code:
body.page-id-24 div#container {
padding: 0;
background-image: url(http://jkstest.info/wp-content/uploads/pagetophome.jpg) no-repeat center top !important;
}
lookup the syntax for 'background-image'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
header override, header truncated

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to assign different header-images to different pages? koinonos Header configuration & styling 8 Oct 16, 2010 06:11 AM
Header Images - One fixed image for Home Page - Rotate all images on all other pages? ClearlyRobert Header configuration & styling 10 Oct 12, 2010 12:12 PM
Link header images to separate pages andreapalframan Header configuration & styling 5 May 28, 2010 11:59 AM
[SOLVED] How to assign different header-images to different pages? gxxfy Header configuration & styling 9 Mar 31, 2010 04:49 AM
Different header images on different pages djberriman Header configuration & styling 1 Jan 26, 2010 01:01 PM


All times are GMT -6. The time now is 07:02 AM.


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