How to add external link on top menu?


(Cobe) #15

Thank you for your code.
It runs perfect with standard discourse.


(Ryan Hidajat) #16

I try both code and this one said Uncaught “TypeError: Cannot read property ‘js’ of undefined”

it work, after I change de to en :smiley:


(@SenpaiMass) #17

I am getting this error

How do i fix it?


(Ryan Hidajat) #18

can you post your js code?

if you use this line
I18n.translations.de.js.filters.google

Replace de with en
looks like it was translation problem.


(@SenpaiMass) #19
  <script>
  Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
      return this.get('href');
    }.property('href')
  });

  I18n.translations.en.js.filters.anime = { title: "Anime", help: "Anime Discussion" };

  Discourse.NavItem.reopenClass({
    buildList : function(category, args) {
      var list = this._super(category, args);
      list.push(Discourse.ExternalNavItem.create({href: 'https://animeforums.me/c/anime', name: 'Anime'}));
      return list;
    }
  });
</script>

This is the code which i am using as of now.


#20

I think it’s the name: 'Anime' that doesn’t work with the uppercase, it should be like this :

<script>
  Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
      return this.get('href');
    }.property('href')
  });

  I18n.translations.en.js.filters.anime = { title: "Anime", help: "Anime Discussion" };

  Discourse.NavItem.reopenClass({
    buildList : function(category, args) {
      var list = this._super(category, args);
      if(!category) {
        list.push(Discourse.ExternalNavItem.create({href: '/c/anime', name: 'anime'}));
      }
      return list;
    }
  });
</script>

(Pad Pors) #21

thanks for these jobs :slight_smile:

some minor questions:

  1. is there a way to change the position of the External-Item in the top menu? for example to put it as the first item rather than the last item? (i’m not using the first code, in which the position seems to be fixable).

  2. when i’m in the External-Item filter, which is a link to specific category, it doesn’t get highlighted in red; the same way as latest or top. in fact when i’m in the external link, the latest filter is highlighted:


    is there a way to fix this?

  3. if i want to change the hyperlink of the latest filter itself, may someone guide me how to do this? i know this may not be the best work, i just want to learn it.


(Pad Pors) #22

If I want the filter to be shown only to a group, I added a simple if which doesn’t work. does anyone know how i may implement this, so that only a especial group of users see the filter?

<script>
  Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
      return this.get('href');
    }.property('href')
  });

  I18n.translations.en.js.filters.unanswered = { title: "Anime", help: "Anime Discussion" };

  Discourse.NavItem.reopenClass({
    buildList : function(category, args) {
      var currentUser = Discourse.User.current();
      var list = this._super(category, args);
      if(!category && currentUser != null && currentUser.Experts) {
        
        list.push(Discourse.ExternalNavItem.create({href: '/c/Anime', name: 'Anime'}));

      }
      return list;
    }
  });
</script>

p.s.: the group is primary group to those users.


(Rafael dos Santos Silva) #23

As said here the groups attribute aren’t filled in the front page, only user page. You need a plugin to pull this info for you.


(Pad Pors) #24

thanks,

the above code works for staff group, can I conclude that it will work for system-defined groups (like trust level groups)?


(cpradio) #25

Yes, you can refer to Trust Level using .trust_level, note you will get the numerical values, 3 for TL 3, 2 for TL 2, etc.


#26
<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
href : function() {
  return this.get('href');
}.property('href')
});

I18n.translations.de.js.filters.google = { title: "Google", help: "Google" };

Discourse.NavItem.reopenClass({
buildList : function(category, args) {
  var list = this._super(category, args);
  list.push(Discourse.ExternalNavItem.create({href: 'http://www.google.com', name: 'google'}));
  return list;
}
});
</script>

Thanks very much @elberet for posting this. I have been fishing around the w3schools.com site trying to add color to my custom text (“Google” in your above example) but have not been successful.

Any pointers?


(Daniela) #27

In your CSS add:

.ember-view.nav.nav-pills a[href="http://www.google.com"] {color: red !important;}

EDIT: I don’t remember if !important is required. First try without it, if don’t work add it.


(Jens Maier) #28

Alternatively to @Trash’s suggestion, you can apply CSS styles to the entire <li> element by matching on the title attribute text:

.list-controls ul.nav.nav-pills > li[title="Google"] {
    background-color: red !important;
}

However, since this matches on the actual, potentially localized title text, you’ll need to use the same title text in all languages you provide localizations for - tho that is only an issue if you allow users to select their own locale.

:has would solve this nicely, but it’s still only supported for dynamic evaluation, and with JavaScript-based web-apps becoming increasingly mainstream, I guess browser vendors aren’t all that interested in implementing it for static stylesheets any time soon. :frowning:


#29

Thank you @elberet & @Trash for your help. Unfortunately, I could not make either of your suggestions work.

Here’s what I did:

  • I changed the URL in @Trash’s suggestion to match the URL currently used in the header (http://www.singletrackbc.com)
  • I changed the title in @elberet’s suggestion to match the title in the header (i.e., “Website”)

For reference, here are my customizations:

Common CSS

a[href="http://www.singletrackbc.com"] {
}

Common Header

<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
href : function() {
  return this.get('href');
}.property('href')
});

I18n.translations.en.js.filters.website = { title: "<strong>Website</strong>", help: 
"Navigate to the STBC main site" };

Discourse.NavItem.reopenClass({
buildList : function(category, args) {
  var list = this._super(category, args);
  if(!category) {
    list.push(Discourse.ExternalNavItem.create({href: 'http://singletrackbc.com', name: 'website'}));
  }
  return list;
}
});
</script>

Thoughts?


(Joshua Rosenfeld) #30

Is that exactly what is in your Common CSS? It looks like you’re missing the background-color line that would make the color change.


#31

Yeah, the above CSS and Header are my exact customizations.


(Joshua Rosenfeld) #32

That’s a problem then. Nothing in your JS or CSS above will change the color of your link. Note that both @Trash and @elberet have color: red; or background-color: red; in their CSS.


#33

Ok, I misunderstood you. I applied the changes as suggested by @Trash & @elberet, but they did not work. The code is simply my standard customizations.


(Daniela) #34

Well, it works for me, here, in my forum and in yours.