¿Cómo mostrar la puerta más abajo en la publicación?

Desarrollador
1

¡Gracias por el gran componente! ¿Sería posible mostrar la puerta más abajo en la publicación? (Nuestros temas comienzan todos con una imagen y nos gustaría mostrar una buena parte de texto o incluso definir un lugar en el tema donde aparezca la puerta). ¡Cualquier indicación (por ejemplo, trucos de CSS) es bienvenida!

2 Me gusta
2

Sí, me preguntaba algo similar: tal vez una configuración de porcentaje que se pueda cambiar.

3

Actualmente, el contenido está oculto utilizando la siguiente técnica (entre otras):

  • Se deshabilita el desplazamiento
  • La altura del contenido de la página se establece en 100%

Podrías ajustar estas cosas. Por ejemplo:

body.topic-in-gated-category {
    height: 200%;
}

Esto permitirá un mayor desplazamiento:

Esto podría hacerse más bonito, quizás reduciendo el área azul a una altura menor (¼ o ⅓ de la pantalla), acortando también el degradado blanco…

También puedes modificar esto:

.topic-in-gated-category .post-stream {
    max-height: 150vh;
    overflow: hidden;
}

Elegir cuántas publicaciones mostrar con CSS es complicado porque están al mismo nivel que las acciones pequeñas, la brecha de tiempo, etc.
Por lo tanto, usar CSS como:

.post-stream > *:nth-child(n+6) {
    display: none;
}

No siempre mostrará el mismo número de publicaciones de un tema a otro.

4 Me gusta
4

Parece que esto será muy útil para nuestro foro. ¿Puede decirme dónde se debe agregar este código personalizado, por ejemplo, en la configuración del componente o en el CSS del tema?

Muchas gracias de antemano.

5

Hola Jaime,

El CSS de tu tema o un CSS de componente separado, ambas son opciones aceptables. Usar un componente permite adjuntarlo fácilmente a múltiples temas, esa sería la forma preferida.

1 me gusta
6

Gracias @Arkshine. Y después de investigar un poco más, creo que necesito clonar o bifurcar el repositorio de este componente y luego hacer mis ediciones directamente en el CSS común antes de importar la versión editada de nuevo en Discourse. ¿Es esto correcto?

1 me gusta
7

Si deseas cambiar algo de CSS, puedes crear un nuevo componente fácilmente a través de la interfaz de usuario.

  1. Ve a Administrador → Personalizar
  2. Haz clic en Instalar
  3. Luego elige Crear Nuevo. El tipo debe ser Componente.
    image
    image519×357 5.62 KB

¡Eso es todo! Adjúntalo a tu tema; luego, puedes Editar CSS/HTML.

Normalmente querrías bifurcar si deseas contribuir al componente original en Github (creando una Pull Request) o si deseas crear tu propia versión. Si haces eso, no recibirás ninguna actualización del componente original; ¡probablemente no es lo que quieres aquí!

1 me gusta
8

Gracias de nuevo. El problema, creo, es que la propiedad CSS de mi componente personalizado también estará en el componente base del repositorio en Github.

A menos que haya una forma de especificar que un componente anule al otro, parece necesario simplemente crear un clon del repositorio y usar mi versión editada (que está funcionando ahora, solo que no recibiré actualizaciones, como dices).

9

Si tu CSS no sobrescribe el componente original, puedes añadir !important en una regla. Esto debería funcionar.

.topic-in-gated-category .post-stream {
    max-height: 150vh !important;
    overflow: hidden !important;
}
1 me gusta
10

¡Funciona perfectamente, gracias de nuevo por la ayuda!

1 me gusta
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.