|
#1
![Old](images/bytesforall/statusicon/post_old.gif)
Sep 21, 2012, 03:11 PM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Sep 21, 2012, 03:28 PM
|
![juggledad's Avatar](image.php?u=675&dateline=1243595674) |
|
|
23,765 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](images/bytesforall/statusicon/post_old.gif)
Sep 22, 2012, 06:53 PM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Sep 22, 2012, 07:58 PM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Sep 23, 2012, 11:56 AM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Sep 23, 2012, 12:19 PM
|
![lmilesw's Avatar](image.php?u=1858&dateline=1257813115) |
|
|
10,176 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](images/bytesforall/statusicon/post_old.gif)
Sep 23, 2012, 12:26 PM
|
|
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 12:35 PM.
Reason: confusing
|
#8
![Old](images/bytesforall/statusicon/post_old.gif)
Sep 23, 2012, 01:59 PM
|
![lmilesw's Avatar](image.php?u=1858&dateline=1257813115) |
|
|
10,176 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](images/bytesforall/statusicon/post_old.gif)
Sep 23, 2012, 02:55 PM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Sep 23, 2012, 03:16 PM
|
![lmilesw's Avatar](image.php?u=1858&dateline=1257813115) |
|
|
10,176 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](images/bytesforall/statusicon/post_old.gif)
Sep 23, 2012, 06:20 PM
|
![juggledad's Avatar](image.php?u=675&dateline=1243595674) |
|
|
23,765 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](images/bytesforall/statusicon/post_old.gif)
Sep 24, 2012, 08:41 AM
|
|
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 ![Wink](images/smilies/wink.gif) ;
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](images/bytesforall/statusicon/post_old.gif)
Sep 24, 2012, 08:58 AM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Sep 24, 2012, 09:56 AM
|
![lmilesw's Avatar](image.php?u=1858&dateline=1257813115) |
|
|
10,176 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](images/bytesforall/statusicon/post_old.gif)
Sep 24, 2012, 10:11 AM
|
|
Thank you! Thank you! Thank you! It works!!!!!
|
#16
![Old](images/bytesforall/statusicon/post_old.gif)
Sep 24, 2012, 10:25 AM
|
![juggledad's Avatar](image.php?u=675&dateline=1243595674) |
|
|
23,765 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](images/bytesforall/statusicon/post_old.gif)
Sep 24, 2012, 10:42 AM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Sep 24, 2012, 11:52 AM
|
![juggledad's Avatar](image.php?u=675&dateline=1243595674) |
|
|
23,765 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](images/bytesforall/statusicon/post_old.gif)
Sep 24, 2012, 12:13 PM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Sep 24, 2012, 12:16 PM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Sep 24, 2012, 01:04 PM
|
![juggledad's Avatar](image.php?u=675&dateline=1243595674) |
|
|
23,765 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](images/bytesforall/statusicon/post_old.gif)
Sep 24, 2012, 01:11 PM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Sep 24, 2012, 01:34 PM
|
|
It's all working!
|
|