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 »

[SOLVED] Keep rotating Header Image on Home Page and Different header image on each p


  #26  
Old Feb 14, 2011, 10:02 PM
SharonJ's Avatar
SharonJ
 
639 posts · Sep 2010
Duncan BC Canada
This all makes perfect sense but it is not working. I have created a page called
http://gelinascarr.com/testing/

I have put the following in ATO/HTML/CSS inserts

body.page-id-368 div#imagecontainer {
background-image: url('http://gelinascarr.com/wp-content/banners/blog-banner.jpg') !important;
height: 110px;
}

I have checked that the image is there.

Atahualpa 3.6.1
WP 3.0.5

What am I missing?
  #27  
Old Feb 15, 2011, 04:45 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
in THIS css, you are missing nothing, but if you look at the css for the H2....
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #28  
Old Feb 15, 2011, 10:18 AM
SharonJ's Avatar
SharonJ
 
639 posts · Sep 2010
Duncan BC Canada
Aha, yes, I see there was a missing } at the end of h2. I fixed it and nothing seems to have changed.
  #29  
Old Feb 15, 2011, 12:47 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
You are going to kick yourself...go look at the h2 again
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #30  
Old Feb 15, 2011, 02:15 PM
SharonJ's Avatar
SharonJ
 
639 posts · Sep 2010
Duncan BC Canada
Consider me kicked! What a moron I am! Thanks a million. It all works like a charm.
  #31  
Old Feb 15, 2011, 02:22 PM
SharonJ's Avatar
SharonJ
 
639 posts · Sep 2010
Duncan BC Canada
Where it does not work, however is on the blog page, which is where they want it. I just set up the test page to see if I could get it to work. I changed the page id to the blog page id (190) but the rotating banners are still in effect there. Each post of course has a different id#

Would the code read:

post.page-id-190 div#imagecontainer {
background-image: url('http://gelinascarr.com/wp-content/banners/blog-banner.jpg') !important;
height: 110px;
}

..afraid to try it in case it blows the whole site apart!!

p.s. If I would like to donate to you, how does that work?
  #32  
Old Feb 15, 2011, 02:37 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
for the blog page you use
HTML Code:
body.blog div#imagecontainer {
background-image: url('http://gelinascarr.com/wp-content/banners/blog-banner.jpg') !important;
height: 110px;
}
the class 'blog' is always assigned to the page that displays the blog. If the blog page is also the front page, then it also gets (as does what ever page is the front page) the class of 'home'

You can donate to me by clicking the donate button at the top of the page and then using the 'Donate to Juggledad' button
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #33  
Old Feb 15, 2011, 09:15 PM
SharonJ's Avatar
SharonJ
 
639 posts · Sep 2010
Duncan BC Canada
I made the change as suggested, but the new banner does not show .. see link below

http://gelinascarr.com/a-charismatic-visitor/

(I include this blog link because you might enjoy seeing the Roosevelt Elk in their front yard. They live about 5 miles from me)
  #34  
Old Feb 16, 2011, 03:20 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
That post is not the blog page, this is a single post page and has different classes on the <body> statement. View the page, then view the source and do a finf on '<body' and you will see the classes. At this point you should be able to code the CSS you need.

So for each page you want a separate header, you need a CSS selector and rule, for the blog page, you need one. If you want one for each post you need one for each post.

If you want one for the blog and all the single post pages with the same header then your work will be a lot less
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Feb 18, 2011 at 01:09 PM.
  #35  
Old Feb 17, 2011, 10:37 PM
SharonJ's Avatar
SharonJ
 
639 posts · Sep 2010
Duncan BC Canada
Am I even close?? This does not work.

body.single single-post div#imagecontainer {
background-image: url('http://gelinascarr.com/wp-content/banners/blog-banner.jpg') !important;
height: 110px;
}
  #36  
Old Feb 18, 2011, 05:12 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
close but your syntax is off. If you use
HTML Code:
body.single single-post div#imagecontainer {
background-image: url('http://gelinascarr.com/wp-content/banners/blog-banner.jpg') !important;
height: 110px;
}
you are saying "apply this to the <DIV> with an ID of 'imagecontainer' that is a child of an HTML ELEMENT <single-post> which is a child of a <body> that has a class of 'single'

I'll bet you you see the error of your syntax already. If you want to say 'do this the the <body. that has the class 'single' AND the class 'single-post' you would say
HTML Code:
body.single single-post
if you just want it to be for a 'single-post' you would use
HTML Code:
body.single-post
You just have to know which you want to use
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #37  
Old Feb 18, 2011, 10:54 AM
SharonJ's Avatar
SharonJ
 
639 posts · Sep 2010
Duncan BC Canada
My brain is melting. You attribute too much CSS ability to me!

I want that banner to appear on all blog posts. Not just a single post.

I am confused as to what you are telling me to consider.
Are you implying that I don't require the div#imagecontainer ?

I apologize for not understanding.
  #38  
Old Feb 18, 2011, 01:13 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Yes you need the div#image container, I was just trying to show you why the selector didn't work. You need either
HTML Code:
body.single div#image container {....}
or
HTML Code:
body.single-post div#image container {....}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #39  
Old Feb 18, 2011, 01:43 PM
SharonJ's Avatar
SharonJ
 
639 posts · Sep 2010
Duncan BC Canada
Thanks a million. I have made you a donation, not as much as you deserve, of course, but I will do so again as I am able.

