Color Changes with a Drop-Down Menu

Hey there, and thanks ahead of time for the help.

Today I implemented a drop-down menu on my forum through template editing. By doing so I had to make all new links to have it replace my old nav bar. However, now that I don't have the old nav-bar I can't actually see if I have new messages. 

I was wondering if it's possible to make the "Mailbox" text change colors if I have a new message, or have it display a number next to it. I've been trying to figure it out for a bit now, but my coding isn't the greatest right now so it's a little hard for me. 

My forum is: Here

Here is the template code:

Code:

<ul class="topnav">
      <li><a href="/">Home</a></li>
    <li>     
      <a href="#">Server Information</a>
        <ul class="subnav">
            <li><a href="/">Server Files</a></li>
            <li><a href="/t1-server-rules">Server Rules</a></li>
            <li><a href="/t2-forum-rules">Forum Rules</a></li>
            <li><a href="/t9-forum-information-compendium">Forum Information Compendium</a></li>
            <li><a href="/t13-regarding-the-reporting-of-players">Reporting Players</a></li>
            <li><a href="/t3-important-regarding-bugs">Reporting Bugs</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Useful Resources</a>
        <ul class="subnav">
            <li><a target="_blank" href="http://www.eqemulator.org/">EQEmulator Website</a></li>
            <li><a href="/h1-timezone-clocks">Timezone Clocks</a></li>
        </ul>
    <li>
        <a href="#">Miscellaneous</a>
        <ul class="subnav">
            <li><a href="/faq">FAQ</a></li>
            <li><a href="/memberlist">Forum Members</a></li>
            <li><a href="/calendar">Calendar</a></li>
            <li><a href="/search">Advanced Search</a></li>
        </ul>
    </li>
<!-- BEGIN switch_user_logged_in -->
    <li><a href="/groups">Groups</a></li>
    <li><a href="/profile?mode=editprofile">Profile</a></li>
    <li><a href="/privmsg?folder=inbox" class="p-m">Mailbox</a></li>
    <li><a href="/login?logout">Logout</a></li>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
    <li><a href="/register">Register</a></li>
  <li><a href="/login">Login</a></li>
<!-- END switch_user_logged_out -->
</ul>

Bump. Still haven't figured it out. I'm out of ideas. I need help from those who are more coding savvy than I.

Hi RazielBach,

Do you still have the original navbar on the forum ? If not add it back, but hide it. Doing so should allow you to check that navbar and modify your new nav. If you don't know what to do let me know.

I don't have the old navbar anymore, it was completely removed from the forums template in favor of the one in the first post. 

Is it possible to change the color with the new template itself instead of adding in/using the old navbar with it?

RazielBach wrote:I don't have the old navbar anymore, it was completely removed from the forums template in favor of the one in the first post. 

Is it possible to change the color with the new template itself instead of adding in/using the old navbar with it?

Hello,

By adding the old navbar as Agne told you, you will be able to change and modify the new navbar as wanted. It is easier because you will have all the variables and the elements you need to make the new navbar the way you want it to be.

MrMind

Add this into your overall_header :

Code:

<div id="theNav" style="display:none;">{GENERATED_NAV_BAR}</div>

It wont display, it will simply be used to get some information which otherwise would be more difficult without.

I've added back the original navbar, and I've added the code to hide it, but I'm not quite sure how that helps me in my situation? My new NavBar is entirely there, links and all through the Template. The old navbar is not, and as such I cannot take any information from that to incorporate into my new one. 

Maybe I'm not understanding what you said or something, but this got me nowhere atm.

style="display:none;" hides the navbar, it does not remove it from the document. Since it isn't removed, only hidden, we should be able to check the default navbar for when new messages are present. I'll just need to write a small script to check.

Here, see if this works :
Administration Panel > Modules > JavaScript Codes Management > Create a new script

Title : your choice
Placement : in all the pages
Paste the code below and submit :

Code:

$(function() {
  var color = '#F00',
  text = 'New message';
  if ($('#theNav:has(.new-message)').length) $('.p-m').css('color',color).text(text);
});

You can modify the variable color with the color you want the Messages to be when there are new messages. text is the text displayed on a new message. You just have to make sure it works, if not I'll fix it.

Great! That worked perfectly. Thank you very much!

You're welcome

Topic archived

Have a good day. ^^