Genesis Framework – Custom Header for DIfferent Pages

Community Forums Forums Design Tips and Tricks Genesis Framework – Custom Header for DIfferent Pages

This topic is: not resolved

This topic contains 23 replies, has 3 voices, and was last updated by  lflier 11 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #57121

    kimribbans
    Participant
    Post count: 21

    Hi

    I have searched the forum but couldn’t find this.

    I am using a Child Theme on a dev site for a client and I want to have to ability to have different size (depth) headers on different pages. I am assuming that I would need to create a new Page Template. Can anyone point me to what the content for that page template would need to be so I could still have the Genesis layouts options but have the Home page, for instance, on one size header and the sub-pages on a smaller header. I have styled the css of the default header to the size I want for the home page, and want to have other (most) pages on a smaller header.

    Thanks

    Kim

    http://dawnclark.net/mirror/#
    #57133

    braddalton
    Participant
    Post count: 9441

    Smaller width or height?

    How many pages do you want to display different headers one?


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #57184

    kimribbans
    Participant
    Post count: 21

    Hi Brad

    Sorry I said depth when I meant height – The consensus from the client right now is that maybe the home page on a full height header and all the sub pages on a smaller one.

    So possibly just one page (home) on a custom header. I have tried using the php method and the css method (preferred) here (http://wpsites.net/web-design/displaying-different-header-images/) but couldn’t style both types of pages so that the Nav bar stayed in the right places on both.

    The css that got closest from that post was:

    .home .site-header {
    height: 262px;
    background: url(“images/big.png”) no-repeat scroll 0 0 transparent;
    }

    .site-header {
    max-width: 980px;
    margin: 0 auto;
    width: 100%;
    height: 149px;
    background: url(“images/small.png”) no-repeat scroll 0 0 transparent;
    }

    Since I have already tweaked the header to be higher with CSS adjusting the Nav bar (with widgets in the header was interesting!

    Thanks

    Kim

    #57197

    braddalton
    Participant
    Post count: 9441

    Hello Kim

    No need to modify any CSS code and if you do, please copy it to the end of the file before making changes.

    This is the code i used and tested locally which works. Here’s the video
    [css]
    .site-header {
    background: url("images/home-header.png") no-repeat scroll 0 0 transparent;
    height: 300px;
    }

    .page-template-default .site-header {
    background: url("images/page-header.png") no-repeat scroll 0 0 transparent;
    height: 120px;
    }
    [/css]

    This sets a default and then displays another on all pages.

    You can change the body class which you’ll find in your source code.

    Here’s the full tutorial http://wpsites.net/web-design/displaying-different-header-images/#The_Best_Solution_With_CSS

    What theme are you using to customize?


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #57210

    kimribbans
    Participant
    Post count: 21

    Hi Brad

    yes it was your tutorial I was trying to follow before. But I am using Genesis Framework and the functions.php file content (in totality) is below:

    <?php
    /*
    WARNING: This file is part of the core Genesis Framework. DO NOT edit
    this file under any circumstances. Please do all modifications
    in the form of a child theme.
    */

    /**
    * This file calls the init.php file, but only
    * if the child theme hasn’t called it first.
    *
    * This method allows the child theme to load
    * the framework so it can use the framework
    * components immediately.
    *
    * This file is a core Genesis file and should not be edited.
    *
    * @category Genesis
    * @package Templates
    * @author StudioPress
    * @license GPL-2.0+
    * @link http://my.studiopress.com/themes/genesis
    */

    require_once( dirname( __FILE__ ) . ‘/lib/init.php’ );

    So I gave up on that method.

    Is it because of using 2.0??

    Or maybe I created the Child Theme wrong!

    Kim

    #57215

    kimribbans
    Participant
    Post count: 21

    So I followed another tutorial with a sample Genesis child theme and used the functions.php from that. Here is the content of the functions.php file:

    <?php
    //* Start the engine
    include_once( get_template_directory() . ‘/lib/init.php’ );

    //* Child theme (do not remove)
    define( ‘CHILD_THEME_NAME’, ‘Genesis Sample Theme’ );
    define( ‘CHILD_THEME_URL’, ‘http://www.studiopress.com/’ );
    define( ‘CHILD_THEME_VERSION’, ’2.0.0′ );

    //* Enqueue Lato Google font
    add_action( ‘wp_enqueue_scripts’, ‘genesis_sample_google_fonts’ );
    function genesis_sample_google_fonts() {
    wp_enqueue_style( ‘google-font-lato’, ‘//fonts.googleapis.com/css?family=Lato:300,700′, array(), CHILD_THEME_VERSION );
    }

    //* Add HTML5 markup structure
    add_theme_support( ‘html5′ );

    //* Add viewport meta tag for mobile browsers
    add_theme_support( ‘genesis-responsive-viewport’ );

    //* Add support for custom background
    add_theme_support( ‘custom-background’ );

    //* Add support for 3-column footer widgets
    add_theme_support( ‘genesis-footer-widgets’, 3 );

    So there wasn’t a custom header support line code. I replaced the functions.php file I had in the child them and it worked as it did.

    I then copied the css from your tutorial and changed the image names – but it is still displaying the old logo.png on both types of pages although the height has changed. So I switched off the command in Genesis setting to not display the logo.png and it just displayed the site name and tag – no images. Plus the Nav bar background is at 120px (the height of the secondary pages – on ALL pages.

    Kim

    #57217

    kimribbans
    Participant
    Post count: 21

    This is the content of my new functions.php in the child theme folder.

    <?php
    //* Start the engine
    include_once( get_template_directory() . ‘/lib/init.php’ );

    //* Child theme (do not remove)
    define( ‘CHILD_THEME_NAME’, ‘Genesis – Child Theme’ );
    define( ‘CHILD_THEME_URL’, ‘http://dawnclark.net/mirror/’ );
    define( ‘CHILD_THEME_VERSION’, ’2.0.0′ );

    //* Enqueue Lato Google font
    add_action( ‘wp_enqueue_scripts’, ‘genesis_sample_google_fonts’ );
    function genesis_sample_google_fonts() {
    wp_enqueue_style( ‘google-font-lato’, ‘//fonts.googleapis.com/css?family=Lato:300,700′, array(), CHILD_THEME_VERSION );
    }

    //* Add HTML5 markup structure
    add_theme_support( ‘html5′ );

    //* Add viewport meta tag for mobile browsers
    add_theme_support( ‘genesis-responsive-viewport’ );

    //* Add support for custom background
    add_theme_support( ‘custom-background’ );

    //* Add support for 3-column footer widgets
    add_theme_support( ‘genesis-footer-widgets’, 3 );

    I must be doing something wrong

    http://dawnclark.net/mirror/about-dawn/

    http://dawnclark.net/mirror/

    Kim

    #57223

    kimribbans
    Participant
    Post count: 21

    I’ve had to revert to the old look as I’m working on the site with my client right now – FYI

    #57228

    braddalton
    Participant
    Post count: 9441

    What width are you using?


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #57244

    braddalton
    Participant
    Post count: 9441

    Here’s the screencast http://youtu.be/xFLNtb9JyWc

    You can use any width and height


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #57249

    kimribbans
    Participant
    Post count: 21

    Thanks Brad

    I wasn’t using any width commands. So I looked at the screencast and added

    width: 1600px;

    and also

    overflow: auto;
    margin: auto;
    position: center;

    Its working now but I have the same header image (small-logo.png) and the same height on ALL pages, even though the images in the directory are different.

    Here’s the code I have in my CSS now.

    .home .site-header {
    background: url(“images/big-logo.png”) no-repeat scroll 0 0 transparent;
    height: 260px;
    width: 1600px;
    overflow: auto;
    margin: auto;
    position: center;
    }

    .page-template-default .site-header {
    background: url(“images/small-logo.png”) no-repeat scroll 0 0 transparent;
    height: 100px;
    width: 1600pc;
    overflow: auto;
    margin: auto;
    position: center;
    }

    That follows your tutorial page, but is different to the screencast.

    in the tutorial page it says the conditional tags are:

    .home .site-header
    and
    .page-template-default .site-header

    But in the video the conditional tags are:

    .home .site-header
    and
    .site-header

    If I follow the video ALL the headers are 260px high.

    If I follow the tutorial page ALL the headers are 100px high

    I’m not sure what’s happening

    Thanks for your time on this.

    Kim

    #57251

    braddalton
    Participant
    Post count: 9441

    The width is called a property and the commands are actually called classes.

    There’s no commands or conditional tags in CSS.

    Not sure what is happening with your CSS but i can give you the full style sheet i’m using on the test site.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #57252

    kimribbans
    Participant
    Post count: 21

    OK…sorry… yes… it’s late. My client’s site (which we’ve been working on for a year) got hacked last week so we are building a new site in 4 days for her launch next week. I am caffeine and 4 hours sleep. I’m new to Genesis which was a recommendation to her, so I’m rushing to get it all up the way she wants.

    Yes, I’m not sure. I have the new Header CSS section above all the other css style changes I have made and I’ve looked through them to see if anything is affecting the header… can’t see anything below at all that even comes close to the header. I did have a header.site-header height command but I commented it out.

    If you can let me have that style sheet I’ll take a look through

    Thanks

    Kim

    #57312

    kimribbans
    Participant
    Post count: 21

    So I reverted back to the main theme (not my Child Theme) and added that code to the end, without any of my style edits, and it still didn’t work, so I don’t know what’s happening.

    K

    #57314

    braddalton
    Participant
    Post count: 9441

    You may have made some edits to the CSS which are causing the problem.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.