Pie de página receptivo fácil

[Discourse]

|||
-|-|-|
| Resumen | Easy Responsive Footer te permitirá crear un pie de página totalmente adaptable utilizando solo texto plano.
| | Vista previa | Vista previa en el Creador de Temas de Discourse |
| Enlace al repositorio | https://github.com/discourse/Discourse-easy-footer
| ¿Nuevo en Temas de Discourse? | Guía para principiantes sobre el uso de Temas de Discourse

Instalar este componente de tema

Dado que este es un componente de tema #oficial mantenido por el equipo de Discourse, las #soporte, #error, UX y las solicitudes de #característica se pueden realizar en las categorías correspondientes aquí en Meta, y etiquetarse con la etiqueta apropiada del componente de tema. Haz clic en un enlace a continuación para comenzar uno.

 Soporte  Error  UX  Característica

Características

Escritorio

Móvil

Ajustes

Nombre	Descripción
heading	Texto para el encabezado del pie de página; puedes usar el nombre de tu sitio, por ejemplo. Longitud máxima: 25 caracteres.
blurb	Introduce una breve descripción de tu comunidad. Longitud máxima: 180 caracteres.
sections	Secciones a mostrar en el pie de página
social links	Enlaces sociales que te gustaría añadir al pie de página
show footer on login required page	Marca esta opción si quieres que el pie de página se muestre en la página de inicio de sesión requerida (solo se aplica si tu sitio es privado)
svg icons	Lista de iconos de FontAwesome 5 utilizados en la configuración de enlaces sociales anterior.

Hay seis ajustes en este componente que te ayudarán a configurarlo fácilmente.

1. Encabezado

Texto para el encabezado del pie de página; puedes usar el nombre de tu sitio, por ejemplo. Longitud máxima: 25 caracteres.

2. Descripción

Una breve descripción de tu comunidad. Longitud máxima: 180 caracteres.

3. Secciones de enlaces

Añade secciones de enlaces. El número ideal de secciones es seis. Un elemento por línea en este orden: Texto, título.
Texto: lo que aparece en el pie de página.
Título: el texto que aparece cuando se pasa el ratón por encima del elemento.

4. Enlaces

Añade enlaces a las secciones de enlaces. Un elemento por línea en este orden:
Padre, texto, URL, destino, título.
Es una buena idea mantener el número de enlaces bajo cada sección similar.
Padre: el nombre de la sección principal bajo la cual se muestra este enlace. Usa el valor texto de la lista anterior.
Texto: el texto que se muestra para este enlace.
URL: la ruta a la que enlaza este elemento. También puedes usar rutas relativas.
Destino: elige si este elemento se abrirá en una nueva pestaña o en la misma pestaña. Usa blank para abrir el enlace en una nueva pestaña, o usa self para abrirlo en la misma pestaña.
Título: el texto que se muestra al pasar el ratón por encima del enlace.

5. Enlaces pequeños

Puedes añadir enlaces pequeños en la parte inferior del pie de página, como Términos de Servicio y Privacidad. Un elemento por línea en este orden:
Texto, URL, destino.
Texto: el texto que se muestra para el enlace pequeño.
URL: la ruta del enlace.
Destino: usa blank para abrir el enlace en una nueva pestaña y self para abrirlo en la misma pestaña.

6. Enlaces sociales

Introduce los enlaces sociales que te gustaría añadir al pie de página en este formato:
proveedor, título, URL, destino.
Proveedor: es el nombre del proveedor, como Facebook o Twitter.
Título: el texto que se muestra al pasar el ratón por encima del enlace.
URL: la ruta que te gustaría que tuviera el enlace.
Destino: usa blank para abrir el enlace en una nueva pestaña y self para abrirlo en la misma pestaña.

Notas

1. Dejé los elementos de marcador de posición como valores predeterminados para el componente para que puedas ver fácilmente cómo deberían ser tus ajustes.

2. Este componente utilizará el esquema de colores de tu tema para generar los colores utilizados en sus elementos, pero todos los elementos tienen clases únicas añadidas en caso de que quieras anular algo.

