Custom Header Links

Yes, the text color will use the currently selected color scheme.

2 Likes

weird - because I get this

1 Like

Here’s what I see on my local:

Can you make sure the component is updated?

4 Likes

how can the title convert **formatting code** into actual formatting? also how about Font Awesome icons before the text?

1 Like

Hi,

Thanks for this great theme component!

For registration-only / private Discourse communities, would it be possible to show the header links only to registered signed-in users?

1 Like

Yes, you can hide them via CSS for visitors who are not logged in:

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

Thanks, however CSS just hides it from view, the links are still available in the page source and so open to anyone, including search engine, crawlers, etc.
I was aiming for not showing those links at all, like you would have hidden topics in:
image

1 Like

Could be possible to add a flag to show or hide links as specific groups of users?

3 Likes

Great component thanks! I am new and this is the first component I installed myself. Due to its simplicity even I got it to work and I am well proud of myself.
One more question I couldnt find the answer for despite a lot of searching on the Forum:

Is there a way to make the text in the header bold and/or change the font used for the header?

2 Likes

Hi, we are using “vdo” in our three links, and yet they show up in the mobile version (where they break the UI due to forcing a too wide width).

Is “vdo” working properly for anyone reading this?

We are running 2.8.0.beta6 ( eed3773b97 ).

1 Like

I have just tested this on the latest Discourse code, using the link examples that are supplied when the theme component is first installed:

  • External link, this link will open in a new tab, https://meta.discourse.org, vdo, blank, remove
  • Most Liked, Posts with the most amount of likes, /latest/?order=op_likes, vdo, self, keep
  • Privacy, Our Privacy Policy, /privacy, vdm, self, keep

When I force my site to enter mobile mode by loading it with the ?mobile_view=1 query parameter, the first two links (set to vdo) are correctly removed from the header and only the final vdm link is displayed.

4 Likes

Thank you for testing. When using this parameter on a desktop browser I obtain correct results, both with our custom links and with the defaults.

However, have you tested on an actual mobile device? With Firefox on an Android mobile phone I can see the default and the custom links (desktop mode being disabled). The rest of the Discourse UI is the usual mobile UI.

(If I type the ?mobile_view=1 parameter manually in the mobile browser URL then the links follow vdo.)

EDIT: I have tested with Chrome mobile as well, and there it works correctly. I’m confused, but a bit relieved. :slight_smile:

3 Likes

Is there a way this theme component can allow for dropdown navigation? That means, when I hover over a header link, it has sub-items that appear underneath it. I know that this can be done via html/css as shown here:

2 Likes

Thank you for creating this component!
One question and potentially a feature request: can we show a specific link for a specific group?
For example, if a user is in group customers I’d like to show a link to the customer’s control panel, if a user is in group workers I’d like to add a link to a different panel.
I think this would be a very useful feature.
The group name could be the last (optional) parameter.

2 Likes

Thanks for this! I just found it after trying various other banners and components. Its exactly what I need!

One request/suggestion: ability to re-order the links. I just made a bunch and realized I’d like to add one at the top. Now I’ll have to manually copy and paste them all, which is actually quite cumbersome as they keep syncing/updating other entries as I copy them down.

Drag and drop or up/down buttons would be very useful for future users (or future edits).

3 Likes

You can already manipulate the order very easily with some lines of CSS since we use the flex property.

E.g.:

CSS example:

.custom-header-links li {
  &:nth-child(1) {
    order: 3;
    background: red;
  }

  &:nth-child(2) {
    order: 1;
    background: green;
  }

  &:nth-child(3) {
    order: 2;
    background: yellow;
  }
}
5 Likes

@Nick_Chomey I’ve often found myself needing to do this, not only for this theme component but many other theme components that use the type: list setting. I was planning on submitting a feature request before, but I completely forgot, but since you’ve reminded me, I’ve added one here:

3 Likes

@Dax Thanks! I had no idea this was possible!

@keegan looks great, hopefully itll get added at some point!

2 Likes

I’m looking for the same solution, did you find out how they did this yet?
Thanks!

1 Like

Hi @Johani
Thanks for creating such an awesome component!

Is it possible to have a link only be visible if the user is logged in?
It will be an external link.

1 Like