Menu tab & font colors?

  • saraf

    #2078

    Hello,

    This may be beyond my skillset, but I’m trying to change the colors in the top level menu tabs and fonts for our website happycatshaven.org. I’ve gotten Firebug and have looked at lots of Graphene sites, along with Syahir’s answer to Ricardo in the topic “Change font size and color in menu bar.” I got the top level tab color to change in my child theme, but can only get the font color to change in Firebug and not at all for the submenus. I’d like all the tabs to stay at #C2BAD9, whether in hover or with a submenu, and the submenu to be #D1CEDD.

    I’ve tried pasting in the code from the above topic, with no luck. I’m guessing it has something to do with the sprite image, rather than just a background color on the menu tab? Can someone help me with this code?

    Thanks,

    Sara

    Anonymous

    #18515

    Hi Saraf,

    Yes, specifically, it has to do with a file called sprite_h.png. Do you use photoshop?

    saraf

    #18516

    Yes, I do. I guess I’m really confused about what a sprite image is, even after looking at http://css-tricks.com/158-css-sprites/. I understand it’s a way to compress graphics to load faster, but do I really need to do that just to change a tab color?

    Thanks so much,

    Sara

    Anonymous

    #18517

    Yes. Sprites help your pages load faster. Using a sprite makes only one request to your server for a bunch of different images. This is better than calling each graphic individually, because there are fewer requests to the server.

    If you have an understanding of photoshop, and how to use layers, you’re good to go. You can download all the themes .psd files here:

    http://code.google.com/p/graphene/source/browse/#svn%2Ftrunk%2FPSDs

    The sprite that contains the menu colors is called sprite_h.psd. Syahir has even been grateful enough to take the time making “notes” for each image in the sprite, so you know which one to look for.

    saraf

    #18518

    OK, another stupid question. When I get the file modified to the colors I want, where do I put it? Should I FTP it directly to my server or does it live somewhere on WordPress? I’m not seeing the Graphene images in the media files.

    Thanks,

    Sara

    Anonymous

    #18519

    You will need FTP. The file is located in the /wp-content/themes/graphene/images/ folder. You will open the .psd, make your adjustment, and save it as a .png file. Then, upload your new .png file to the /images folder, overwriting the original.

    Mod

    Kenneth John Odle

    #18520

    Actually, if you just want a solid color, you shouldn’t need to use a sprite. Just change things like this:

    #header-menu {
    background: url(images/sprite_h.png) left -3px repeat-x #101010;

    to something like this:

    #header-menu {
    background: #C2BAD9;
    }

    This should work, provided you change all instances (including hovers) that you want to change. Navigation starts around line 200 in Graphene’s stylesheet.

    Ken

    Anonymous

    #18521

    But that’s not the most complicated method Ken. You know how I am!

    saraf

    #18522

    Thanks a bunch. I managed to get the submenus changed but the current tab is still showing white. Does that code live someplace else? I thought I had changed the header-menu color with this code:

    #header-menu > li > a {

    background: none repeat scroll 0 0 #C2BAD9;

    }

    The only other #fff code I see in there is this, but it doesn’t change when I replace it with purple:

    #header-menu > li > a {

    color: #fff;

    line-height: 16px;

    padding: 9px 10px 10px;

    }

    Is w3schools.com the best source for trying to get these terms straight or would you recommend another? I can see Syahir’s notes, but am not sure what they refer to.

    Sorry to be so dense,

    Sara

    saraf

    #18523

    In Firebug, I’ve managed to change all tabs in the header menu to purple (#C2BAD9) and the font to teal (#007272) with this code:

    #header-menu {

    background: #C2BAD9 repeat-x scroll left -100px #C2BAD9;

    }

    #header-menu > li > a {

    color: #007272;

    }

    However, it doesn’t work when I place it in the child theme. I also tried adding it to the code that mentions hover, with no success:

    #header-menu > li:hover,

    #header-menu > li.current-menu-item,

    #header-menu > li.current-menu-ancestor {

    background: #C2BAD9 left -100px repeat-x #eee;

    }

    I’m assuming the code needs to be placed in the child theme in the same order as the original? They can all be found in the area between “Top level header menu, default state” and “Sub level header menu, default state”, is that correct? I don’t see where the lines are numbered.

    Any other hints?

    Sara

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

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