Top bar background image only on home page; Change header height

  • cluborange


    Hey guys, just another question from me, because I am determined to master this theme!

    So I decided to create an extended header image, with the top bar and menu bar part of the design (like I have vertical lines going through top bar, header and menu-wrap). Therefore, I created my header in Photoshop and sliced the images for the top bar, header and menu-wrap.

    I used Custom CSS option to set the background of top bar, menu wrap and header to my created images. It works fine, just the way I want, but only on Home page. If I click on to a post or category, or anything else but the home page, the header gets messed up, with background colours replacing images in top-bar and menu-wrap. I feel that it has something to do with sprites, but I’m not sure.

    Another by-problem I have is that I changed the height of header div, from 198px to 130px. This resulted in incorrect placement of my background header image through graphene “header” settings option (it still thinks the header is 198px high). When I used Custom CSS to put the background image in place, the image didn’t appear because graphene “header” settings was set to ‘no header’ option. So I got out of the situation by selecting one of the default header images in settings, and than adding ‘!important’ to my Custom CSS where I set MY desired header image. However, the same problem holds, it only works for Home page! Previously, I also tried removing the function which pulls the header image from the settings in header.php file, but I decided to change everything as it was because my php knowledge is close to minus infinity… I would love to know how PROPER web designers would solve this problem!

    I appreciate you finishing this long confusing wall of text. Any help will be highly appreciated by the author!



    Damn, I feel kind of stupid because the same problem with the header appeared two topics ago…


    Kenneth John Odle


    this long confusing wall of text

    Indeed! But it’s usually better to get more information than not enough. (I.e., “header broken” tell us nothing.)

    To change the header image size, you are going to need to create a child theme, and then enter this in the child theme’s functions.php file:

    function graphene_custom_header_width(){
    return 900;
    function graphene_custom_header_height(){
    return 198;
    add_filter('graphene_header_image_width', 'graphene_custom_header_width');
    add_filter('graphene_header_image_height', 'graphene_custom_header_height');

    You will need to change the above values to the values you want.

    Previously, I also tried removing the function which pulls the header image from the settings in header.php file

    Hacking core theme files is NOT recommended. Such changes will be lost at the next update, and if you don’t know what you are doing, you could mess things up. That may be what is happening with some of your other issues.


    1) Reinstall a clean copy of Graphene

    2) Create a child theme

    3) Add above code to your child theme functions.php file

    And next time, be sure to post a link to the site in question, because that’s often the best way to figure these things out.





    OK, fair enough, LOL, thank you.

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

  • You must be logged in to reply to this topic.
Graphene Themes Forum