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 Sat Jan 11, 2014 8: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 Sat Jan 11, 2014 11:24 pm

Hello ,

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

Male Posts : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by karkooshy on Sun Jan 12, 2014 10: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 Sun Jan 12, 2014 3: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 : 40195
Reputation : 2715
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 Sun Jan 12, 2014 9: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 Wed Jan 15, 2014 9: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 Wed Jan 15, 2014 10: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.


avatar
Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6801
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 Fri Jan 17, 2014 12: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 Fri Jan 17, 2014 12: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 : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by karkooshy on Thu Jan 23, 2014 6: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 Thu Jan 23, 2014 6:31 pm

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

Thanks Smile
avatar
Ange Tuteur
Forumaster

Male Posts : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Edit New Message navbar link using CSS

Post by karkooshy on Wed Jan 29, 2014 11:47 am

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 Sun Feb 02, 2014 10: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 Mon Feb 03, 2014 12: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 Tue Feb 04, 2014 12: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 Tue Feb 04, 2014 12: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.


avatar
Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6801
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 Fri Feb 07, 2014 1: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 Fri Feb 07, 2014 3: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 : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

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