Custom Header Links

theme-component
#137

Hey @andreas_can welcome to Meta :wave:

This component adds a CSS class to each link based on its text. The class added is the same as the text you give the link except that spaces are replaced with a hyphen (-) and the text is set to lowercase. Then the string -custom-header-links is appended at the end.

So if you add a link with the text

privacy

then the link element will have the class

privacy-custom-header-links

If your link text is

Visit Shop

then the CSS class would be

visit-shop-custom-header-links

So, now you know the class added to each link. Going back to your question.

Discourse adds a CSS class to the <HTML> tag when the user is not logged in. That class is

anon

So, you can use that to hide certain links for users who are not logged in. Letā€™s say I have a link with the text

Customer Support

and I donā€™t want it to show to users who are not logged in.

I would then add this CSS

.anon {
  .customer-support-custom-header-links {
    display: none;
  }
}

in the common > CSS tab of my main theme.

This will hide that particular link for users who are not logged in.

8 Likes
#138

Thank you for such a quick and thorough reply!
This is exactly what I was looking for.

Iā€™ll give it a go :slightly_smiling_face:

3 Likes
#139

Note that CSS display: none; only hides the link from browser rendering but it is always fully visible to anyone looking at the page source, to web crawlers and search engines.

3 Likes
#140

This is generally true, CSS isnā€™t a secure way to hide anything because a savvy person might look at the page source for whatever reasonā€¦ but we do serve a no-js view to crawlers, so in that case content added by themes usually isnā€™t indexed anyway.

3 Likes
#141

The preview does not work

_20220426_114543
_20220426_114543720Ɨ520 35.6 KB

3 Likes
#142

Iā€™ve updated the preview link, it should work now!

3 Likes
#143

Is it possible to use this component to call a javascript with
javascript:script('function');
instead of an actual url?

(It seems to almost work, but Iā€™m hitting CSP violations.)

Edited to add:
I got it to work. If anyone else should ever wonder, I used # in the componentā€™s UI in place of a url, then used an event listener to call the javascript function.

Others likely know a better way, and I hope theyā€™ll share that knowledge if they do!

2 Likes
#144

Hi, Iā€™d like to adjust the font style and size of the header links. Can someone please point me to the correct CSS that allows me to do this? Thanks!

2 Likes
#145

Hey @brentoshiro, the properties will vary depending on what you need styled, but the way you would select the links would be like so:

To style all header links:


.custom-header-links .headerLink a {
    font-size: 1rem; // replace with your font size of choice
    color: #96b67b; // can also use variables such as var(--tertiary);
    font-style: italic; // options: normal, italic, oblique
}

To style a specific link
You can access the link either using the link title (separated by dashes and lower case) like so for ā€œPrivacyā€:

.custom-header-links .headerLink.privacy-custom-header-links a:hover {
    color: red;
}

or by using the title attribute and entering the link title:

.custom-header-links .headerLink a[title='Our Privacy Policy'] {
    color: purple;
}

To add styles on hover, you simple add :hover after the a tag:


.custom-header-links .headerLink a:hover {
    color: var(--primary-low);
}
2 Likes
#146

Hello, could it be possible to style the links to be centered instead of just left/right?

1 Like
#147

This is really cool. Iā€™m wondering how much additional work this would be to allow for different lists of header links per-group? We have staff and students on our site and would love to be able to provide different primary links in the header for each group.

3 Likes
#148

You could achieve that by having each group on a different Theme, with each theme using its own copy of this Theme Component.

This would work nicely if one of your two groups was quite static (or at least smaller) - your staff group seems ideal for that. Or at least if you only had one dynamic group.

You then make the student links the site default Theme, and the make your staff members have the staff links manually (either by the UI or via the Rails Console).

6 Likes
#149

I was just coming here to ask this as I finally noticed they appear on the log in screen

In my case, one of the links is changed every month (while the header name remains the same). Is it possible to hide the header with a code without having to edit to hide the link? For example using your example I would have

Customer Support
2022-customer-support/26903 is what my link is, then customer-support-july, etc.

So as you can see hiding customer-support-june would works fine, but it has to be updated monthly instead of if I was just hiding ā€œFAQā€ (and I also canā€™t add the /26903 from the topic to the CSS code so I canā€™t hide this specific link although I can possibly get around this by publishing the page?). If thereā€™s no other way to do it this isnā€™t a big deal at all thatā€™s not any amount of effort, itā€™s more that I guarantee Iā€™ll forget.

2 Likes
#150

Is there are way to include the username in the header link?
Iā€™d like to link to /u/{username}/activity/assigned to get users quickly to their Assigned topics

3 Likes
#151

@Alon1
If youā€™re trying to link to the current logged in userā€™s assigned topics, you can use link to:
/my/activity/assigned/ which will redirect to the appropriate url.

4 Likes
#152

hello, i was curious to know if it was possible to get possibly translations for the text ? Maybe by including translation keys, if the componant includes them :slight_smile:

1 Like
#153

****Any reason why by default itā€™s not showing to non-logged in users?

Ignore, for some reason when I apply a component to the Theme, it doesnā€™t appear. I have to add the component onto the Theme instead.