 |
Resumen | Banner Featured Links te permite crear un banner de enlaces. |
 |
Vista previa | Theme Creator |
 |
Repositorio | GitHub - Arkshine/discourse-banner-featured-links · GitHub |
 |
Guía de instalación | Cómo instalar un tema o un componente de tema |
 |
¿Nuevo en los temas de Discourse? | Guía para principiantes sobre el uso de los temas de Discourse |
Instalar este componente de tema
Resumen
Banner Featured Links te permite crear un banner de enlaces.
Ofrece una amplia gama de opciones de personalización.
Es una función inspirada en el fantástico tema de Discourse “Meta Branded”.
Características
La apariencia predeterminada: utiliza el color del tema.
El botón se puede estilizar por separado:
Puedes colocar los enlaces en varios lugares mediante la configuración plugin outlet.
En la descripción se proporciona una lista de ubicaciones comunes.
Por ejemplo, si quieres imitar el tema Meta Brand, usa el outlet search-banner-below-input. Esto asume que has instalado el componente Search Banner.
Detalles
El estilo actual se puede lograr con la siguiente configuración:
¡Te animo a que pruebes tu propio estilo!
Configuración
General
| Nombre | Descripción |
|---|---|
links |
Enlaces de texto que se mostrarán en la cabecera. |
show_for_members |
Mostrar los enlaces para los usuarios conectados. |
show_for_anon |
Mostrar los enlaces para los usuarios anónimos. |
display_on_mobile |
Mostrar los enlaces en dispositivos móviles. |
display_on_desktop |
Mostrar los enlaces en ordenadores de escritorio. |
display on homepage |
Mostrar los enlaces en la página de inicio. |
url must contain |
Introduce las rutas que deben mostrar el banner. Añade * al final de la ruta como comodín. |
plugin outlet |
La ubicación donde se mostrarán los enlaces.Ubicaciones comunesabove-main-containerabove-site-headerafter-headerbefore-header-panelbefore-list-areabefore-topic-listbelow-site-headerheader-list-container-bottomtopic-above-post-streamComponente Search Banner: search-banner-below-headlinesearch-banner-below-input |
Configuración links:
| Nombre | Descripción |
|---|---|
| Icono | El icono de FontAwesome o el emoji que se mostrará para los enlaces.AtajosWindows: Win + .. Mac: Cmd + Ctrl + Space ChromeOS: Launch + Shift + Space |
| Título | El título del enlace. |
| URL | La URL a la que enlazar. |
| Target | Abre el documento enlazado:_blank: en una nueva ventana o pestaña (este es el predeterminado)_self: en el mismo marco en el que se hizo clic_parent: en el marco padre_top: en el cuerpo completo de la ventana. |
También puedes estilizar por botón. Esto sobrescribirá el estilo global.
| Nombre | Descripción |
|---|---|
| Ancho | El ancho del botón. |
| Fuente | La fuente del botón. |
| Redondeo | La cantidad de redondeo que se aplicará al botón. |
| Fondo | El color de fondo del botón. |
| Fondo al pasar el ratón` | El color de fondo del botón al pasar el ratón. |
| Color` | El color del texto del botón. |
| Color al pasar el ratón` | El color del texto del botón al pasar el ratón. |
| Borde | El borde del botón. |
| Borde al pasar el ratón | El borde del botón al pasar el ratón. |
| Sombra | La sombra del botón. |
| Nombre de clase CSS | Una clase CSS personalizada que se aplicará al botón. Útil si quieres estilizar el botón de forma diferente y la configuración no es suficiente. Puedes dirigirla con .banner-featured-links__link.tu-clase {} |
Estilizado global
Personaliza el espaciado y la apariencia predeterminados de los enlaces.
Puedes sobrescribir el estilo de cada botón individualmente.
Estilizado del contenedor de botones
Personaliza el contenedor de los enlaces.
| Nombre | Descripción |
|---|---|
ancho máximo del contenedor de botones |
El ancho máximo del contenedor de botones. |
margen del contenedor de botones |
El margen del contenedor de botones. |
ancho máximo del contenedor de botones en móviles |
El ancho máximo del contenedor de botones en móviles. |
margen del contenedor de botones en móviles |
El margen del contenedor de botones en móviles. |
Espaciado de botones y fuente de texto
Personaliza el espaciado de los botones y el tamaño de fuente del texto.
| Nombre | Descripción |
|---|---|
justificación de botones |
Cómo distribuir el espacio entre y alrededor de los enlaces. |
hueco entre botones |
El hueco entre los botones. |
fuente de botones |
La fuente de los botones. |
justificación de botones en móviles |
Cómo distribuir el espacio entre y alrededor de los enlaces en móviles. |
hueco entre botones en móviles |
El hueco entre los botones en móviles. |
dirección de botones en móviles |
La dirección de los botones en móviles. |
fuente de botones en móviles |
La fuente de los botones en móviles. |
Estilizado de botones
Personaliza la apariencia predeterminada de los botones.
| Nombre | Descripción |
|---|---|
ancho del botón |
El ancho del botón. |
relleno del botón |
El relleno del botón. |
redondeo del botón |
La cantidad de redondeo que se aplicará al botón. |
fondo del botón |
El color de fondo del botón. |
fondo del botón al pasar el ratón |
El color de fondo del botón al pasar el ratón. |
color del botón |
El color del texto del botón. |
color del botón al pasar el ratón |
El color del texto del botón al pasar el ratón. |
borde del botón |
El borde del botón. |
borde del botón al pasar el ratón |
El borde del botón al pasar el ratón. |
sombra del botón |
La sombra del botón. |
Personalización avanzada
Puedes usar el siguiente CSS para personalizar aún más:
.banner-featured-links {
&__wrapper {
}
&__wrapper-links {
}
&__link {
}
}
Si proporcionas una personalización por botón, puedes especificar un nombre de clase en la configuración CSS Classname.
Luego, puedes dirigirla de esta manera:
.banner-featured-links {
&__link.mi-clase {
}
}
Enlaces útiles
- Variables CSS del núcleo de Discourse: discourse/app/assets/stylesheets/color_definitions.scss at main · discourse/discourse · GitHub
”,“text”:"¡Únete a nuestro Programa de Campeones! ",“url”:“
”, “text”=>“Nuevos Widgets”, “target”=>“_self”, “button_color_hover”=>“
.
