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.
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.
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.
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!
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”:
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.
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).