Header Nav Not Pulling Custom Sprites Properly

  • jrothra

    #23674

    Could be screen brightness or something, but here’s a screenshot of what I see (not sure the contrast will be any clearer, but here’s hoping): http://www.greggcountygop.com/wp-content/uploads/2012/03/BlackBlueScreenShot.png

    jrothra

    #23675

    The odd thing is that regardless of the differences on the screens, it should be black at all since the sprite it’s using is blue. It’s like it’s pulling from the original sprite for the drop down sections, and the customized child theme sprite for the main/top menu, although. Very odd.

    jrothra

    #23676

    Question I just thought of that may shed some light. Does the theme use the same exact image (same place in the same sprite) for the background of top part of the main menu and the drop down parts?

    If so, then the problem is something missing in the code for my child theme (I would think). Right?

    Mod

    Kenneth John Odle

    #23677

    Does the theme use the same exact image (same place in the same sprite)

    No. Check the changelog here:

    http://dev.khairul-syahir.com/wordpress/graphene/documentation/changelog/

    Increased the spacing in sprite image so that primary menu can span over two lines

    Not sure if this solves your issue, but you may be on to something here.

    jrothra

    #23678

    Kenneth,

    Increasing the width wasn’t meant to solve the problem, but to allow others to see the colors of the sprite I’m using since a 1px wide image doesn’t show the colors well.

    Regarding the changelog, I don’t understand about 30% of that stuff. Regardless, my child theme’s CSS, as far as I can tell, says to use the same sprite image for the entire main nav menu backgrounds, top portion and drop down portions (I don’t use the secondary menu). However, the drop down and top portions are different colors, though they use the same exact sprite. See the code in the original post.

    Mod

    Kenneth John Odle

    #23679

    It’s not the width of the sprite image you posted that the changelog is talking about. It’s that the images on the Graphene sprite have been moved down.

    1.5.6 sprite:

    http://themes.svn.wordpress.org/graphene/1.5.6/images/sprite_h.png

    1/6 sprite:

    http://themes.svn.wordpress.org/graphene/1.6/images/sprite_h.png

    jrothra

    #23680

    True. Like I said, I changed the width exclusively for others to see the colors I used. On another note, since my CSS dictates that the sprite “sprite_h-JLR.png” be used and not the default ones, would it not matter what the new default is, it’s not being used by my child theme. Cf. the code in the OP.

    And since I’m using the customized sprite for the menu background images, and since the image that should be used is blue and not black (cf. the widened version), why is it still black on the site? It’s like the site is ignoring the CSS for the submenu.

    jrothra

    #23681

    Let me try all this from the beginning, as it seems either I’m missing something or I’ve failed to clearly explain the issue.

    URL: http://www.greggcountygop.com

    I only use the main menu, not the second one. I have followed the instructions for child themes, and have the following custom CSS in my child theme CSS file:

    /* =Navigation
    
    */

    .menu-bottom-shadow {
    background: url(images/sprite_h-JLR.png) left top repeat-x #eee;
    }

    #header-menu, #header-menu-wrap {
    background: url(images/sprite_h-JLR.png) left -3px repeat-x #05223b;
    }

    #header-menu > li:hover,
    #header-menu > li.current-menu-item,
    #header-menu > li.current-menu-ancestor {
    background: url(images/sprite_h-JLR.png) left -100px repeat-x #eee;
    }

    #header-menu ul li {
    background: url(images/sprite_h-JLR.png) left -377px repeat-x #dfdfdf; !important;
    }

    #secondary-menu {
    background: url(images/sprite_h-JLR.png) left -540px repeat-x #222;
    }

    #secondary-menu > li:hover,
    #secondary-menu > li.current-menu-item,
    #secondary-menu > li.current-menu-ancestor {
    background: url(images/sprite_h-JLR.png) left -614px repeat-x #dfdfdf;
    }

    #secondary-menu ul li {
    background: url(images/sprite_h-JLR.png) left -614px repeat-x #dfdfdf;
    }

    /* =Content Area

    As seen, I use a specific, customized sprite for the menu’s background images, both the top portions and the drop down portions. You can see that customized sprite here: http://www.greggcountygop.com/wp-content/themes/graphene-child/images/sprite_h-JLR.png.

    Here is a widened version so the colors I used are clearly visible: http://www.greggcountygop.com/wp-content/uploads/2012/03/sprite_h-JLR-200w.png

    Although my CSS says to use the custom sprite, when you view the menu, the drop down portions are using what seems to be NOT the custom sprite, but something else, apparently disregarding/overriding the CSS. Here’s a screen shot of the color variation: http://www.greggcountygop.com/wp-content/uploads/2012/03/BlackBlueScreenShot.png.

    madhogg

    #23682

    Hy. I have a similar problem. I modified the sprite_h.png image, and copyed it in the child theme image folder, i added in the child theme style.css the original code from the parent style.css for the menu bar.

    My problem is that the main menu bar didn’t change colors, like it’s pulling the color from the parent sprite_h, not from the child. What am i missing ?

Viewing 9 posts - 11 through 19 (of 19 total)

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