(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.
¡Gracias por esto! Lo acabo de encontrar después de probar varios otros banners y componentes. ¡Es exactamente lo que necesito!
Una solicitud/sugerencia: capacidad para reordenar los enlaces. Acabo de crear un montón y me di cuenta de que me gustaría añadir uno en la parte superior. Ahora tendré que copiarlos y pegarlos manualmente, lo cual es bastante engorroso ya que siguen sincronizándose/actualizándose otras entradas a medida que los copio.
La funcionalidad de arrastrar y soltar o los botones de subir/bajar serían muy útiles para futuros usuarios (o futuras ediciones).
[quote=“Nick_Chomey, post:131, topic:90588”]
Arrastrar y soltar o los botones arriba/abajo serían muy útiles para futuros usuarios (o futuras ediciones).
[/quote]Ya puedes manipular el orden muy fácilmente con algunas líneas de CSS ya que usamos la propiedad flex.
@Nick_Chomey A menudo me he encontrado necesitando hacer esto, no solo para este componente temático sino para muchos otros componentes temáticos que usan la configuración type: list. Estaba planeando enviar una solicitud de función antes, pero la olvidé por completo, pero ya que me la has recordado, he agregado una aquí:
Este componente añade una clase CSS a cada enlace basándose en su texto. La clase añadida es la misma que el texto que le das al enlace, excepto que los espacios se reemplazan por un guion (-) y el texto se pone en minúsculas. Luego, la cadena -custom-header-links se añade al final.
Así que, si añades un enlace con el texto
privacy
entonces el elemento del enlace tendrá la clase
privacy-custom-header-links
Si el texto de tu enlace es
Visit Shop
entonces la clase CSS sería
visit-shop-custom-header-links
Así que, ahora ya conoces la clase que se añade a cada enlace. Volviendo a tu pregunta.
Discourse añade una clase CSS a la etiqueta <HTML> cuando el usuario no ha iniciado sesión. Esa clase es
anon
Así que, puedes usar eso para ocultar ciertos enlaces a usuarios que no han iniciado sesión. Digamos que tengo un enlace con el texto
Customer Support
y no quiero que se muestre a usuarios que no han iniciado sesión.
Tenga en cuenta que el display: none; de CSS solo oculta el enlace de la representación del navegador, pero siempre es completamente visible para cualquiera que mire el código fuente de la página, para los rastreadores web y los motores de búsqueda.
