Forum Replies Created
-
AuthorPosts
-
August 19, 2013 at 6:53 pm in reply to: Genesis Framework – Custom Header for DIfferent Pages #57469kimribbansMember
I submitted a ticket to StudioPress' support
K
August 19, 2013 at 6:30 pm in reply to: Genesis Framework – Custom Header for DIfferent Pages #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
August 19, 2013 at 6:12 pm in reply to: Genesis Framework – Custom Header for DIfferent Pages #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:11 pm in reply to: Genesis Framework – Custom Header for DIfferent Pages #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 10:12 am in reply to: Genesis Framework – Custom Header for DIfferent Pages #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 8:16 am in reply to: Genesis Framework – Custom Header for DIfferent Pages #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 18, 2013 at 7:44 pm in reply to: Genesis Framework – Custom Header for DIfferent Pages #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 18, 2013 at 7:07 pm in reply to: Genesis Framework – Custom Header for DIfferent Pages #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 4:18 pm in reply to: Genesis Framework – Custom Header for DIfferent Pages #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 3:42 pm in reply to: Genesis Framework – Custom Header for DIfferent Pages #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 3:37 pm in reply to: Genesis Framework – Custom Header for DIfferent Pages #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:20 pm in reply to: Genesis Framework – Custom Header for DIfferent Pages #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 11:50 am in reply to: Genesis Framework – Custom Header for DIfferent Pages #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
-
AuthorPosts