Cafe Pro, different Header for inside pages

[jtdatawork]

I'm trying to apply a different background image for the header on inside pages in Cafe Pro. The one on the home page looks fine, but on inside pages the site title goes smack in front of the subject's face, so I want to use an edited image.

I tried setting up a custom class in the CSS with the edited image url, then designating it in the custom body class area of the competition class page (to test), but it didn't have any effect. If I test using the landing page template AND the new inside page class, the new inside page class image does show up, but the page template is all wrong.

Can I do this with a simple CSS fix? If so what did I miss? Or do I need to build a custom template? I'm not a php pro, so css fixes tend to work better for me. 🙂 But I'm willing to try anything.

Many thanks!

---

JT Dataworks Web design and SEO

http://kathysanto.server285.com

[Brad Dalton]

You cannot do this correctly with CSS alone.

PHP is far better because you can use one function to remove the default and then another to add the custom header.

Is this for pages or posts?

If posts, which posts and which categories?

---

Tutorials for StudioPress Themes.

[bataladc]

I am having a similar issue. I have a background image on my front-page-one and that same image is showing on every page of my site. I wanted to know how I can change the page's header to have different backgrounds. Your help is much appreciated 🙂

http://www.batalawashington.com/new-site

[socialspark]

I'm looking for a different header on inner pages of Cafe Pro as well. I'm mostly concerned with the pages at this point, but being able to change it on the blog posts as well down the road would probably be helpful too.

My site's on staging at flywheel right now, so it's got a password, I can PM you if you want.

Thanks!

Fran

[Brad Dalton]

You can install a ( free ) plugin like WP Display Header which is the best plugin for this purpose.

Or

You can hand code it in your child theme using this solution ( not free )

---

Tutorials for StudioPress Themes.

[socialspark]

Hey Brad -
Thanks for the quick response. I just tried the plugin and it only changed out the logo on top of the header image, not the header image itself...is that what's supposed to happen, or do I just not have it set up right??

[Brad Dalton]

Hey @socialspark

Yes, the plugin only changes the header image not the entire header area unless you use a full width image.

---

Tutorials for StudioPress Themes.

[socialspark]

Ok, thanks @braddalton. I'm just not even getting an option for anything except my logo in the options on the page. I put a full width featured image in the featured image box, but that didn't matter. I also tried the Display Featured Image for Genesis plugin, but it displayed the featured image in *addition* to the original header image, instead of *in place* of it.

I appreciate all your help!

[Brad Dalton]

Where did you install the jQuery?

And which solution are you referring to?

---

Tutorials for StudioPress Themes.

[socialspark]

I'm trying the plugin solution, I don't think it required any jquery install.

Thanks,
Fran

[Brad Dalton]

If your featured image is exactly the same width as the header area it should display in the header when using any of the default themes. This functionality isn't built into Genesis so you need a custom hand coded solution.

---

Tutorials for StudioPress Themes.

[jtdatawork]

HI! Hopping back in here, for some reason I didn't get the follow up notification email... Spam filters are so imperfect. 🙂

I want to use this for all pages and posts. The home page is the only exception.

I had the same experience as Fran. It appears on this theme that the "header image" is really what we would call the "site title". The larger header area is actually a background image.

So what I really think I need to do is change the background image on all pages but the home page. ?

---

JT Dataworks Web design and SEO

[socialspark]

Hey @jtdatawork -
I also submitted a ticket for the "Display Feature Image for Genesis" plugin by Robin Cornett. She gave me a head start on making hers work, but I don't know anything about JS, so I'm still stuck, but maybe you can make it work! Here's what she said needed to be done to make her plugin work with Cafe Pro:

Cafe Pro adds the header image to a different location than my plugin (or probably any other theme/plugin, actually, as it is adding it to a uniquely created div). I think it's doable to use my plugin with the theme but will take some elbow grease to tweak the theme.

For instance, I'd start with moving $('.site-header').addClass('front-page-header'); from the global.js to the home.js, which will stop the theme header image from showing outside of the front page. Then you can tinker with the positioning on the .site-header element in your CSS--change it to absolute for a test, and tweak the z-index values (and ditch the white background). You'll have to go back and override it with more specific rules for the front page, and the primary nav will probably require some more work, too, depending on what you're wanting from it, but that seems to get things to start lining up for me on a test install. Hope that helps!

Let me know if you get it to work!

Fran

[jtdatawork]

Hi Fran,

Wow, that seems like a huge amount of work just to try to make the fix work! lol! Yeah, I don't do JS either. I'm pretty sure there is an easier way. I've done something like this on other sites, and it was pretty easy, but this site is set up a little differently which is why I am stuck.

Here are the two ideas:

If we can get the functions file to call a different class for the pages using an "if" statement. i.e. if it is a page (or is NOT the home page) then display this class. Setting up the class in the CSS isn't hard; if I could write php then we'd be home free. 🙂 This might also be done in the simple hooks plugin.

