The preview does not work
3 Likes
I’ve updated the preview link, it should work now!
3 Likes
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
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
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
Hello, could it be possible to style the links to be centered instead of just left/right?
1 Like
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
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
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
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
@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
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 
1 Like
****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.
1 Like
Any chance a break-point may be implemented so that when the horizontal screen space is below a certain threshold, the custom header links will disappear? Currently it remains on screen and is just cut off when you shrink to the screen within a certain threshold.
1 Like
I am getting an internal error 500 trying to install the custom header links theme component to my sandbox system, which is up to date.
Error log shows:
Failed to process hijacked response correctly : Timeout::Error : Timeout::Error
/var/www/discourse/lib/final_destination/resolver.rb:31:in `block in lookup'
/var/www/discourse/lib/final_destination/resolver.rb:8:in `synchronize'
/var/www/discourse/lib/final_destination/resolver.rb:8:in `lookup'
/var/www/discourse/lib/final_destination/ssrf_detector.rb:127:in `lookup_ips'
/var/www/discourse/lib/final_destination/ssrf_detector.rb:95:in `lookup_and_filter_ips'
/var/www/discourse/lib/theme_store/git_importer.rb:148:in `clone_http!'
/var/www/discourse/lib/theme_store/git_importer.rb:121:in `clone!'
/var/www/discourse/lib/theme_store/git_importer.rb:19:in `import!'
/var/www/discourse/app/models/remote_theme.rb:113:in `import_theme'
/var/www/discourse/app/controllers/admin/themes_controller.rb:115:in `block in import'
/var/www/discourse/lib/hijack.rb:51:in `instance_eval'
/var/www/discourse/lib/hijack.rb:51:in `block in hijack'
/var/www/discourse/lib/scheduler/defer.rb:102:in `block in do_work'
rails_multisite-4.0.1/lib/rails_multisite/connection_management.rb:80:in `with_connection'
/var/www/discourse/lib/scheduler/defer.rb:96:in `do_work'
/var/www/discourse/lib/scheduler/defer.rb:85:in `block (2 levels) in start_thread'
Hello ! Since last month, I’ve submitted a pull request on this componant with the possibility to add a feature that could allow link filtering by assigning an optional locale attribue to each link that would then not be pushed if the locale isn’t the same as the browser’s 
2 Likes
Unfortunately, this theme component stopped working with the latest version of Discourse.
Is someone else encountering the same issue?
1 Like
2 Likes
This has been reported here Missing Custom Header Links after update - #2 by Arkshine
An immediate fix would be to add the language attribute to your links in the settings.
If your links are in English, add at the end ,en.
4 Likes
Thanks, that worked!
2 Likes