Project Header

ovnigraphic · Member · Oct 25, 2014 at 3:53 am
Copy link

Add topic to favorites
Hi,
Is there a way to have the same kind of header in my project page that the one in my posts page ?
What I mean is to have a picture instead of the black fat stripe.
Thank you

The blog I need help with is: (visible only to logged in users)
ovnigraphic · Member · Oct 25, 2014 at 3:54 am
Copy link
sorry forgot.. Theme used is intergalactic
thesacredpath · Member · Oct 25, 2014 at 3:48 pm
Copy link
Hi, give the following a try. It targets the portfolio pages. I can’t make it look just like the main page since the structure of the HTML is different. If I apply an opacity to the div with the image, it also applies that opacity to the nested divs, which includes the portfolio title. You can see the effect by adding opacity: 0.3; to the first rule.
```
.single-jetpack-portfolio .entry-header {
    background: url("http://ovnigraphic.files.wordpress.com/2014/10/cropped-home-page-header1.png") no-repeat scroll center bottom rgba(0, 0, 0, 0);
    background-size: cover;
}
.single-jetpack-portfolio .entry-title {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
```
You could create another header image to use for the portfolio pages and apply a transparency/opacity to it in an image editing program, upload that to your media library and then replace the URL in the background declaration with that new URL.
ovnigraphic · Member · Oct 26, 2014 at 3:14 am
Copy link
Hi, thank you, it does work…
So yes, what I could do is use ” an image editing program,” and build a special image for these header….
Just to know : Is there a way to use the featured image of the project just like in the posts?
Thank you for your help
ovnigraphic · Member · Oct 26, 2014 at 3:18 am
Copy link
or can i make one image for each project ? and then css it (maybe easier)
Thank you
thesacredpath · Member · Oct 26, 2014 at 11:20 pm
Copy link
Just to know : Is there a way to use the featured image of the project just like in the posts? …or can i make one image for each project ? and then css it (maybe easier)

Either actually. To add the feature image to each portfolio, or add a separate unique image to each, you have to view the source code for each individual portfolio page and find the unique page id CSS class listed in the opening body selector. As an example, for your Web Design page, looking in the opening body selector for that page, I find postid-2180 which is the unique ID for that page. You then construct a CSS selector that targets that individual page like this:
```
.postid-2180 .entry-header {
    background: url("URL_OF_YOUR_IMAGE") no-repeat scroll center bottom rgba(0, 0, 0, 0);
    background-size: cover;
}
postid-2180 .entry-title {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
```
After uploading your image to your Media Library, you would get the URL of that image and replace URL_OF_YOUR_IMAGE between the quote marks with that URL. You would then find the unique CSS body class for the next page and do the same thing. In CSS, classes start with a period ( . ) and IDs start with a hashmark ( # ).
ovnigraphic · Member · Oct 28, 2014 at 12:54 am
Copy link
Thank you very much, it does work !! looks exactly how I wanted….
Would you recommend an image size for best fitting or it doesn’t matter ?
Anyway, thanks again for your help.
thesacredpath · Member · Oct 28, 2014 at 3:17 am
Copy link
You are welcome. I would suggest an image size that matches what the header image is supposed to be. You can find the recommended size at Appearance > Header in your dashboard.
ovnigraphic · Member · Oct 28, 2014 at 10:14 am
Copy link
OK, thank you, it’s really nice to be able to change the banner image on each every page….
Thanks
thesacredpath · Member · Oct 28, 2014 at 4:52 pm
Copy link
On the featured image, you can edit that featured image on your computer and upload it and then use that image on the portfolio page. There isn’t a way to pull it directly, and the proportions and/or size would likely be wrong for use as a header image.

It is indeed nice to be able to style pages separately, and it wasn’t that long ago that those unique body CSS classes didn’t exist in themes. A great, and very useful addition by theme designers.
ovnigraphic · Member · Oct 30, 2014 at 1:04 pm
Copy link
Thank you very much
thesacredpath · Member · Oct 30, 2014 at 3:07 pm
Copy link
You are welcome.

No items found.