different colours in navigation bar

[strewth78]

Is it possible to have some navigation buttons to be a different colour to the other buttons?
This would be a great feature as I always have members asking me where the link to such-and-such is.  Allowing me to set some buttons with a different button can help me make them easy to find.


thanks

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 7, 2016 2:18:17 GMT -8 strewth78 said:

Is it possible to have some navigation buttons to be a different colour to the other buttons?
This would be a great feature as I always have members asking me where the link to such-and-such is.  Allowing me to set some buttons with a different button can help me make them easy to find.


thanks

This can be done in themes right Tumbleweed

[Tumbleweed]

Mar 7, 2016 8:42:42 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Mar 7, 2016 2:18:17 GMT -8 strewth78 said:

Is it possible to have some navigation buttons to be a different colour to the other buttons?
This would be a great feature as I always have members asking me where the link to such-and-such is.  Allowing me to set some buttons with a different button can help me make them easy to find.


thanks

This can be done in themes right Tumbleweed

I don't think you can, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓,  but I did do it on a test site using some convoluted css that magically worked. lol  I need to go find that test site and it is probably in some theme I don't remember so it might take some digging.

I'll get back to you with help for this strewth78 as soon as I find that test site. 

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 7, 2016 11:18:26 GMT -8 Tumbleweed said:

Mar 7, 2016 8:42:42 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

This can be done in themes right Tumbleweed

I don't think you can, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ ,  but I did do it on a test site using some convoluted css that magically worked. lol  I need to go find that test site and it is probably in some theme I don't remember so it might take some digging.

I'll get back to you with help for this strewth78 as soon as I find that test site. 

So they package the links in a variable i suppose...that bites. But i believe each link has its own class

[T.C.]

Spectrum by Stinky666 has different colored links in the nav menu if that helps.

support.proboards.com/post/5543520

[Stinky666]

Here's the code to save some time.


/**************************************************************************
*                 ALTERNATING NAVIGATION MENU COLOURS                    *
**************************************************************************/
#navigation-menu > ul li:nth-child(8n+1) a {
color: rgb(117, 200, 230)!important;
border-color: rgb(117, 200, 230);}
#navigation-menu > ul li:nth-child(8n+1) a:hover {
color: rgb(159, 159, 159)!important;
border-color: rgb(159, 159, 159)!important;}

#navigation-menu > ul li:nth-child(8n+2) a {
color: rgb(20, 173, 167)!important;
border-color: rgb(20, 173, 167);}
#navigation-menu > ul li:nth-child(8n+2) a:hover {
color: rgb(159, 159, 159)!important;
border-color: rgb(159, 159, 159)!important;}

#navigation-menu > ul li:nth-child(8n+3) a {
color: rgb(173, 201, 47) !important;
border-color: rgb(173, 201, 47);}
#navigation-menu > ul li:nth-child(8n+3) a:hover {
color: rgb(159, 159, 159)!important;
border-color: rgb(159, 159, 159)!important;}

#navigation-menu > ul li:nth-child(8n+4) a {
color: rgb(244, 181, 42) !important;
border-color: rgb(244, 181, 42);}
#navigation-menu > ul li:nth-child(8n+4) a:hover {
color: rgb(159, 159, 159)!important;
border-color: rgb(159, 159, 159)!important;}

#navigation-menu > ul li:nth-child(8n+5) a {
color: rgb(242, 210, 0) !important;
border-color: rgb(242, 210, 0);}
#navigation-menu > ul li:nth-child(8n+5) a:hover {
color: rgb(159, 159, 159)!important;
border-color: rgb(159, 159, 159)!important;}

#navigation-menu > ul li:nth-child(8n+6) a {
color: rgb(224, 110, 34) !important;
border-color: rgb(224, 110, 34);}
#navigation-menu > ul li:nth-child(8n+6) a:hover {
color: rgb(159, 159, 159)!important;
border-color: rgb(159, 159, 159)!important;}

#navigation-menu > ul li:nth-child(8n+7) a {
color: rgb(127, 118, 230) !important;
border-color: rgb(127, 118, 230);}
#navigation-menu > ul li:nth-child(8n+7) a:hover {
color: rgb(159, 159, 159)!important;
border-color: rgb(159, 159, 159)!important;}

