Header Image Size Change
-
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
Can anyone tell me what I’ve done incorrectly?
Mod
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.
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.
Mod
Looks okay to me:
Have you cleared your browser and server caches?
That’s the top-bar covering it. Use this,
#top-bar {
background: none !important;
}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.
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;
}Create a 10X10 transparent png and try using it as top-bar background image.
- 1
- 2
- You must be logged in to reply to this topic.