Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Locked Topic
[Solved] Change color of text in navigation menu
Topic Started: Feb 2 2016, 08:59 PM (388 Views)
Eric13579
Member
[ *  * ]
I would like to change the color of the text in my navigation menu.

How do I change that?
Edited by Eric13579, Feb 2 2016, 09:00 PM.
Offline Profile Goto Top
 
Epsilekt
Member Avatar
Member
[ *  *  *  *  *  * ]
In your Admin CP click the Themes link near the bottom of the screen on the left. You will see Board Template underneath it.

Posted Image

When that page loads, next to the theme you want click Edit Theme Appearance. When that page loads, in the box with all the weird code in it find #nav. It's a long code so if you click in the box then press Ctrl + F on your keyboard (Ctrl means Control) then your browser will ask you want you want to find. Type in #nav and keep clicking next until it takes you to this code (or something that looks like it, basically you want the one that only has #nav in front of it not the others that have other stuff):

Code:
 
#nav {
color:#5a70b3;
height:1%;
padding:10px 1%;
}


The part where it says color:#XXXXXX; is the part where you control the text color. To get the hex value for the color you want visit this website: http://www.w3schools.com/colors/colors_picker.asp When you pick your color you will see that page change. Look for where you see a # (hash symbol) plus six letters or numbers after it then replace what is already in your code with that new hex value.

Posted Image

Next 99% of the time at the very beginning of the box with all that code you will see something that looks like this:

Code:
 
a {
color:#e77700;
text-decoration:none;
}

a:hover {
color:#FB9E3B;
text-decoration:none;
}


That part inside the brackets ({ }) that starts with a changes the color of links in the navigation menu, the part that says a:hover changes the color of links when you mouse over them. If you want to specifically change color of only links in the navigation menu not the entire forum then copy that part of the code with a and a:hover and paste it again after that. Then add #nav (with a space after it) before a and a:hover. So the new part you just pasted would end up looking like this:

Code:
 
#nav a {
color:#e77700;
text-decoration:none;
}

#nav a:hover {
color:#FB9E3B;
text-decoration:none;
}


Once again change where you see the hex values (#XXXXXX) to the color you want to use.

Remember to only add #nav to the part you pasted, not the part you copied. If you add it to both then your skin will not look the same anymore.
Edited by Epsilekt, Feb 3 2016, 06:16 PM.
Offline Profile Goto Top
 
Eric13579
Member
[ *  * ]
Thank you for the help.

Got the color changed OK.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Support · Next Topic »
Locked Topic