CSS specific to singe event page

[Brian]

I’m trying to use css to change the default page header background image on individual event pages. I use this code to successfully change the image on a different type of page:
.postid-xxxx #page-header{background:url(http://insertlinkhere.jpeg) !important;}

When I look up the id for this past event http://centraloregonweddingpros.com/event/decorate-and-celebrate/ it shows as postid-4794. The code I’m using to target that postid it won’t override the default background image.

.postid-4794 #page-header{background:url(http://cdn.centraloregonweddingpros.com/wpaco/wp-content/uploads/2016/03/Alan-Berg-at-WWWorld-DC-2015-Amanda-Goodlove-Photographer.jpg) !important;}

Is there something more I need to use to target an event page? Thanks!

[Geoff B.]

Good evening Brian and welcome to the Events Calendar Support forum!

Thank you for reaching out to us.
I would love to help you with this topic.

I must say I am a bit confused as the code you added does get priority and is displayed properly on my end.
Could you retry ? Perhaps a caching issue.

Other than that, your CSS rules are perfect.

Let me know how that goes.

Best regards,
Geoff B.

 

[Brian]

Thanks for checking it Geoff. I still can’t get the alternate image to show up. I tried changing it to a different image this morning. I also cleared the caches and tried a browser that I’ve never used to visit the page. The default header image is still showing up. Can you check and tell me which image you’re seeing at the top?
Default: http://cdn.centraloregonweddingpros.com/wpaco/wp-content/uploads/2015/04/wpaco-blog-header.jpg
Alternate: http://cdn.centraloregonweddingpros.com/wpaco/wp-content/uploads/2016/03/wpaco-oregon-bride-best-of-2016-header.jpg

Here’s the code I’m using:
.postid-4794 #page-header{background:url(http://cdn.centraloregonweddingpros.com/wpaco/wp-content/uploads/2016/03/wpaco-oregon-bride-best-of-2016-header.jpg) !important;}

[Geoff B.]

Hey Brian,

This is a super odd issue, but I am very interested in figuring out what’s going on.

Here’s what I’m seeing: https://www.dropbox.com/s/hzzwuahz0bashcz/Decorate_and_Celebrate___Wedding_Professionals_Association_of_Central_Oregon.jpg?dl=0

So basically, I’m seeing the correct image (which I guess is good news!).
Would you mind telling me what browser and which version you are using to verify your changes ?

Have a good week-end,

Geoff B.

[Brian]

You’re so right. It is super odd. I’ve tried on 3 computers. Macbook Pro (Chrome 49, Safari 6.0, Opera 35, Firefox 45.0.1), Mac Pro (Firefox 44.0.2), Acer Laptop (IE 11, Chrome 49), an ipad(Chrome & Safari). All show the old picture. At this point I figured it was my router or isp that was caching something but I loaded the pages over 4G on our cell phones (HTC One stock browser, Samsung Galaxy S4 – Chrome & stock) and still saw the old picture. I’m baffled.

[Brian]

OK. So after rebooting my router and modem and clearing every cache I could find, I can see the correct image on top now. I’ve never had anything stick in a cache like that before. Thanks for checking it out for me.

[Geoff B.]

Hey Brian,

You are so right, this is an odd one.
I’m not sure what happened there, but I’m mostly happy that the issue is gone on your end.

I also want to reiterate that your CSS skills are spot-on so don’t let a “ghost in the machine” tell you otherwise.

You are welcome back on our support forums any time 🙂

For now, I am going to close this thread.

Have a great week!

Geoff B.

[Author]

Posts