Goran Theme: How to have Header override featured image on page
-
In Goran, I would like to add a featured image to a page so that it’s used as the grid-page thumbnail, but I want to override it in the header area with the header used across my site so that every page has a similar look. Is this possible with css? Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi there, yes we should be able to do this. Do you have a page that I can look at to work out the code? It’s ok if it is still a draft page, I can see those, just let me know the name of the page.
-
Thanks:-)
It’s graverholtphoto.wordpress.com or graverholtfoto.com. It’s private; do I have to change that? Don’t wan’t it online before I’m finished …
A -
-
-
I’m looking at your Galleri page for this example. The image is set in the CSS, so we can easily change that image to whatever you would like. What we need to do to be able to target specific pages is to use the CSS body class that is defined in the opening body HTML tag of the page. You can view the HTML using your web inspector and look in the opening body selector for something like this.
page-id-444
To change the image on that page, we would then do the following. Note that I preceded page-id-444 with a period ( . ) so that the browsers know that this is a CSS class..page-id-444 .hero.with-featured-image { background-image: url("URL_OF_IMAGE"); }You would then replace URL_OF_IMAGE between the quote marks with the URL of the image you uploaded to your media library.
-
THANK YOU:-)
Fantastic; you’re a life saver!
As always, great service from you guys:-)
/A
-
- The topic ‘Goran Theme: How to have Header override featured image on page’ is closed to new replies.