The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Edit New Message navbar link using CSS

View previous topic View next topic Go down

In progress Edit New Message navbar link using CSS

Post by karkooshy on 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

karkooshy
Forumember

Male Posts : 327
Reputation : 7
Language : English

http://quable.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

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

Hello ,

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by karkooshy on 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

karkooshy
Forumember

Male Posts : 327
Reputation : 7
Language : English

http://quable.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by SLGray on January 12th 2014, 4:51 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36641
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by karkooshy on January 12th 2014, 10:20 pm

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

Sorry. That didn't work either =/

karkooshy
Forumember

Male Posts : 327
Reputation : 7
Language : English

http://quable.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by karkooshy on January 15th 2014, 10:57 pm

Bumpy D:

karkooshy
Forumember

Male Posts : 327
Reputation : 7
Language : English

http://quable.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

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

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



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by karkooshy on January 17th 2014, 1:07 pm

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

Still no dice... not working Sad

karkooshy
Forumember

Male Posts : 327
Reputation : 7
Language : English

http://quable.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by Ange Tuteur on 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')

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by karkooshy on 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]

karkooshy
Forumember

Male Posts : 327
Reputation : 7
Language : English

http://quable.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

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

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

Thanks Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by karkooshy on January 29th 2014, 12:47 pm

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

karkooshy
Forumember

Male Posts : 327
Reputation : 7
Language : English

http://quable.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by karkooshy on February 2nd 2014, 11:02 pm

bump

karkooshy
Forumember

Male Posts : 327
Reputation : 7
Language : English

http://quable.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

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

yes this is thanks

sif bakheti
New Member

Posts : 4
Reputation : 1
Language : English, Arab

http://sbnetworks.nstars.org

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by karkooshy on February 4th 2014, 1:17 am

@sif bakheti wrote:yes this is thanks

Excuse me?

karkooshy
Forumember

Male Posts : 327
Reputation : 7
Language : English

http://quable.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by Sir Chivas™ on 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.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by karkooshy on February 7th 2014, 2:53 am

bumpies D=

karkooshy
Forumember

Male Posts : 327
Reputation : 7
Language : English

http://quable.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by Ange Tuteur on 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
Code:
.new-message { color:#ff0 !important; }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum