Help with changing Nav.menu names with css - Invision

Go down

Solved Help with changing Nav.menu names with css - Invision

Post by TonnyKamper on March 9th 2018, 11:07 pm

Hello dear forumotioners,

I have a couple of questions regarding to the mainmenu buttons on my testforum, they are all in text format.. Forum address is: http://punt.actieforum.com/

First I tried renaming some of them with a javascript which worked perfectly on the nav menu except for the Index button, but it caused a problem with the PM system, it renamed all message titles to Mailbox, which is the new nav name I assigned to the "You have no new messages" button, as you can see in this screenshot:
Screenshot:

I used this javascript placed on all pages:
Code:
$(function(){
        $('a[href*="/forum"]').html('Forums');
        $('a[href*="/memberlist"]').html('Leden');
        $('a[href*="/groups"]').html('Groepen');
        $('a[href*="/privmsg?folder=inbox"]').html('Mailbox');
        });

So I disabled that JS and tried it with css, that solved the PM title issue but created another problem, all 3 renamed buttons are now larger in height than the other buttons, causing those buttons to display a few pixels more at the bottom than the other buttons have, making them to break out underneath the banner as you can see in this screenshot:
Screenshot:

The css I used is:
Code:
a.mainmenu[href^="/groups"] { font-size:0 !important; }
a.mainmenu[href^="/groups"]:after {
  content:"Groepen";
  font-size:12px !important;
}
a.mainmenu[href^="/memberlist"] { font-size:0 !important; }
a.mainmenu[href^="/memberlist"]:after {
  content:"Leden";
  font-size:12px !important;t;
}
a.mainmenu[href^="/privmsg?folder=inbox"] { font-size:0 !important; }
a.mainmenu[href^="/privmsg?folder=inbox"]:after {
  content:"MAILBOX";
  font-size:12px !important;t;
}

Q1. Is it possible through css for them to all have the same height after renaming the nav names?

Q2. Also the button to my portalpage, which displays in the mainmenu under the name "Mijn Pagina" isn't displaying correctly, the text starts directly at the beginning of the button instead of the 5px on either side like the other buttons have.. can this be fixed ?

Thanks in advance for any assistance Smile
Kind regards, Tonny Kamper.
avatar
TonnyKamper
Forumember

Female Posts : 315
Reputation : 18
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by SSYT on March 11th 2018, 10:23 am

Hello, try:
Code:
function strMain(vars, newtext) {
   $.each($('.mainmenu'), function(a, value) {
      if(new RegExp(vars, "gi").test(value.text)) {
         console.log("Old Text: "+ value.text +", new text: " + newtext);
         return (value.text = value.text.replace(new RegExp(value.text, "gi"), newtext));
      }
   });
}

Code:
strMain('Home', 'New text for Home');
avatar
SSYT
Forumember

Male Posts : 71
Reputation : 12
Language : RO-10, EN-3, FR-1
Location : Romania

http://help.forumgratuit.ro/forum

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by TonnyKamper on March 11th 2018, 2:26 pm

Apollo 2.0 wrote:Hello, try:
Code:
function strMain(vars, newtext) {
   $.each($('.mainmenu'), function(a, value) {
      if(new RegExp(vars, "gi").test(value.text)) {
         console.log("Old Text: "+ value.text +", new text: " + newtext);
         return (value.text = value.text.replace(new RegExp(value.text, "gi"), newtext));
      }
   });
}

Code:
strMain('Home', 'New text for Home');

Thank you very much @Apollo 2.0 Smile

Is this only meant to be for changing the Index name to Home, or is it possible to add more nav names for changing into the script and if so how would that be done? My knowledge of javascripts is very limited...

Kind regards, Tonny Kamper
avatar
TonnyKamper
Forumember

Female Posts : 315
Reputation : 18
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by SSYT on March 11th 2018, 3:29 pm

Yes, try:
Code:
strMain('Home', 'New text for Home');
strMain('FAQ', 'New text for FAQ');
strMain('Text', 'New text');
avatar
SSYT
Forumember

Male Posts : 71
Reputation : 12
Language : RO-10, EN-3, FR-1
Location : Romania

http://help.forumgratuit.ro/forum

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by TonnyKamper on March 11th 2018, 3:57 pm

Apollo 2.0 wrote:Yes, try:
Code:
strMain('Home', 'New text for Home');
strMain('FAQ', 'New text for FAQ');
strMain('Text', 'New text');

It doesn't work @Apollo 2.0 not one word out of the 4 get's changed Crying or Very sad could it be because our boardlanguage is Dutch?
avatar
TonnyKamper
Forumember

Female Posts : 315
Reputation : 18
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by SSYT on March 11th 2018, 6:34 pm

Sorry, my error...
Change code with this.
Code:
function strMain(vars, newtext) {
  $.each($('.mainmenu'), function(a, value) {
      if(new RegExp(vars, "gi").test(value.text)) {
        console.log("Old Text: "+ value.text +", new text: " + newtext);
        return (value.innerHTML = value.innerHTML.replace(new RegExp(value.text, "gi"), newtext));
      }
  });
}

Usage:
Code:
strMain('Index', 'Home');
strMain('Blogs', 'Online ADS');
strMain('Inloggen', 'Logged In');
avatar
SSYT
Forumember

Male Posts : 71
Reputation : 12
Language : RO-10, EN-3, FR-1
Location : Romania

http://help.forumgratuit.ro/forum

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by TonnyKamper on March 11th 2018, 7:05 pm

Apollo 2.0 wrote:Sorry, my error...
Change code with this.
Code:
function strMain(vars, newtext) {
  $.each($('.mainmenu'), function(a, value) {
      if(new RegExp(vars, "gi").test(value.text)) {
        console.log("Old Text: "+ value.text +", new text: " + newtext);
        return (value.innerHTML = value.innerHTML.replace(new RegExp(value.text, "gi"), newtext));
      }
  });
}

Usage:
Code:
strMain('Index', 'Home');
strMain('Blogs', 'Online ADS');
strMain('Inloggen', 'Logged In');

It isn't working @Apollo 2.0 Think is this the correct format I'm using?

Code:
function strMain('Index', 'Forum');
        strMain('Groups', 'Groepen');
        strMain('Memberlist', 'Leden');
        strMain('You have no new messages', 'Postbox'); {
  $.each($('.mainmenu'), function(a, value) {
      if(new RegExp(vars, "gi").test(value.text)) {
        console.log("Old Text: "+ value.text +", new text: " + newtext);
        return (value.innerHTML = value.innerHTML.replace(new RegExp(value.text, "gi"), newtext));
      }
  });
}
avatar
TonnyKamper
Forumember

Female Posts : 315
Reputation : 18
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by SSYT on March 11th 2018, 7:44 pm

No:
Code:
function strMain(vars, newtext) {
  $.each($('.mainmenu'), function(a, value) {
      if(new RegExp(vars, "gi").test(value.text)) {
        console.log("Old Text: "+ value.text +", new text: " + newtext);
        return (value.innerHTML = value.innerHTML.replace(new RegExp(value.text, "gi"), newtext));
      }
  });
};

// After function is created: use this format
strMain('Index', 'Home');
strMain('Blogs', 'Online ADS');
strMain('Inloggen', 'Logged In');
avatar
SSYT
Forumember

Male Posts : 71
Reputation : 12
Language : RO-10, EN-3, FR-1
Location : Romania

http://help.forumgratuit.ro/forum

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by TonnyKamper on March 11th 2018, 10:02 pm

Apollo 2.0 wrote:No:
Code:
function strMain(vars, newtext) {
  $.each($('.mainmenu'), function(a, value) {
      if(new RegExp(vars, "gi").test(value.text)) {
        console.log("Old Text: "+ value.text +", new text: " + newtext);
        return (value.innerHTML = value.innerHTML.replace(new RegExp(value.text, "gi"), newtext));
      }
  });
};

// After function is created: use this format
strMain('Index', 'Home');
strMain('Blogs', 'Online ADS');
strMain('Inloggen', 'Logged In');

It does nothing at all @Apollo 2.0 Crying or Very sad not one word get's changed.. but thanks anyway for your time, I really appreciate that Shake

Kind regards, Tonny Kamper
avatar
TonnyKamper
Forumember

Female Posts : 315
Reputation : 18
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by Luffy on March 11th 2018, 10:12 pm

So you managed to change the nav bar text to what you wanted with CSS. After that, what seems to be the problem? I cannot see any errors to the navbar.
avatar
Luffy
Manager
Manager

Male Posts : 5517
Reputation : 608
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by TonnyKamper on March 11th 2018, 10:37 pm

@Luffy wrote:So you managed to change the nav bar text to what you wanted with CSS. After that, what seems to be the problem? I cannot see any errors to the navbar.

That's because I had disabled that css whilst trying to get it done through javascript.. I have enabled the css again, if you look now you'll see the three buttons on the right side next to 'KALENDER' are sticking out underneath the bar.. for some reason the background grew taller.. they're not aligned with the other buttons.. and for the life of me I can't figure out how to correct that @Luffy Confused

Kind regards,
Tonny Kamper
avatar
TonnyKamper
Forumember

Female Posts : 315
Reputation : 18
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by Luffy on March 11th 2018, 10:49 pm

@TonnyKamper This should fix the bottom part:
Code:
#submenu ul li a.mainmenu[href*="groups"] { padding-bottom: 0px!important }

As for the alignment what do you mean? What's the problem with it?
avatar
Luffy
Manager
Manager

Male Posts : 5517
Reputation : 608
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by TonnyKamper on March 11th 2018, 11:09 pm

@Luffy wrote:@TonnyKamper This should fix the bottom part:
Code:
#submenu ul li a.mainmenu[href*="groups"] { padding-bottom: 0px!important }

As for the alignment what do you mean? What's the problem with it?

Wow you're a genius @Luffy :party: works like a charm.. Good
The second thing was that those three buttons have no padding or margin on the right side, they're cut off straight after the text..
EDIT: I fixed that!!

The only thing left now, is I've made a button in the navmenu to a portal page, the button is called 'MIJN PAGINA' it lacks padding on the left side.. how do I address that button in the css?
avatar
TonnyKamper
Forumember

Female Posts : 315
Reputation : 18
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by Luffy on March 11th 2018, 11:17 pm

@TonnyKamper okay then. Replace the above code with this one:
Code:
#submenu ul li a.mainmenu[href^="/groups"]:after {
    content: "Groepen";
    font-size: 12px!important;
    padding: .4em 1em .65em 0;
    background: #284fb1!important;
    padding-bottom: 0!important;
}
#submenu ul li a.mainmenu[href^="/groups"]:hover:after { background: #1e43a2!important }

Edit: Where is the other button you are talking about?

Edit 2: Simply add
Code:
padding-right: 10px;
to the code you have now for the
Code:
:after
pseudo element.
avatar
Luffy
Manager
Manager

Male Posts : 5517
Reputation : 608
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by TonnyKamper on March 11th 2018, 11:34 pm

@Luffy wrote:@TonnyKamper okay then. Replace the above code with this one:
Code:
#submenu ul li a.mainmenu[href^="/groups"]:after {
    content: "Groepen";
    font-size: 12px!important;
    padding: .4em 1em .65em 0;
    background: #284fb1!important;
    padding-bottom: 0!important;
}
#submenu ul li a.mainmenu[href^="/groups"]:hover:after { background: #1e43a2!important }

Edit: Where is the other button you are talking about?

This did not work @Luffy but the previous code did, so ïll be using that and as for the other button concerned I just managed to give it a little padding on the left with this code:
Code:
#submenu ul li a.mainmenu[href*="portal?pid=3"] { padding-left: 5px !important }

Although the padding looks like it's less than 5px it is suffient enough for me so this will be marked solved for me!
Thank you so much for your assistance, it's really appreciated Shake Bow 2

Good night and take care,
Tonny Kamper
avatar
TonnyKamper
Forumember

Female Posts : 315
Reputation : 18
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by Luffy on March 11th 2018, 11:35 pm

@TonnyKamper I have edited the code above if you want to give it a look.
avatar
Luffy
Manager
Manager

Male Posts : 5517
Reputation : 608
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by TonnyKamper on March 12th 2018, 12:08 am

@Luffy wrote:@TonnyKamper I have edited the code above if you want to give it a look.

Yes thank you very much @Luffy i did just that and it looks great to me now Yes Cheer you can lock this topic Victory
avatar
TonnyKamper
Forumember

Female Posts : 315
Reputation : 18
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Help with changing Nav.menu names with css - Invision

Post by Luffy on March 12th 2018, 12:21 am

Great! Have a nice day! :rose:

Problem solved & topic archived.
Please read our forum rules: ESF General Rules
avatar
Luffy
Manager
Manager

Male Posts : 5517
Reputation : 608
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Back to top


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