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 1 year, 11 months ago.

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

    kimribbans
    Participant

    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

    Smaller width or height?

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


    #57184

    kimribbans
    Participant

    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

    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

    .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;
    }
    

    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?


    #57210

    kimribbans
    Participant

    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

    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

    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

    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
    #57244

    braddalton
    Participant
    #57249

    kimribbans
    Participant

    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

    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.


    #57252

    kimribbans
    Participant

    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

    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

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


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

You must be logged in to reply to this topic.