Easy Responsive Footer

[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)]

I pushed some fixes.

Key changes:

• the component now uses CSS variables, so it’s dark-mode compatible

• some fixes to media queries to fix the bug @mbauman reported

• added a setting that allows you to control whether or not the footer is displayed on login-required pages

  

Easy Footer v2.3 (#7)

@rolando

i have made my .wrap wider (1200px) with media queries so that after a certain resolution it makes the forum wider. if i enable the responsive footer it makes the .wrap narrower (1100px) but only the “board part” and not the .d-header .wrap nor the .footer which stay at (1200px). as soon as i disable the responsive footer everything looks wider (1200px) as intended.

The cause here is CSS specificity. Your CSS targets .wrap, and it works, but this component also has some CSS that targets #main-outlet and adds some properties to it to keep the footer at the bottom even on short pages.

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

The #main-outlet selector is more specific than your .wrap selector - because it’s id-based, so it overrides your styles.

You can fix this by adding this CSS

#main {
  #main-outlet {
    width: 1200px; // or whatever width you want to use
  }
}

@Edward_Legaspi

Hi. Is there a way to limit the number of footer columns to 3?

Sure, remove all the extra columns that you don’t need in the settings, and you’ll get three columns.

@PoojaPatel

After update getting error in chrome console that as below.

I cannot reproduce this issue, but the error implies that your settings are incorrect. Can you double-check and make sure that you’ve followed the instructions under each setting? If your problem persists, can you share a link to the site you see the issue on?

---

I did a bit of cleaning up and deleted the replies for bugs that will be fixed once you update the component. If your issue persists, feel free to post about it again.

[dadberg (Interstellar)]

I wonder if the header text (This is a header) within [Easy Footer Theme Component by Joe] can be replaced with logo.

I’ve tried exporting the component to alter hbs files, but I’ve failed, I think I need some hints.

Any insight is much appreciated

[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)]

Solved!

My belief in in the open source echo system is initially empowered by great people like you.

[Jcava5 (John)]

There should be an option to customize the colors of the background and text with CSS. By default, it doesn’t match the header.

Otherwise it works great! Thanks!

[huynhthai824 (Sora &\)]

hello Joe, can weadd more widget same here

[b481]

This has resulted in the logo appearing in the blurb:before of search results, even after I specified this in the component

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

Is there any way to make sure it doesn’t appear in search results, but still appears in the footer?

[littleviolette]

Thank you for the awesome footer! I have been having issue showing the Tiktok logo from Font Awesome. I have tried adding fab-tiktok, fa-tiktok, fas-tiktok, tiktok to the svg icons setting, but none of them renders the tiktok logo.

Thank you for your help!

[bekircem]

I want to change the 25 character limit for the title. I will place the title with CSS. What is the easiest way to do this?

[keegan (Keegan George)]

@bekircem
Going beyond the character limit may break some things, but you can try:

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

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
}

Doing visibility: hidden, however, will still keep the white-space. However, depending on how large your title will be you can try doing this instead:

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

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}

[bekircem]

Is that possible to add texts to link sections without href attribute?

[IAmGav (Gavin Perch)]

Just add an # where the url goes

[bekircem]

In this case it still appears as a clickable url. Is there a way to add without getting the a tag?

[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.