Custom Header Links

theme-component

(Joe) #1

This is a theme component that will allow you to add custom text-based links to the header easily.

Github repository link:
https://github.com/hnb-ku/discourse-custom-header-links

Demo:
https://theme-creator.discourse.org/theme/Johani/custom-header-links


Samples:

Desktop

Mobile

(due to very limited space I don’t recommend adding more than one link on mobiles)


Settings:

Adding links is straightforward. Every link needs 6 items. You enter comma delimited values in this order:

link text, link title, URL, view, target, hide on scroll

Link text: the text for the link.
Link title: the text that shows when the link is hovered.
URL: The path for the link (can be relative).
View: vdm = desktop and mobile, vdo = desktop only, vmo = mobile only.
Target: blank = opens in a new tab, self = opens in the same tab.
Hide on scroll: remove = hides the link when the title is expanded on topic pages keep = keeps the link visible even when the title is visible on topic pages.

If you’re not sure what hide on scroll does, here’s an example:

Most Liked and Privacy are set to keep and so they remain visible. The other links are set to remove, and so are hidden when the title expands in the header. This only affects topic pages.


How do I install this component?

Follow the official theme installation instructions and then add this theme as a component to your active themes.


Credit:

This component checks if the title is expanded in the header or not using bits of this awesome post by @cpradio :sunflower:


How to add header menu links
How to structure a multilingual community
How can i add custom hamburger menu
How to finely scroll out custom header?
(Brahn) #2

Nice theme, thanks!

It seems to only work if the user is logged in. Anyway to fix that for anonymous as well?

Any chance of emoji or unicode support in the text?
e.g. ☎ 1234 5678,Contact Support,tel:1234 5678,vdo,blank,remove
Would appear as - :phone: 1234 5678


Category for Threads with zero replies?
(Joe) #3

I am not sure why it’s not working on your end but it should work for both anon and logged in users without any issues.

Try and check on theme creator in an incognito tab:
Discourse Theme Creator

I believe you should be able to add html entities by copy/pasting them directly into the theme settings as opposed to using the entity number. So instead of this:

☎ 1234 5678,Contact Support,tel:1234 5678,vdo,blank,remove

Try something like this:

☎ 1234 5678,Contact Support,tel:1234 5678,vdo,blank,remove


(Brahn) #4

That works, thanks.

There seems to be an odd refresh or delay issue when adding a component to a theme. Or a user issue. It is working now for both my site themes both anon and logged in after removing and re-adding.


#5

I imported the theme and “Created” those link lines and saved… but I’m still not seeing any links up top. Did I miss something?

Thanks in advance for any help. :slight_smile:


(Joe) #6

It sounds like everything is set up but you didn’t add the theme component to your active theme. Have a look at how to add theme components to a theme and let me know if the issue persists.


(Ronny) #7

I’ve installed this component Custom Header Links.
how to configure the menu links?


#8

You need to look in your settings page not the CSS Customisation page


(Ronny) #9

where is the page settings?
let me know what’s the menu


#10

Apologies I thought it was added into the settings but just imported this theme component and can see it should be at the bottom of the components page

What version of discourse are you using? As it looks as though you will need to upgrade as you do not have the split of Themes and Components on the left hand side.


(Orlando Del Aguila) #11

Is there a way to set the links programmatically?


(Joe) #12

Like @mikechristopher mentioned, you’re on an old version of Discourse that does not support theme settings. All Discourse branches now have support for theme settings so you need to update your install.

Yes, that should be possible, what did you have in mind?


(Orlando Del Aguila) #13

Our Discourse instance deployment is automated using Terraform, we set SiteSettings depending on the env we are deploying, and I would like to automate this part too.

What I ended up doing is copying your code to a plugin and use SiteSettings to pull the values, but if I can automate the install of the theme as well as setting these values, I’ll do that instead of the plugin approach.

Thanks!


(Seth) #14

What do you think about adding 2 additional setting options.
type: text | button Allow for a text link as it is now, but also duplicate the button element wrapper to simulate a button like the login button when a user is not logged in

classes: string - This could help with the programatic aspect of allowing a link to be accessed by a component to react to a programatic parameter.

We’re using SSO for logging in and if the user is logged in we are showing a link to go back to their account. Also we’ve added a sign up link too instead of pushing them into the SSO login flow directly.


(Mittineague) #15

Do you think there is a need for an actual button element? I associate buttons with forms, and navigation links aren’t in a form, they’re links.

Is there any reason you are unable to style the link so that it looks like a button?