Header Image Size Change

  • 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?

    Mod

    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

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

    Mod

    Kenneth John Odle

    #34434

    Looks okay to me:

    gvsCB.png

    Have you cleared your browser and server caches?

    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?

    Prasanna SP

    #34436

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

    #top-bar {
    background: none !important;
    }

    bfp4R.png

    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!

    Prasanna SP

    #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

    #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;
    }

    Prasanna SP

    #34440

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

    mdixon

    #34441

    Tried it and there was no change in appearance.

    #top-bar {
    background: url(images/top-bar-background.png) repeat !important;
    border-bottom:0;
    margin-top: 0px;
    position: absolute;
    overflow: visible;
    }
    #top-bar, .top-bar-preview .top-bar {
    background: url(images/top-bar-background.png) repeat !important;
    }

    Prasanna SP

    #34442

    Let’s see if IE 8 & 9 honour this,

    function transparent_top_bar_bg_ie(){ ?>
    <!--[if gte IE 8]>
    <style type="text/css" media="screen">
    #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;
    }
    </style>
    <![endif]-->
    <?php
    }
    add_action( 'wp_head', 'transparent_top_bar_bg_ie' );

    mdixon

    #34443

    Copied to my child theme’s functions.php…no change.

    I was looking in Firebug to see what other styles might be affecting the top-bar, but can’t find that blue gradient anywhere. Must be a default IE thing?

    Luko

    #34444

    Try this:

    #top-bar {
    -ms-filter:none !important;
    }

    You’re unable to see it in firebug, because it’s not active. Open IE9 and hit F12.

    It’s inline element located in includes/theme-head.php.

    mdixon

    #34445

    Genius! That did it—thank you!

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

You must be logged in to reply to this topic.