Change Nav.Bar

  • MrMatt


    Hi folks!

    I’ve read the most of the “change color” at your nav. bar guides in here. But I dont find them so easy educative for my skill level in WP and coding.

    I want to change color at the nav bar to black/grey solid so it gets a 3D shape, currently we have the simple one (take a look at ). And now I wonder if someone can help me to get this nav bar (explained in a novice-level) I would be very greatful.



    (Moved to Support)

    Please post these types of questions in the Support section of the forum.

    There are many ways to accomplish what you are trying to do.

    1. Have you set up a child theme?

    2. Do you want to use CSS (unstable across browsers) or a background image (requires photoshop knowledge).



    Sorry, my bad!

    1. No I havent set up a child theme, what is that? And what is the function of it

    2. Hmm, I have a little photoshop knowledge but I dont know if I have enough to create what I want to. How do I use the CSS-method?



    No worries.

    1. To set up a child theme, check out this thread:

    And also check this thread to get a basic understanding of how it’s intended to function:

    2. You will need to use webkit and moz gradient css styles. These display fairly consistent across all browsers EXCEPT Internet Explorer. It will require using three different properties to display consistently. Check this page for some ideas:

    Just be sure to replicate the code towards the bottom of that page (where it says cross-browser css gradient).

    Once you understand the gradient, and your child theme, just insert the code into your child theme style.css file.



    Is a Child theme nescessery? Can’t I just use the “Custom CSS” option? But IT sucks that itsn’t displayable at all browsers. If I do It like an Image it will be possible ? I think I would prefer the “sprite-method in PS” but I need an explaination how it’s workings since syahirs notes didnt help me that much.



    Sure, you can use custom css also. A child theme is simply more flexible.

    Syahir, I’m sure, is a very busy man. And being how this is a free theme, he must commit to his other obligations first (using his volunteer time for theme support and development).

    We can point you in the right direction, but we can’t teach you photoshop. Both the normal background, and the hover background are found in the wp-content/themes/graphene/images folder and is named sprite_h.png.

    Find which areas are your current and hover colors. Insert a new layer for each. Using the gradient tool, insert a gradient in your new layer over the top of the original. Do this twice, once for the active, and once for the hover. Merge the layers and save the file. Rename the original file in your directory (to preserve it in case you make a mistake), and upload your new file.



    Well I can only thank Syahir for making this theme, it’s my fault that I just can’t understand this language. Im novice at this, I’ve looked at the sprite but can’t find which area I have to edit. I have looked over the raw file of this:

    Where Syahir have maked notes, but I simply cant understand them. My problem is more like: Which area should I edit for the menu? Which for the hover? The 2nd menu?

    Because when I apply my new sprite into the FTP it looks like just my top-bar is changing.

    Thanks so far Josh!



    I understand completely. I went through the same thing when I first edited the file. I’m proud you were able to even find the psd file (shows you’ve done some homework).

    Okay, for my normal color, I changed the 3rd, 9th, and 12th sections from the top. (you can see each section is divided by a blue line, referencing where on the sprite the css is calling).

    For my hover, I changed the 1st and the 6th sections from the top.

    You can also use Mozilla Firebug to find the background, and look at the pixel number being called. Then, use the grid option in photoshop to display pixel rulers along the side and top of your image. Then, all you have to do is match the number to find which “strip” is being called.



    Of course Im trying on my own first. But this time its too difficult.

    Had problem to follow what you did, so Im on the way to solve it with firebug. But dont know how to use it or display the “pixel number” in it.



    The left side shows the line of code displaying the normal color, and the right shows where it is calling to (sorry for the resolution). The -100 means it is starting 100 pixels down on the sprite image.

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

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