Pie de página fácil y responsivo

[Discourse]

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

Instalar este componente del tema

Dado que este es un #componente_de_tema_oficial mantenido por el equipo de Discourse, las solicitudes de #soporte, Contribute > Bug, Contribute > UX y Contribute > Feature pueden realizarse en las categorías correspondientes aquí en Meta, etiquetadas con la etiqueta adecuada del componente del tema. Haz clic en un enlace a continuación para iniciar uno.

 Soporte  Error  UX  Función

Características

Escritorio

Móvil

Configuración

Nombre	Descripción
heading	Texto para el encabezado en el pie de página; puedes usar, por ejemplo, el nombre de tu sitio. Longitud máxima: 25 caracteres
blurb	Ingresa un breve texto sobre tu comunidad. Longitud máxima: 180 caracteres
sections	Secciones que se mostrarán en el pie de página
small links	Enlaces pequeños en la parte inferior del pie de página, como Términos de servicio y Privacidad
social links	Enlaces sociales que deseas agregar al pie de página
show footer on login required page	Marca esta configuración si deseas que el pie de página se muestre en la página que requiere inicio de sesión (solo aplica si tu sitio es privado)
svg icons	Lista de iconos de FontAwesome 7 utilizados en la configuración de enlaces sociales anterior.

Este componente tiene seis configuraciones que facilitan su configuración.

1. Encabezado

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

2. Texto breve

Un breve texto sobre tu comunidad. Longitud máxima: 180 caracteres

3. Secciones de enlaces

Agrega 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 cursor sobre el elemento.

4. Enlaces

Agrega enlaces a las secciones de enlaces. Un elemento por línea en este orden:
Padre, texto, URL, destino, título
Es recomendable mantener un número similar de enlaces bajo cada sección
Padre: el nombre de la sección padre bajo la cual se muestra este enlace. Usa el valor text de la lista anterior
Texto: el texto que se muestra para este enlace
URL: la ruta a la que apunta este elemento. También puedes usar rutas relativas.
Destino: elige si este elemento se abrirá en una nueva pestaña o en la misma. Usa blank para abrir el enlace en una nueva pestaña, o self para abrirlo en la misma pestaña.
Título: el texto que se muestra al pasar el cursor sobre el enlace.

5. Enlaces pequeños

Puedes agregar 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

Ingresa los enlaces sociales que deseas agregar al pie de página en este formato:
proveedor, título, URL, destino
Proveedor: el nombre del proveedor, como Facebook o Twitter
Título: el texto que se muestra al pasar el cursor sobre el enlace
URL: la ruta que deseas que tenga 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. He dejado los elementos de marcador de posición como valores predeterminados para el componente, para que puedas ver fácilmente cómo deben verse tus configuraciones.

2. Este componente utilizará el esquema de colores de tu tema para generar los colores empleados en sus elementos. Sin embargo, todos los elementos tienen clases únicas asignadas en caso de que desees sobrescribir algo.

3. Dado que este componente utiliza configuraciones del tema, significa que podré actualizarlo en el futuro para corregirlo o mejorarlo, y los datos que ingreses no se perderán

¿Alojado por nosotros? Los componentes de tema están disponibles para usar 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.