Different size header images for McKinley theme

  • Unknown's avatar
    nisadeconnect · Member ·

    I was just wondering if it is possible to change the templates for the McKinley theme? I have set up a website and I love the homepage as a large image, but want the other pages to have a smaller image header -so the content does not sit so far down the page.
    Can you help?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    Sure! There’s a trick to this kind of thing, which is to reset the height of the header everywhere with one rule and then set it back to being very tall with a rule specific to just the home page. Here’s how to do it for the McKinley theme:

    .site-header {
	height: 220px;
}

.home .site-header {
	height: 670px;
}
  • Unknown's avatar
    nisadeconnect · Member ·

    Thank you very much, this worked perfectly, however I would also like to actually change the image for each page on the site. Is it possible to do this?
    Thanks again!

  • Unknown's avatar
    designsimply · Member ·

    That’s possible! To do it, first you need to learn how to find the unique identifier for each page.

    Here is a general help page showing how to use your browser tools to look at the HTML and CSS for a page:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    The “home” part of the previous example is called a body class selector. Each page has a unique body class, and you can look at the HTML to find it and then use it to adjust the site-header background image and height with a custom image for just that page.

    Here is a short screencast showing an example of how to find the body class ID for the Services page on your blog. In the example, I check for the class name, then test it in the style editor tab while adjusting the background image and height:

    I used Firefox 30 in the screencast, but other browsers have similar tools built in.

    Here is the CSS from the screencast:

    .page-id-21 .site-header {
    background: url(http://i2.wp.com/s.w.org/about/images/logos/wordpress-logo-notext-rgb.png?w=150) center;
	height: 150px;
}

    To customize it with a different image, replace the url() value with an image of your choice and adjust the height value to match the height of your image.

    To make the same adjustment for other pages, use your browser tools to find out the unique class name for the page, copy the CSS snippet from above, and adjust the class name, url() value, and height as needed.

  • Unknown's avatar
    designsimply · Member ·

    I really love how the http://popcornlodgeniseko.com/ website is turning out with the McKinley theme!

    Here are a couple other suggestions that may help you.

    You may want to turn off comments for some of the pages. To do that, open each page for editing and look for the Discussion box at the bottom of the edit page. If you don’t see it, click the “Screen Options” tab at the top right and make sure “Discussion” is checked. Then find the Discussion box, uncheck the “Allow comments” and “Allow trackbacks” options, and save changes. You need to do this for each page where you want to turn off comments.

    Another thing you might like is changing the appearance of the sharing icons for each page. Go to Settings > Sharing and find the option for “Button style.” Change the option to “Icon only” and look at the live preview of the sharing buttons just above that option. If you like the change, click the “Save Changes” button. You can find more information about sharing settings at http://en.support.wordpress.com/sharing/

    On the gallery page, if you ever change want to change around the images, consider trying one of the tiled galleries we offer. There are options for circles, squares, and a tiled mosaic and they are really cute! You can see examples at http://en.support.wordpress.com/images/gallery/#examples-of-gallery-styles

  • The topic ‘Different size header images for McKinley theme’ is closed to new replies.