The other way I'm working on is to just build a custom page template that will place the new image in the header area and ignore the special code for the front page entirely. It might take a bit more time, and the pages would then all need the template applied to them, so it is not quite as pretty a solution, but it is guaranteed to work.

Let me know if you come up with anything better.

Judy

---

JT Dataworks Web design and SEO

[socialspark]

Hey Judy,
You're a bit ahead of me when it comes to the php, but I did do something like this using centric pro, I'll have to go back to that site and see what I did. I'll keep you posted!

Fran

[jtdatawork]

Hi Fran,

OK I made something work! it's a three step process.

For someone wanting to use different banners for different pages or areas, this is a good solution. I need them ALL to have the same banner though so If ANYONE knows how to do this without having to change each page individually to the custom body class, let me know! 🙂

This is what I did...

First I made a custom banner image and uploaded it. Then I made a custom class called inside-page. I placed it at the bottom of my CSS, but above the media queries (since I will need a custom one for the smaller sizes.)

The header image we are trying to replace in Cafe Pro is called in the CSS by .site-header .wrap so the new CSS with the custom class looks like this:

.inside-page .site-header .wrap {
background: #fff url("http://kathysanto.server285.com/wp-content/uploads/Kathy-inside.jpg") no-repeat center;
}

Then I added a custom class to the theme functions file i.e. functions.php using the studiopress tutorial here: http://my.studiopress.com/snippets/custom-body-class/
- using the one titled "Add body class to a page with a slug of ‘sample-page'

I substituted my custom class name where it says sample-page in the code. In my case "inside-page". Note: If you are not used to working in the functions file be very careful cutting and pasting. Any funky code in here will error out your site, and correcting it doesn't seem to help. Make sure you have a clean copy of the original functions file to upload ICOE before proceeding!!

Now to the actual pages. In the area below the edit box called "layout settings" I placed the name of the custom class in the custom body class box. e.g. inside-page. (If you cannot see the layout settings area, go up to the top-right of the page and open the screen settings area and click "Layout Settings")

Update the page and your new banner should show up on that page!

Right now only one page has the new test header - http://kathysanto.server285.com/private-dog-training/ When I get the image adjusted the way I want, I'll then go in and change all the pages to have the custom body class.

Let me know if that works for you Fran!

---

JT Dataworks Web design and SEO

[jtdatawork]

Hi Fran,

OK I made something work! it’s a three step process.

For someone wanting to use different banners for different pages or areas, this is a good solution. I need them ALL to have the same banner though so If ANYONE knows how to do this without having to change each page individually to the custom body class, let me know! 🙂

This is what I did…

First I made a custom banner image and uploaded it. Then I made a custom class called inside-page. I placed it at the bottom of my CSS, but above the media queries (since I will need a custom one for the smaller sizes.)

The header image is called in the CSS for Cafe Pro by .site-header .wrap so the new CSS with the custom class looks like this:

.inside-page .site-header .wrap {
background: #fff url(“http://kathysanto.server285.com/wp-content/uploads/Kathy-inside.jpg”) no-repeat center;
}

Then I added a custom class to the theme functions file i.e. functions.php using the studiopress tutorial here: http://my.studiopress.com/snippets/custom-body-class/
– using the one titled “Add body class to a page with a slug of ‘sample-page’

I substituted my custom class name where it says sample-page in the code. In my case “inside-page”. Note: If you are not used to working in the functions file be very careful cutting and pasting. Any funky code in here will error out your site, and correcting it doesn’t seem to help. Make sure you have a clean copy of the original functions file to upload ICOE before proceeding!!

Now to the actual pages. In the area below the edit box called “layout settings” I placed the name of the custom class in the custom body class box. e.g. inside-page. (If you cannot see the layout settings area, go up to the top-right of the page and open the screen settings area and click “Layout Settings”)

Update the page and your new banner should show up on that page!

Right now only one page has the new test header – http://kathysanto.server285.com/private-dog-training/ When I get the image adjusted the way I want, I’ll then go in and change all the pages to have the custom body class.

Let me know if that works for you Fran!

---

JT Dataworks Web design and SEO

[socialspark]

Wow, Judy, thanks!

I will give this a try. I really appreciate you coming back here and following up for me. 🙂

Fran

[Skysage]

Hey Guys,
I had the same issue and using the information you posted, I found a solution.

You have to edit both the home.js file and the global.js file.

The home.js file controls what appears only on the home page and the global.js file controls what appears on all the other pages.

Here's what you need to add to the bottom of both files before the closing }); tag

home.js
$('.front-page-header').css('background-image', 'url("/Path_to_Image_Folder/Home_Page_Background_Image.jpg")');

global.js

$('.front-page-header').css('background-image', 'url("/Path_To_Image_Folder/All_Other_Pages_Background_Image.jpg")');

Have fun.

Tarik

[Author]

Posts