Custom Header Links

I just pushed some updates to this component

https://github.com/discourse/discourse-custom-header-links/commit/175a027582eac0b95803b3675ea37faf527ae68c

Not currently no, but we have this component if you prefer icons

No plans to add those as parameters to the settings as I’m trying to keep those short.

However, links will now have CSS classes added to them based on their text. So a link with the text “Most Viewed” would have the class most-viewed added to it.

You can then use these styles to hide it for anons

.anon {
  .headerLink.most-viewed {
    display: none;
  }
}

If you want it to only be visible to anons, you can use

html:not(.anon) {
  .headerLink.most-viewed {
    display: none;
  }
}

this is beyond the scope of this component.

Merged, thanks for that :+1:

Thanks for this :+1: Can you please have a look at the new changes and update the PR? I’m fine with adding icons as long as it maintains backwards compatibility and the icons are not required.

See the bit above about how links now have CSS classes. You’ll be able to use something similar with the user’s primary group name since that’s also added as a CSS class to the <body> tag.

CSS stands for cascading style sheet. Cascading here is the key.

If you write two CSS rules with the same specificity, whatever comes last will always apply.

example

body {
  background: red;
}

body {
  background: green;
}

if you use the CSS above, the <body> tag will end up with a green background because that rule came later so it overrides whatever comes before it - again, this only works if the specificity is the same.

If the specificity is not the same, whatever rule that’s more specific will apply regardless of the order. So, your CSS works because it’s loaded after the CSS from the component and it’s as specific.

11 Likes