Change some navigation bar links colors

Hello!
I have navigation bar with no pictures. How can I change color of ''register'' and ''You have X new messages''

And is it possible to change link name? I want to change ''Saturs'' (Home) name.

Thanks!

You cannot change the color as far as i know, but you can just make an image and copy it in and it will replace the name of the navigation botton. I did so with my forum.

Guide to change it

ACP - > DISPLAY - > HEADERS AND NAVIGATION - > CLICK ON THIS BOTTON - > PLACE IN THE URL OF YOUR PICTURE WHERE IT SAYS : PICTURE


SOMETIMES THE MESSAGES AND NEW MESSAGES WILL NOT CHANGE, IF SO DO THIS

ACP - > DISPLAY - > PICS MANAGEMENT - > ADVANCED MODE - > GENERAL/EXPLORE - > SCROLL DOWN AND ADD THE URL


Hope this helped

Vaccam

Hello -MiSHmaSH-,

You should be able to change the new message link with this CSS :

Code:

.new-message { color:red !important; }

To change a specific link you can use its pathname :

Code:

a[href="/register"] { color:yellow !important; }

To change the name of a navlink you can do something like this :
First set the default font-size to 0, then on our next selector we add text after using the ::after selector

Code:

a[href="/forum"] { font-size:0 !important; }
a[href="/forum"]:after {
    font-size:11px;
    content:"Navlink Name";
}

All work, but there is error:

I want to remove that link what is somehow shown there...  

Please provide a link to your forum.

Thank you

Only in PM

Oooh I made a mistake. I forgot to put the mainmenu class name.

Just add it after 'a' here :

Code:

a.mainmenu[href="/"] { font-size:0 !important; }
a.mainmenu[href="/"]:after {
    font-size:11px;
    content:"Navlink Name";
}

That should edit 'forums'

Since we put the font-size to 0 we need to fix some things.

Try this :
it is the same as above, so add it instead since it has properties to fix the design.

Code:

a.mainmenu[href="/"] {
    font-size:0 !important;
    padding:12px 4px !important;
    position:relative;
    bottom:4px;
}
a.mainmenu[href="/"]:after {
    font-size:11px;
    content:"Navlink Name";
    position:relative;
    top:4px;
}

Works!  

Welcome

Topic solved and archived