3. Dado que este componente utiliza los ajustes del tema, significa que puedo actualizarlo en el futuro para corregirlo o mejorarlo y los datos que introduzcas no se perderán

¿Alojado por nosotros? Los componentes de tema están disponibles para su uso en nuestros planes Pro, Business y Enterprise.

[Johani (Joe)]

He aplicado algunas correcciones.

Cambios clave:

• el componente ahora utiliza variables CSS, por lo que es compatible con el modo oscuro

• algunas correcciones en las consultas de medios para solucionar el error reportado por @mbauman

• se agregó una configuración que permite controlar si el pie de página se muestra o no en las páginas que requieren inicio de sesión

  

https://github.com/discourse/Discourse-easy-footer/commit/a694b1ba8e31d5b24b2d0fd8e2b6190bf987527b

@rolando

He hecho que mi .wrap sea más ancho (1200px) con consultas de medios para que, después de cierta resolución, el foro sea más ancho. Si habilito el pie de página responsivo, el .wrap se vuelve más estrecho (1100px), pero solo la «parte del tablero» y no .d-header .wrap ni .footer, que se mantienen en (1200px). En cuanto desactivo el pie de página responsivo, todo se ve más ancho (1200px) como se pretendía.

La causa aquí es la especificidad de CSS. Tu CSS apunta a .wrap y funciona, pero este componente también tiene algo de CSS que apunta a #main-outlet y le agrega algunas propiedades para mantener el pie de página en la parte inferior incluso en páginas cortas.

Discourse-easy-footer/common/common.scss at main · discourse/Discourse-easy-footer · GitHub

El selector #main-outlet es más específico que tu selector .wrap, ya que está basado en ID, por lo que anula tus estilos.

Puedes solucionarlo agregando este CSS:

#main {
  #main-outlet {
    width: 1200px; // o el ancho que desees usar
  }
}

@Edward_Legaspi

Hola. ¿Hay alguna forma de limitar el número de columnas del pie de página a 3?

Claro, elimina todas las columnas adicionales que no necesites en la configuración y obtendrás tres columnas.

@PoojaPatel

Después de la actualización, obtengo un error en la consola de Chrome como el siguiente.

No puedo reproducir este problema, pero el error implica que tu configuración es incorrecta. ¿Podrías verificarlo de nuevo y asegurarte de haber seguido las instrucciones bajo cada configuración? Si tu problema persiste, ¿podrías compartir un enlace al sitio donde ves el problema?

---

Hice un poco de limpieza y eliminé las respuestas sobre errores que se solucionarán una vez que actualices el componente. Si tu problema persiste, siéntete libre de publicar sobre ello nuevamente.

[dadberg (Interstellar)]

Me pregunto si el texto del encabezado (This is a header) dentro de [Easy Footer Theme Component by Joe] puede ser reemplazado por un logotipo.

He intentado exportar el componente para modificar los archivos hbs, pero no he tenido éxito. Creo que necesito algunas pistas.

Cualquier orientación será muy apreciada

[dax (Daniela)]

Dependiendo de lo que quieras hacer, puedes probar algo como esto:

• En la configuración del tema “Easy responsive footer”, elimina el texto dentro de la configuración Blurb. Si quieres, también puedes eliminar el texto dentro de la configuración Heading.

• Crea un nuevo componente de tema y añádelo en la pestaña Common > CSS

  .custom-footer .first-box .blurb::before {
      background-image: url(LOGO-URL);
      background-repeat: no-repeat;
      display: inline-block;
      content: "";
      /* cambia la configuración a continuación según el tamaño de tu logo */
      background-size: 200px 200px;
      width: 200px;
      height: 200px;
  }
  

y el resultado será algo como esto:

[dadberg (Interstellar)]

¡Resuelto!

Mi fe en el ecosistema de código abierto se vio inicialmente fortalecida por grandes personas como tú.

[Jcava5 (John)]

