Header Image Size Change

  • mdixon


    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:

    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


    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.


    Kenneth John Odle


    Looks okay to me:


    Have you cleared your browser and server caches?



    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?



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

    #top-bar {
    background: none !important;




    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!



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

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

  • 1
  • 2
  • You must be logged in to reply to this topic.