Custom Header Links

I’m new to this. Added this, created my links, and the preview shows and works properly. However, in the live site the links don’t show up. I must be missing something. Can you help?

Have a look at the “Add theme components to a theme” section of How do I install a Theme or Theme Component?. It sounds like you might have missed that step.

3 Likes

Got it working. Thanks for that–I missed that last step of adding it to the theme.

Hi, is it possible to show the link only for users with a trustlevel greater then 1?

In a similar vein, is it possible to show a link only for users who are members of a particular group?

Our designer is having some problems with the responsive aspect of this (very nice and useful) add-on and she asks if she can change the breakpoint where it currently switches from the vdo to vmo elements?

Is this possible? Thanks

1 Like

Sure. Just fork and edit the theme component.

2 Likes

Thanks, I had a look but I don’t find it there… I guess it’s relying on some Discourse setting that applies throughout the site, not just for that menu?

Any way - we have it working with CSS media queries. Not ideal, but we can live with this.

1 Like

The switch from vdo - view desktop only - to vmo - view mobile only - is based on the user-agent in your browser and not on the width of the viewport you use / simulate.

CSS media queries are not as important in Discourse as they are in other sites that you might be accustomed to.

Discourse serves different optimized markup based on the device the user is on.

What I’m getting at is that you don’t need to worry much about CSS media queries. Your designer needs to either add ?mobile_view=1 to the URL they’re testing on, or use a mobile user-agent while testing / debugging things on desktop.

3 Likes

Interesting :thinking: thanks for taking the time to explain.

But when I am on desktop, playing with my browser window size, I see Discourse reacting and rearranging stuff on screen. That’s not coming from my user agent string, I assume. Is there another mechanism reacting to screen size?

For example: that time-lapse scroll bar on the right disappears at small widths and is replaced by a smaller indicator with just the post number and total like 19 / 24

1 Like

You’re not wrong.

Discourse will move things around if you shrink your window size enough. We do this to accommodate for different desktop / laptop screen sizes.

That’s not the point here though. Shrinking the viewport won’t trigger user-agent change because it’s entirely based on the user-agent of the device you’re using.

If you’re on desktop and you change the window / screen width, Discourse will adjust to that as much as reasonably possible.

However, if you’re trying to test what Discourse looks like on mobile while you’re on desktop, then you need to either add

like I mentioned above

or test on a mobile device.

3 Likes

Great theme component. Thank you.

Is there a way to hide the links if the user has to login to view the site content?
This is what my site looks like on the login page with the theme enabled.

image

2 Likes

Until there is a cleaner way to do it via an upgrade of the component, you can add this css lines in your theme

.anon .custom-header-links {
    display: none;
}
6 Likes

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

7 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 GitHub - discourse/DiscoTOC: A Discourse theme component that generates a table of contents for topics with one click 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