[jtdatawork]

That was it! Thanks! I'm not sure how I lost that bit, but I put it back lol! 🙂

---

JT Dataworks Web design and SEO

[jtdatawork]

Thank you Susan. I appreciate the tip!

---

JT Dataworks Web design and SEO

[jtdatawork]

Thank you! Your tutorials are great!

---

JT Dataworks Web design and SEO

[jtdatawork]

Hi Lauren,

Thanks! I had tried the media queries, but they didn't work. I must have had some bad code in there. I reset the stylesheet and tried again and it worked.

Thanks for encouraging me to try again. 🙂

Judy

---

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

[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,

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

[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

[jtdatawork]

Yay that worked! That's what I get for copying someone else's code without understanding all parts of it.

THANK YOU SO MUCH!

Judy

---

JT Dataworks Web design and SEO

[jtdatawork]

Thank you for catching that!

I've removed it, but the link problem remains. I have no idea why the CSS would affect the links, but removing the code that makes the sidebar go all the way down brings the links back. Adding it back gives me the sidebar extension, but breaks the links.

Any other thoughts?

Many thanks!

---

JT Dataworks Web design and SEO

[jtdatawork]

Thanks Susan for checking back! 🙂 I ended up just going to another theme.

Judy

---

JT Dataworks Web design and SEO

[jtdatawork]

This is great! Thank you so much! That places the banner and now just a bit of CSS and it will be perfect. I may just put the tagline in the banner itself.

Judy

---

JT Dataworks Web design and SEO

[jtdatawork]

Yep, it worked! Thank you, thank you!

Judy

---

JT Dataworks Web design and SEO

[jtdatawork]

Hi Ryan,

YAY! I'm not crazy! Thanks for the note. 🙂 After hours of trying to figure it out, it appears that the line is actually part of the background color showing through because the navigation block does not cover it. I tried changing the padding but it didn't help. I tried finding another theme to use that nav code, but this new "feature" seems to be designed into most of the new themes, not just Lifestyle!

Fix it I cannot. I finally just changed the design. I'll be delighted if you can find a solution because this is really cramping my choices in designing the nav bar look on sites.

Judy

---

JT Dataworks Web design and SEO

[jtdatawork]

Thank you!

---

JT Dataworks Web design and SEO

[jtdatawork]

Thank yous for finding that! It was left over from my attempts to find or fix this, and I removed it.

But the problem persists. That line is part of the original theme. If you look at the Lifestyle theme demo, you can see it if you click on a link, then mouse over the adjoining one. I just can't figure out how to remove it. 🙁

http://my.studiopress.com/themes/lifestyle/#demo-full

---

JT Dataworks Web design and SEO

[jtdatawork]

I finally just made a separate image for each media size. Time consuming, but it looks great.

---

JT Dataworks Web design and SEO

[jtdatawork]

Thanks for the response! Yes, I am aware I am using the full width header, and have tried, both changing the header info sizing in the media area, and adding a differently sized replacement image. Neither worked so I am for some more specific info so I can see what I did wrong. Incorrect css, or perhaps something in the function file is overriding the style changes? I prefer to have the header shrink. The logo is adequately clear at any size.

---

JT Dataworks Web design and SEO

[jtdatawork]

THANK YOU pathetix! I looked and looked for that. I was able to just go in and change it to 0px. You made my day!

Judy

---

JT Dataworks Web design and SEO

[jtdatawork]

I've looked at the original demo of the theme and there is definitely a visible white border/box on the demo's slider. Searched the CSS for "border" but still can't find it. 🙁

---

JT Dataworks Web design and SEO

[Author]

Posts