Debería haber una opción para personalizar los colores del fondo y del texto con CSS. Por defecto, no coincide con el encabezado.

¡Por lo demás funciona genial! ¡Gracias!

[thaidb]

hola Joe, ¿podemos agregar más widgets aquí también?

[b481]

Esto ha provocado que el logo aparezca en el blurb::before de los resultados de búsqueda, incluso después de haberlo especificado en el componente:

div.below-footer-outlet.custom-footer.ember-view > div.wrap > div.flexbox > div.first-box > .blurb::before {
    background-image: url(image url);
}

¿Existe alguna forma de asegurarnos de que no aparezca en los resultados de búsqueda, pero que siga apareciendo en el pie de página?

[littleviolette]

¡Gracias por el pie de página increíble! He tenido problemas para mostrar el logotipo de TikTok de Font Awesome. He probado añadiendo fab-tiktok, fa-tiktok, fas-tiktok y tiktok a la configuración de los iconos SVG, pero ninguno de ellos muestra el logotipo de TikTok.

¡Gracias por tu ayuda!

[bekircem]

Quiero cambiar el límite de 25 caracteres para el título. Voy a colocar el título con CSS. ¿Cuál es la forma más fácil de hacerlo?

[keegan (Keegan George)]

@bekircem
Superar el límite de caracteres puede romper algunas cosas, pero puedes probar lo siguiente:

.custom-footer .first-box .heading {
   visibility: hidden;
}

.custom-footer .first-box .heading::after {
   content: "Esto es algo que es más largo de 25 caracteres";
   visibility: visible;
   display: block;
}

Sin embargo, usar visibility: hidden mantendrá los espacios en blanco. Dependiendo del tamaño de tu título, puedes probar esto en su lugar:

.custom-footer .first-box .heading {
   visibility: hidden;
   position: relative; 
}

.custom-footer .first-box .heading::after {
   content: "Esto es algo que es más largo de 25 caracteres";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}

[bekircem]

¿Es posible agregar texto a las secciones de enlace sin el atributo href?

[IAmGav (Gavin Perch)]

Solo agrega un # donde va la URL

[bekircem]

En este caso, todavía aparece como una URL clickeable. ¿Hay alguna manera de agregarla sin obtener la etiqueta a?

[Johani (Joe)]

@bekircem

¿Hay alguna forma de añadir sin obtener la etiqueta a?

Puedes añadir este CSS a tu tema en algún lugar

.custom-footer a[href="#"] {
  pointer-events: none;
}

[pfaffman (Jay Pfaffman)]

Envié esto:

Fix: add pluginId to modifyClass

Eso debería solucionar una depreciación con pluginId faltante. No lo probé , pero me parece correcto.

EDITAR: Pero no está nada bien.

[umbergerba (B.A. Umberger)]

FYI BUG >>> Si agrego lo siguiente… “Community, Tags List, /tags, self, List of all Tags”… se muestra una línea horizontal en el frontend. Si elimino el [espacio] entre “Tags List” y lo cambio a “TagsList”, la línea horizontal desaparece.

[mkschulze (M. Schulze)]

Hola, tengo dos problemas con los enlaces sociales y los iconos de Fontawesome.

1. Intento configurar otros iconos de Fontawesome 5 en el área social, pero no aparecen.
   Quiero <i></i>

2. Configuré el enlace de GitHub y ya muestra el icono en la página, aunque en realidad no agregué el icono en la lista de iconos svg.

EDITAR: lo resolví simplemente usando el nombre del icono “home”

[AquaL1te]

Al usar este componente temático en mi teléfono, el ancho no está configurado al ancho de la pantalla. El ancho se extiende, casi al tamaño de un monitor de escritorio.

Las pruebas se pueden realizar aquí: https://forum.tzm.community/

Asegúrate de abrirlo en un teléfono (o usa la opción de depuración en tu navegador, en Firefox puedes activar el error usando el perfil de Linux Galaxy Note 20).

[dax (Daniela)]

El componente ha sido corregido. Necesitas actualizarlo.