Different Headers & Different Sizes for Different Pages

Community Forums Forums Design Tips and Tricks Different Headers & Different Sizes for Different Pages

This topic is: resolved

Tagged: , ,

This topic contains 7 replies, has 4 voices, and was last updated by  moxiegirl 1 year, 6 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #20190

    moxiegirl
    Participant
    Post count: 71

    Or the post that could have been titled Diff’rent Strokes? 

    Working on Prose Theme and I would like a header on the Home page to be 940 x 656.

    On all the other pages I would like a header image to be 940 x 129.

    Your help would be divine in accomplishing this :) Muchas gracias!

     

    #20200

    asdweb
    Participant
    Post count: 105

    You can do this with the style sheet.

    Post a link to your site so we can see what may need to be changed.


    Amy Susan Design.com @AmySusanDesign

    #20209

    moxiegirl
    Participant
    Post count: 71

    I’m working it offline so it’s not live right now.

    #20236

    Tony @ AlphaBlossom
    Participant
    Post count: 503

    Hello,

    It’s hard to say exactly which is the best way without seeing your site, but you can set your background image for all pages, probably:


    #header {
    background-image: ~ your image here
    background-repeat: no-repeat;
    background-position: center center;
    height: 129px;
    }

    Then for your home page:

    .home #header {
    background-image: ~ larger image here;
    height: 656px;
    }

    The .home #header will work on the home page only. That’s very rough since I can’t see what’s going on, but it should be enough to get you going.


    #20441

    moxiegirl
    Participant
    Post count: 71

    Okay, I published the website and that didn’t exactly work (so that isn’t live).

    Website is http://www.mupplebee.com/

    When I used the code provided, it used the larger image, and cropped it to the smaller image’s height. Also the part about signing up for my newsletter then went and cramped over to the right hand side of the pink area.

    Thanks for your help, I do appreciate it

    #20445

    Tony @ AlphaBlossom
    Participant
    Post count: 503

    You’ll need two different css rules, one for the home header, and one for the rest of the headers.

    So it should be:


    #header {
    max-width: 940px;
    margin: 0 auto;
    width: 100%;
    height: 150px;
    background: url("http://www.mupplebee.com/wp-content/uploads/2013/02/SHORTERIMAGE.png") no-repeat scroll 0 0 transparent;
    }


    .home #header {
    height: 656px;
    background: url("http://www.mupplebee.com/wp-content/uploads/2013/02/WebsiteHeader.png") no-repeat scroll 0 0 transparent;
    }

    You may need to add !important at the end of one or both of the .home #header rules (before the semicolon). That should do what you need.

    The newsletter is outside of the header, so it should be affected…hard to tell without seeing it :)


    #20481

    braddalton
    Participant
    Post count: 9219

    CSS would be the best way to go however you could also use conditional tags for this but you might need to add code for flexible header heights or it might resize them. http://codex.wordpress.org/Custom_Headers
    [php]
    $args = array(
    ‘flex-width’ => false,
    ‘width’ => 940,
    ‘flex-height’ => true,
    ‘height’ => 100,
    ‘default-image’ => get_template_directory_uri() . ‘/images/header.jpg’,
    );
    add_theme_support( ‘custom-header’, $args );
    [/php]

    Then you can add the different headers with conditionals
    [php]
    <?php if (is_home() ) { ?>
    <div><a href="http://domain.com/wp-content/uploads/2013/02//header-large.png&quot; width="940" height="656" /></a></div>
    <?php } ?>

    <?php if (!is_home() ) { ?>
    <div><a href="http://domain.com/wp-content/uploads/2013/02//header-small.png&quot; width="940" height="100" /></a></div>
    <?php } ?>
    [/php]

    You could add this to a custom function or using the SImple Hooks plugin

    You might also need to edit the default height in the child themes style.css file.

    There’s also a plugin named wp display headerthat may work for you.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #20518

    moxiegirl
    Participant
    Post count: 71

    Yes! Got it with the CSS.

    At first it still wasn’t working until I remembered to changed the default header to the smaller image (as it is on all the pages except the home page). Then I went in to change the default height as well to the height of the smaller image. 

    Thank you!!! This community rocks!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.