Edit New Message navbar link using CSS

by karkooshy January 11th 2014, 9:35 pm

Hello everyone Mr. Green

I'm working on a forum theme and I've chosen to add retina display support on all my images. To reduce loading time for non retina users, I went for the text only navigation buttons (like here on the support forums).

I'm fully aware that you can edit individual links using CSS (a[href="/Portal"],a[href="/Forum"], etc etc) but I'm stuck on the "You have 1 new message" button since it shares the same link with "You have no new messages" button. I want it so that when a user receives a new message in his inbox, the color of the button's text changes.

If it makes any difference, I'm using PunBB.

Thanks! Hello

by Ange Tuteur January 12th 2014, 12:24 am

Hello ,

You can use this CSS to style the new message navlink :

Code:: .new-message { color:red; }

by karkooshy January 12th 2014, 11:57 am

Ange Tuteur wrote:Hello ,

You can use this CSS to style the new message navlink :
Code:
.new-message { color:red; }

Hey,
thanks for the response! I've already tried that code however, and it's not working Sad

by **SLGray** January 12th 2014, 4:51 pm

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

by karkooshy January 12th 2014, 10:20 pm

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

Sorry. That didn't work either =/

by karkooshy January 15th 2014, 10:57 pm

Bumpy D:

by Sir Chivas™ January 15th 2014, 11:37 pm

Try this:

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

by karkooshy January 17th 2014, 1:07 pm

Sir Chivas wrote:Try this:
Code:
span.new-message { color: red; !important; }

Still no dice... not working Sad

by Ange Tuteur January 17th 2014, 1:31 pm

Hi ,

I have checked PunBB and it does not have the selector unfortunately. You can however, achieve it with javascript :

Administration Panel > Modules > Javascript codes management > Create a new script

Title : what you wish
Placement : in all the pages
Paste the code below and submit :

Code:: jQuery(function() { var num = jQuery('a.mainmenu[href="/privmsg?folder=inbox"]').text().replace(/You have ([0-9]+) new message/,'$1'); jQuery('a.mainmenu[href="/privmsg?folder=inbox"]:contains(You have '+num+' new message)').css('color','yellow'); /* Plural */ var nums = jQuery('a.mainmenu[href="/privmsg?folder=inbox"]').text().replace(/You have ([0-9]+) new messages/,'$1'); jQuery('a.mainmenu[href="/privmsg?folder=inbox"]:contains(You have '+nums+' new messages)').css('color','yellow'); });

You can change the color here :
from color names to hex colors (you should change plural color as well)

Code:: .css('color','yellow')

by karkooshy January 23rd 2014, 7:26 pm

Still refusing to work Sad

... The code I'm using is:

Code:: jQuery(function() { var num = jQuery('a.mainmenu[href="/privmsg?folder=inbox"]').text().replace(/You have ([0-9]+) new message/,'$1'); jQuery('a.mainmenu[href="/privmsg?folder=inbox"]:contains(You have '+num+' new message)').css('color','#423420'); /* Plural */ var nums = jQuery('a.mainmenu[href="/privmsg?folder=inbox"]').text().replace(/You have ([0-9]+) new messages/,'$1'); jQuery('a.mainmenu[href="/privmsg?folder=inbox"]:contains(You have '+nums+' new messages)').css('color','#423420'); });

By the way, I'm also using Javascript to change the text itself... for example:

Code:: $(function(){ $('a.mainmenu:contains("You have 1 new message")').text('Inbox'); });

But even when the above Javascript module is turned off and everything is reverted back to native settings, the code you gave isn't working =/...

Thank you in advance.[/code]

by Ange Tuteur January 23rd 2014, 7:31 pm

Please post a link to the forum you're adding this to.

Thanks Smile

by karkooshy January 29th 2014, 12:47 pm

Here's the test forum I'm working on at the moment:
http://aqmen.forumotion.com

by karkooshy February 2nd 2014, 11:02 pm

by sif bakheti February 3rd 2014, 1:21 am

yes this is thanks

by karkooshy February 4th 2014, 1:17 am

sif bakheti wrote:yes this is thanks

Excuse me?

by Sir Chivas™ February 4th 2014, 1:20 am

sif bakheti wrote:yes this is thanks

Please do not post in a topic unless you are offering a solution or asking for help.

by karkooshy February 7th 2014, 2:53 am

bumpies D=

by Ange Tuteur February 7th 2014, 4:22 pm

Hi,

Apologies for the delay. Try this instead :

Administration Panel > Modules > Javascript codes management > Create a new script
Title : New message
Placement : In all the pages
Paste the code below and submit :

Code:: $(document).ready(function() { var P = 'a.mainmenu[href="/privmsg?folder=inbox"]'; var N = 'new-message'; var n1 = $(P).text().replace(/You have ([0-9]+) new message/,'$1'); var n2 = $(P).text().replace(/You have ([0-9]+) new messages/,'$1'); $(P+':contains(You have '+n1+' new message)').addClass(N); $(P+':contains(You have '+n2+' new messages)').addClass(N); });

Then add this to your CSS :
Administration Panel > Display > Pictures and colors > Colors > CSS stylesheet