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 http://grafengruppen.se ). And now I wonder if someone can help me to get this nav bar (explained in a novice-level) I would be very greatful.
AnonymousDecember 11, 2011 at 8:13 pm #21013
(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).
AnonymousDecember 11, 2011 at 8:26 pm #21015
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
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.
AnonymousDecember 11, 2011 at 8:46 pm #21017
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/imagesfolder and is named
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: http://code.google.com/p/graphene/source/browse/trunk/PSDs/sprite_h.psd
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!
AnonymousDecember 11, 2011 at 10:04 pm #21019
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.
AnonymousDecember 11, 2011 at 10:53 pm #21021
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.
You must be logged in to reply to this topic.