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

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
avatar
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; }
avatar
Ange Tuteur
Forumaster

Male Posts : 13194
Reputation : 2908
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

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
avatar
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.

avatar
SLGray
Administrator
Administrator

Male Posts : 42775
Reputation : 3012
Language : English
Location : United States

https://fmthemes.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 =/
avatar
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:
avatar
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 y it as solved.


avatar
Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6810
Reputation : 433
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
avatar
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')
avatar
Ange Tuteur
Forumaster

Male Posts : 13194
Reputation : 2908
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

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]
avatar
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
avatar
Ange Tuteur
Forumaster

Male Posts : 13194
Reputation : 2908
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

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
avatar
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
avatar
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?
avatar
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 y it as solved.


avatar
Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6810
Reputation : 433
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=
avatar
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; }
avatar
Ange Tuteur
Forumaster

Male Posts : 13194
Reputation : 2908
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


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