Custom Header Links

This works a treat!!!

If any of you amazing coders out there could add the ability per link to make visible to

  1. logged in users or
  2. anon (eg not logged in) users or
  3. all users

we would be extremely grateful!!!

2 Likes

Everything is still doable via css, but you have to create a line for each link which can take some time.

If we take the demo for this component :

I’ll try your 3 scenarios with the Tech example.

Ex #1 visible to logged in users

.anon .headerLink.tech {
    display: none;
}

Ex #2 visible to not logged in users

.headerLink.tech {
    display: none;
}
.anon .headerLink.tech {
    display: inline-block;
}

Ex #3 visible to all users : don’t add anything


Replace text with the key word of your menu.

I’ll take a last example to help you. The css class to use for the item menu Your Vote Counts! is .headerLink.your-vote-counts

9 Likes

Dude! You rock! Sorted.

I’ve noticed that on hover, the link doesn’t change background colour like all the other ones in Discourse. I’ve tried to hack some CSS to cover that, which works well enough:

.custom-header-links .headerLink a:hover {
      background-color: #343434
}

It would be good to get this into the theme-component CSS, but I’m too much of a numpty to do that. Maybe time to get onto GitHub, eh?

1 Like

Steven, would you mind giving a bit more CSS advice?

How do I target the link text colour in Custom Header Links?

1 Like

For a specific link?

It’s basically the same idea as before, but you just have to add a in the class

ex: for Your vote Count! link

.headerLink.your-vote-counts a {
    color: #ff3300;
}
3 Likes

Hi friend, I want to make a Theme Translations for this component
I have read the Multiple languages support in How to add settings to your Discourse theme

and i find this theme https://github.com/discourse/DiscoTOC have the theme translations functions.

but i don’t know how to start to make a translations for this theme component,

can you give me a guidelines

1 Like

I’m trying to change this use David Taylor’s topic

 I18n.t(themePrefix("my_translation_key"))

in Adding localizable strings to themes and theme components

<script type="text/discourse-plugin" version="0.8.20">
  // Add an attribute to the <html> tag. This might help the user to style
  // his header links 
  $('html').attr('dhp-locale', I18n.locale)

  const customHeaderLinks = I18n.t(themePrefix("header_nav_link"));
  if (!customHeaderLinks.length) return;

  const h = require("virtual-dom").h;
  const headerLinks = [];

  const mobileView = api.container.lookup("site:main").mobileView;

and add a locales/en.yml

but get the [en.theme_translations.87.header_nav_link] resuilt

image
…so, i do someting wrong?

1 Like

No, you’re not doing anything wrong. This component does not support theme translations yet but updating it is on my list.

Are you trying to translate the text for each link so that it shows up based on the user’s language preference?

3 Likes

yes, Johani, i use this component as a menu,
as you said ,i want translate the text for each link.
it is on your list, i’m very heappy, you can do it. :smiling_face_with_three_hearts: :smiling_face_with_three_hearts: :smiling_face_with_three_hearts:

1 Like

haha, I have an idea,
I can use this component to achieve a bilingual website,
I can creat some chinese categories and some english categories,
and ues this component as the main navigation,
the title link include in the translate locales file en.yml and zh_CN.yml

the homepage and categories page i can use a translated theme component( even it’s a static page, ) achieve.

and hide the default category-drop,
and in my think, it is good for me just use two language in our website.

1 Like

Sorry if this is a bit of a basic question, but how would one go about changing the header font in this component? specifically hoping to use Convergence.

1 Like

haha, i get it, just move the header.html content to head_tag.html

get it from read again this topic

https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/14?u=aksoforever

thanks johani and this joe guy. :blush: :blush: :blush: :blush:

3 Likes

The links are wrapped in a div with the class custom-header-links so you can use that to target them. Try adding this CSS to your main theme.

@import url('https://fonts.googleapis.com/css2?family=Convergence&display=swap');

.custom-header-links {
  font-family: 'Convergence', sans-serif;
}
6 Likes

this worked great! thanks @Johani

2 Likes

Custom header link is not working after discourse update, please look into this!

https://meta.discourse.org/t/discourse-custom-header-links-not-working-not-showing-links-in-header-after-the-new-update/153328

1 Like

I just tried it and everything seems to work for me. Can you please post a link to your site?

1 Like

I just now updated the discourse and it seems to be not showing the custom header links.

There seems to be an issue with the retort plugin on your site which might be affecting this component.

1 Like

Should we remove it and then try?

Just, in case, can you double check if the component is added to your theme? I’m actually not seeing it in the source. If it is, then it’s likely that removing the plugin will fix your issue.

2 Likes