Community Forums › Forums › Archived Forums › Design Tips and Tricks › Genesis Framework – Custom Header for DIfferent Pages
- This topic has 23 replies, 3 voices, and was last updated 10 years, 6 months ago by lflier.
-
AuthorPosts
-
August 17, 2013 at 10:03 pm #57121kimribbansMember
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/#August 18, 2013 at 5:46 am #57133Brad DaltonParticipantSmaller width or height?
How many pages do you want to display different headers one?
August 18, 2013 at 11:50 am #57184kimribbansMemberHi 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
August 18, 2013 at 1:05 pm #57197Brad DaltonParticipantHello 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?
August 18, 2013 at 3:20 pm #57210kimribbansMemberHi 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
August 18, 2013 at 3:37 pm #57215kimribbansMemberSo 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
August 18, 2013 at 3:42 pm #57217kimribbansMemberThis 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
August 18, 2013 at 4:18 pm #57223kimribbansMemberI've had to revert to the old look as I'm working on the site with my client right now - FYI
August 18, 2013 at 4:39 pm #57228Brad DaltonParticipantAugust 18, 2013 at 5:45 pm #57244Brad DaltonParticipantAugust 18, 2013 at 7:07 pm #57249kimribbansMemberThanks 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-headerBut in the video the conditional tags are:
.home .site-header
and
.site-headerIf 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
August 18, 2013 at 7:29 pm #57251Brad DaltonParticipantThe 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.
August 18, 2013 at 7:44 pm #57252kimribbansMemberOK...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
August 19, 2013 at 8:16 am #57312kimribbansMemberSo 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
August 19, 2013 at 8:47 am #57314Brad DaltonParticipantYou may have made some edits to the CSS which are causing the problem.
August 19, 2013 at 10:12 am #57332kimribbansMemberYes that's what I thought, so I reverted back to the clean original theme with no CSS edits - just added that code from you - and still no luck...
K
August 19, 2013 at 5:14 pm #57445Brad DaltonParticipantAugust 19, 2013 at 6:11 pm #57461kimribbansMemberThanks
I tried that and now I'm getting the small header on top of the big header (logo.png) on all type of pages home and sub.
Here's a screen shot of the home page
https://www.dropbox.com/s/sosriij5x70rjnb/home-page-header.jpgAnd here are the sub pages
https://www.dropbox.com/s/w51yko0n023bi2p/sub-page-header.jpgHere's the home page on the Raw Genesis theme - no child
https://www.dropbox.com/s/459nto7ac4hmg31/home-page-header-clean-site.jpg
And here's the sub page on the same raw theme
https://www.dropbox.com/s/hqmongrzzqv19d5/sub-page-header-clean-site.jpg
PLUS. Today I broke the whole site when I activated Jetpack and had to do a full clean re-install, and rebuild all the pages, so the site is clean.
I know what is one of the problems. I have a widget in the header. When I take it out I can at least get the big header to show up... its live right now (http://dawnclark.net/mirror/). But when I put it back I get the results above.
p.s.
Here’s the code I inserted above all the other CSS styling – to make sure I got it right
/* ========== CUSTOM HEADERS FOR DIFFERENT PAGES ==========*/
.home .site-header {
background: url(“images/big-logo.png”) no-repeat scroll 0 0 transparent;
height: 260px;
width: 1080px;
overflow: auto;
margin: auto;
}.site-header {
background: url(“images/small-logo.png”) no-repeat scroll 0 0 transparent;
height: 100px;
width: 1080px;
overflow: auto;
margin: auto;
}I think I'm going to have to give up...
August 19, 2013 at 6:12 pm #57462kimribbansMemberWhat I am actually getting is just the small header image - small-logo.png
The other image that is showing up underneath it is the default logo image (logo.png)
So... I edited the CSS this section and added display: none;
.header-image .site-header .wrap {
background: url(images/logo.png) no-repeat left;
display: none;
padding: 0;
}The logo.png isn't showing up anymore. But the heights are still the same
K
August 19, 2013 at 6:30 pm #57466kimribbansMemberSo I found a CSS section for header height and commented it out. SUCCESS....!!!!
However... it IS NOW working with the different size headers BUT I now can't put any widgets in the header.
I'll have to see which my client wants... different size headers or a widget in the header... I should contact the Genesis folks and let them know
Thanks for all your time on this - I really appreciate it
K
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.