Cafe Pro – Custom header for each page

[ubuntu]

Hi There

I need to create a custom header for each page with the height of each header (a part from the home page) slightly smaller e.g. 300 or 400 px.

I can't seem to get this right using the genesis custom header as the original home page image is also added. I really need some help and hoping somoeone has a fix for this.

Thank you in advance.

[carasmo]

I'll assume, you want a different background image behind the logo area on the inside pages? The way the Cafe Pro theme works now is by adding a background image to the class ".front-page-header" which is the header class on all pages, home page or not.

To adjust what image is shown as the background for that header on all but the home page, you can add a little addition to your functions.php file which adds a class to the body tag based on the page/post slug:

// ==== Page Slug Body Class add to functions.php
function add_slug_body_class($classes)
	{
	global $post;
	if (isset($post))
		{
		$classes[] = $post->post_type . '-' . $post->post_name;
		}

	return $classes;
	}

add_filter('body_class', 'add_slug_body_class');

Then each page and post will have classes like this:

page-x
post-x

Where "X" is the slug. A slug is created by the words and then there's a hyphen between. A page with the title

Home Vegan Cooking

slug is

home-vegan-cooking

and the class is

.page-home-vegan-cooking

And a post with that will be .post-....

Now you have these classes to target to change the background image on a page by page basis and the fallback will be the one used on the home.

In your style.css if you want to change the background image on the about page with the slug "about-us" then do this:

body.about-us-page  .front-page-header {
  background-image:url(absolute/path/to/content-image.jpg);
}

For another page with the slug "portfolio-case-studies"

body.portfolio-case-studies-page  .front-page-header {
  background-image:url(absolute/path/to/another-imag-content-image.jpg);
}

Look at your source code with your code inspector and see that on archive the class on the body is called archive but if you want to change something like this, since other elements on the page might have the same class, you won't get what you want so use body.archive .front-page-header.

To adjust the height of all inside page headers globally add this to your style.css and adjust the padding:

.site-header .wrap {
   paddin-top:50px /*padding top  */
   paddin-bottom:50px /*padding bottom */
}

The height of the header is based on the height of your logo or site-title and then the padding is adding to make it look nice. Currently it's 100px on the top and bottom. You can't make it a specific height of 300 unless the content (the image or the text) is part of the padding equation.

To do:
Learn more about
background-images in basic CSS
CSS specificity
parent child relationships in CSS

---

Genesis Theme Customization and Help

[carasmo]

Your images on the inner pages will need to be set to background-attachment: scroll; or they will enlarge based on the 0,0 position (learn about position fixed) just like the home page. This should work, but you might have to tweak it:

/* keep home the same (assumes home page has the class "home" on the body)*/
body.home .front-page-header {
  background-attachement:fixed;
}
/* all other pages and posts */
.front-page-header {
  background-attachement:scroll;
}

---

Genesis Theme Customization and Help

[ubuntu]

Hi Carasmo

Thank you for the advice, I tried the whole night, still busy and can't figure out what I am doing wrong. Will keep trying and let you know. I might have to pay you to help me out with this. Feel like I can break something right now.

[carasmo]

I have no idea why it's not working for you, but I suspect it's one of the following:

Your cache -- clear it with whatever caching plugin you're using.
Your code editor -- if you're using the Appearance / Editor make sure you save the file
CSS parsing error -- if you open it { you must close it } -- run your CSS through lint and fix parsing errors. Use a code editor so you can find them by line number.

Ways to prevent this is to use a code editor like sublime text, ftp, and write your css cleanly with indents and follow proper syntax.

---

Genesis Theme Customization and Help

[Author]

Posts