#navigation-menu > ul li:nth-child(8n+8) a {
color: rgb(230, 118, 187) !important;
border-color: rgb(230, 118, 187);}
#navigation-menu > ul li:nth-child(8n+8) a:hover {
color: rgb(159, 159, 159)!important;
border-color: rgb(159, 159, 159)!important;}

If memory serves, it was the awesome Fallen Samurai that helped me do that.
Apologies if it was someone else, it was a while ago.

[Tumbleweed]

Well, here I was searching and searching for that elusive test site with different colored menu links (never found it)  and you all come in with an answer.

And actually, I had tried using the :nth-child because if I remember right, I ran into trouble when a guest, member or staff were viewing because of such things as profile being gone, messing up the sequence targeted by the :nth-child but I could be wrong. Can't remember now why I ended up not using it but in case anyone wants to try my convoluted way it is directly targeting the link itself such as:

a:link[href="/help"]{color:blue!important;border:1px solid green;

}


Lot's of options for strewth78. 

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 7, 2016 14:27:14 GMT -8 Tumbleweed said:

Well, here I was searching and searching for that elusive test site with different colored menu links (never found it)  and you all come in with an answer.

And actually, I had tried using the :nth-child because if I remember right, I ran into trouble when a guest, member or staff were viewing because of such things as profile being gone, messing up the sequence targeted by the :nth-child but I could be wrong. Can't remember now why I ended up not using it but in case anyone wants to try my convoluted way it is directly targeting the link itself such as:

a:link[href="/help"]{color:blue!important;border:1px solid green;

}


Lot's of options for strewth78 . 

Technically I believe your way supports older browsers than the nth child method.

[strewth78]

many thanks. I start playing around with both options and see which works best for me.

[strewth78]

hello.
I've trying the option from stink666
it works on most pages.

however, when i select a page from the menu, then the number order changes, making the 4th menu option 3 and the 5th becomes 4 etc.
While any pages in the drop down nag maintain the correct order.

www.bangbangbaseball.boards.net

[strewth78]

Mar 7, 2016 14:27:14 GMT -8 Tumbleweed said:

Well, here I was searching and searching for that elusive test site with different colored menu links (never found it)  and you all come in with an answer.

And actually, I had tried using the :nth-child because if I remember right, I ran into trouble when a guest, member or staff were viewing because of such things as profile being gone, messing up the sequence targeted by the :nth-child but I could be wrong. Can't remember now why I ended up not using it but in case anyone wants to try my convoluted way it is directly targeting the link itself such as:

a:link[href="/help"]{color:blue!important;border:1px solid green;

}


Lot's of options for strewth78 . 


Whereabouts would I apply this one?
thanks

[Tumbleweed]

Mar 11, 2016 4:28:31 GMT -8 strewth78 said:

Mar 7, 2016 14:27:14 GMT -8 Tumbleweed said:

Well, here I was searching and searching for that elusive test site with different colored menu links (never found it)  and you all come in with an answer.

And actually, I had tried using the :nth-child because if I remember right, I ran into trouble when a guest, member or staff were viewing because of such things as profile being gone, messing up the sequence targeted by the :nth-child but I could be wrong. Can't remember now why I ended up not using it but in case anyone wants to try my convoluted way it is directly targeting the link itself such as:

a:link[href="/help"]{color:blue!important;border:1px solid green;
}


Lot's of options for strewth78 . 


Whereabouts would I apply this one?
thanks

That would go at the bottom of your style sheet: (Admin> Themes> Advanced Styles & CSS> Style Sheet>)
And instead of what I posted before, use this instead:

#navigation-menu a:link[href="/search"], #navigation-menu a:visited[href="/search"]{color:#0000ff!important;background-color:tan;
}
#navigation-menu a:hover[href="/search"]{color:#00ffff!important;
}

The above is to change the search link color. You can get the extensions to each link by going to: Admin> Settings> Forum Settings> Navigation>

So say you want to change the search and admin, each with a different color it would be:

#navigation-menu a:link[href="/search"], #navigation-menu a:visited[href="/search"]{color:#0000ff!important;background-color:tan;
}
#navigation-menu a:hover[href="/search"]{color:#00ffff!important;
}
#navigation-menu a:link[href="/admin"], #navigation-menu a:visited[href="/admin"]{color:#ff00ff!important;background-color:blue;
}
#navigation-menu a:hover[href="/admin"]{color:#00ffff!important;
}

Hope that helps.