1

[mdixon]

mdixon

#6463

I’m using the Graphene theme (latest version) with a child theme on my client’s site http://www.walkinghorseowners.com. I’ve looked through the other posts related to this topic and have done all the steps I’ve seen to change the header image size.

I’ve changed the child theme’s CSS #header height and #header_img_link height, then adding the following to the child theme’s functions.php:

<?php

function graphene_custom_header_width(){

return 960;

}

function graphene_custom_header_height(){

return 140;

}

add_filter('graphene_header_image_width', 'graphene_custom_header_width');

add_filter('graphene_header_image_height', 'graphene_custom_header_height');

?>

excerpt from style.css: http://pastebin.com/yFsVQaBp

entire header.php: http://pastebin.com/Mvi6Y7hy

Currently the header image appears correctly in the Custom Header preview, but the top of the image is cut off on the live site.

screenshot of WordPress Custom Header

screenshot of Graphene Header Display Options

screenshot of live site

Can anyone tell me what I’ve done incorrectly?

[Kenneth John Odle]

Kenneth John Odle

#34432

You are using Graphene 1.8.2. Header image size is a theme option now, you do not need to use a child theme for this.

Also, do not copy the entire theme’s stylesheet over to your child theme stylesheet. This can cause issues. Instead, only include those elements you need to change.

Backticks are located above the TAB key (on the same key as the ~). I’ve fixed this for you.

If you have edited theme files, this will make troubleshooting issues that more difficult. You shouldn’t edit theme files.

[mdixon]

mdixon

#34433

I have not edited theme files, only child theme files.

Okay, I removed the function hacks I was using to set the header height, and I revised my child theme’s stylesheet to include only the necessary changes (see updated version). My header.php remained the same.

I have used the theme option to set the header image height at 140px. However, nothing changed on my live site. The top part of the header still appears to be cropped off.

[Kenneth John Odle]

Kenneth John Odle

#34434

Looks okay to me:

Have you cleared your browser and server caches?

[mdixon]

mdixon

#34435

Your screenshot is exactly what I’m seeing. The correct header image is this one.

See how the top of the logo is cut off?

[Anonymous]

Anonymous

#34436

That’s the top-bar covering it. Use this,

#top-bar {

background: none !important;

}

[mdixon]

mdixon

#34437

Figured it had to have something to do with the top bar but was confused since I already had background: none;

THANK YOU so very much!

[Anonymous]

Anonymous

#34438

Yeah, you have

#top-bar, .top-bar-preview .top-bar {

background: linear-gradient(#FFFFFF, #FFFFFF) repeat scroll 0 0 transparent;

}

which doesn’t work. Change linear-gradient to none.

[mdixon]

mdixon

#34439

Okay, I’m now good in all browsers except (you guessed it) IE 8 & 9.

Any idea why I’m getting this awful gradient and my social media icons (#social_icons) aren’t appearing?

My #top_bar CSS is now:

#top-bar {

background: none !important;

border-bottom:0;

margin-top: 0px;

position: absolute;

overflow: visible;

}

#top-bar, .top-bar-preview .top-bar {

background: none !important;

}

[Anonymous]

Anonymous

#34440

Create a 10X10 transparent png and try using it as top-bar background image.