(due to very limited space I don’t recommend adding more than one link on mobiles)
Settings
Name
Description
custom header links
Custom links to be displayed in the header
links position
Note that when links are displayed on the left, they’re automatically hidden while scrolling within topics to make room for the title
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.
Links position: This setting allows you to change the default layout so links will appear on the left near the logo instead of on the right. Note that when positioned to the left, links will automatically be hidden when scrolling within topics to make room for the topic title.
Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.
don’t know if this has been suggested, tried reading back but couldn’t find it.
was thinking that maybe adding the ability to create “sub-links” thus creating the idea of a list that you could edit (text color, background hover etc.) to get results similar to what zoom has
Is it possible to add some basic dropdown menu to an any item?
I couldn’t create a dropdown menu with “Custom header links”. It seems Zoom did that. I reviewed their dropdown menu via console, but I couldn’t figure out how they interfere with the html of this component for adding dropdown to any item.
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:
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.
Merci pour ça ! Je viens de le trouver après avoir essayé diverses autres bannières et composants. C’est exactement ce dont j’ai besoin !
Une demande/suggestion : possibilité de réorganiser les liens. Je viens d’en créer plusieurs et j’ai réalisé que j’aimerais en ajouter un en haut. Maintenant, je vais devoir tous les copier-coller manuellement, ce qui est en fait assez fastidieux car ils continuent de synchroniser/mettre à jour d’autres entrées au fur et à mesure que je les copie vers le bas.
La fonction glisser-déposer ou des boutons haut/bas serait très utile pour les futurs utilisateurs (ou les futures modifications).
[quote=“Nick_Chomey, post:131, topic:90588”]
Le glisser-déposer ou les boutons haut/bas seraient très utiles pour les futurs utilisateurs (ou les futures modifications).
[/quote]Vous pouvez déjà manipuler l’ordre très facilement avec quelques lignes de CSS puisque nous utilisons la propriété flex.
@Nick_Chomey Je me suis souvent retrouvé à devoir faire cela, non seulement pour ce composant de thème, mais pour de nombreux autres composants de thème qui utilisent le réglage type: list. J’avais l’intention de soumettre une demande de fonctionnalité auparavant, mais j’ai complètement oublié, mais puisque vous me l’avez rappelé, j’en ai ajouté une ici :
Ce composant ajoute une classe CSS à chaque lien en fonction de son texte. La classe ajoutée est identique au texte que vous donnez au lien, sauf que les espaces sont remplacés par un trait d’union (-) et que le texte est mis en minuscules. Ensuite, la chaîne -custom-header-links est ajoutée à la fin.
Donc, si vous ajoutez un lien avec le texte
privacy
alors l’élément de lien aura la classe
privacy-custom-header-links
Si le texte de votre lien est
Visit Shop
alors la classe CSS serait
visit-shop-custom-header-links
Vous connaissez donc maintenant la classe ajoutée à chaque lien. Revenons à votre question.
Discourse ajoute une classe CSS à la balise <HTML> lorsque l’utilisateur n’est pas connecté. Cette classe est
anon
Vous pouvez donc l’utiliser pour masquer certains liens pour les utilisateurs qui ne sont pas connectés. Disons que j’ai un lien avec le texte
Customer Support
et que je ne veux pas qu’il apparaisse aux utilisateurs qui ne sont pas connectés.
Notez que la propriété CSS display: none; masque uniquement le lien dans le rendu du navigateur, mais il est toujours entièrement visible pour quiconque consulte le code source de la page, ainsi que pour les robots d’exploration et les moteurs de recherche.