Here is the result they wanted, just perfect
http://gelinascarr.com/a-charismatic-visitor/

Again I thank you for your knowledge and patience.
  #40  
Old Mar 10, 2011, 03:24 PM
grnidone
 
23 posts · Feb 2011
Odd...this is not working. I can only think somehow my category names are incorrect.

I plugged in the following into the "ATA > Add CSS > Add CSS "

body.category-air-force div#imagecontainer {
background-image: url(http://gruntjewelry.com/wp-content/t...kground_AF.jpg) !important;}

body.category-army div#imagecontainer {
background-image: url(http://gruntjewelry.com/wp-content/t...round_army.jpg) !important;}

body.category-military div#imagecontainer {
background-image: url(http://gruntjewelry.com/wp-content/t...pararescue.jpg) !important;}
  #41  
Old Mar 10, 2011, 03:37 PM
grnidone
 
23 posts · Feb 2011
subscribed to post.
  #42  
Old Mar 10, 2011, 03:56 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
to find the category, go to the page in question and view the source. Now search for '<body' and you will see the category assigned.

On your site, you must be using some plugin to create the categories so the normal naming doesn't work.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #43  
Old Mar 21, 2011, 03:38 PM
rackphoto
 
19 posts · Jun 2009
Cincinnati, Ohio
I feel bad for dwelling on this but my brain is exploding on this, I too am trying to get a separate header image on one (or more) of my pages while the regular rotating header feature stays on the home and or blog pages and some other pages too. I am using a static page for my home page (can have regular rotating images) a blog page (with regular rotating images) a couple more pages with the regular rotating pages also. I just need to have another page that has a different header image (it would be great if that page could have it's own set of rotating images different from the regular one!?)
I tried the instructions above but the same header images rotate on the page that I want a separate and different image?!
Site is

http://rackphoto.com/main/

I would like the "Architecture" page to have a different image(s) and have added a css insert

body.page-id-372 div#imagecontainer {
background-image: url('http://rackphoto.com/main/wp-content/header_images-extra/dei-header.jpg') !important;
}

Doesn't change anything?
Any ideas? Thanks a million.

ron rack
  #44  
Old Mar 21, 2011, 04:30 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try shutting off the fade in/out
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #45  
Old Mar 21, 2011, 10:01 PM
rackphoto
 
19 posts · Jun 2009
Cincinnati, Ohio
wow, that was it!!! Setting the fade in / out to zero did the trick for me. I really like the fade effect but something had to give I guess.

thanks again!

ron rack
  #46  
Old Apr 30, 2011, 12:40 AM
Masselyn
 
91 posts · Jan 2009
So. California
Hi:

I have not found the following in the forums, but if I missed it by all means feel free to knock me over with the URL.

Can we have different rotating images, on different pages, using the built-in header feature (presuming that each page would call images from a different directory on the system)? I saw someone mentioned it above, but not sure if there is code or edits that can be made to accommodate this. I'd love to do it for a new site launched, where the client wants rotating images on the homepage to be from one set of images - and another set of images rotating on their "Daycare" tab. You can view the site here, if it helps.

http://184.172.150.20/~hmckeon/

Thanks
  #47  
Old Apr 30, 2011, 05:13 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
There is nothing in Atahualpa or the Tutorials that will allow you to have a different set of linked header images/page but you might want to look at the 'dynamic header' plugin - and if it can't do it alone, then check out the 'widget logic' plugin so you could have multiple copies of the dynamic header, one set for each page and have widget logic choose the version depending on the page.

Note - this is sure to add to the response time for the page. each new plugin adds more code that has to be executed and more memory that is used, so you might want to ask your customer if the want it enough to make the site slower....
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #48  
Old May 3, 2011, 07:14 AM
itsjustlife
 
29 posts · Mar 2010
Southampton, England
Hi

Where do I add the CSS insert
  #49  
Old May 3, 2011, 07:34 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
ATO->Add HTML/CSS Inserts->CSS Inserts
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #50  
Old May 15, 2012, 11:03 PM
andermarketing
 
7 posts · May 2012
Los Angeles, CA
Quote:
Originally Posted by alleyoopster
This link goes some way to helping. Looking at the code it seems possible to use a full URL to an external domain instead.

With regards to my own problem of not displaying headers on all pages I found the answer. In CSS inserts as follows to disable headers on certain pages.
Code:
/* Stop Header Images displaying on certain pages */
body.page-id-5 div#imagecontainer {display: none;}
body.page-id-13 div#imagecontainer {display: none;}
EDIT: The link above led me to this one
This works for me however it's impractical to list every page if you only want the images on the home page. Is there a global line of code to omit the header images on every page except the home page?

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Rotating Header Images link to Different pages instead of home page? WordPressZen.com Header configuration & styling 10 Oct 13, 2010 12:41 PM
Replace header image with flash on home page only shumes1025 Header configuration & styling 4 Oct 15, 2009 05:04 PM
Fixed HeaderImage for Home Page & then Rotating Header Images for other pages? kippiper Header configuration & styling 6 Jun 29, 2009 06:47 AM
Single Header image on home page Lok52 Header configuration & styling 0 Apr 20, 2009 04:44 PM
Header image displays on all pages BUT the HOME page imabeliever Header configuration & styling 3 Apr 14, 2009 06:05 AM


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


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