Estoy configurando mi sitio y tratando de agregar una imagen a la sección superior del encabezado.
Las instrucciones en ‘Configuración > Branding’ dicen:
Utiliza una imagen rectangular ancha con una altura de 120 y una relación de aspecto superior a 3:1
Así que estoy usando una imagen PNG de 120px x 2000px, y esperaba que se posicionara a la izquierda y llenara completamente el contenedor del encabezado, ¡pero no lo hace! ¿Qué he hecho mal?
Por tu captura de pantalla, parece que la imagen está correctamente colocada a la izquierda. El encabezado de Discourse se muestra dentro de un div wrap cuyo ancho está restringido. Esa es la razón por la que el logotipo no aparece completamente a la izquierda de la pantalla.
Las instrucciones indican que debes subir una imagen con una altura de 120 px, pero cuando esa imagen se muestra en Discourse, su altura se reduce a aproximadamente 31 px. Esto significa que el ancho de la imagen que subiste se divide por 4 al mostrarse en tu sitio. Por lo que veo, el logotipo en tu captura de pantalla mide aproximadamente 660 px, así que creo que se está mostrando correctamente.
Si tienes un logotipo más estrecho disponible, sería bueno probarlo y ver cómo queda.
Gracias, Simon. Me gustaría que el logotipo llenara completamente la cabecera, ¿es posible?
Incluso con un ancho de imagen reducido, sigue limitado a una altura de 31 px y no se ve bien.
En teoría es posible ocupar la mayor parte de la cabecera, pero probablemente requiera algo de prueba y error para lograrlo correctamente. Es posible que tengas que ajustar el CSS de tu sitio para hacerlo. Si te interesa, consulta la Guía para principiantes sobre el uso de temas de Discourse y la Guía para desarrolladores sobre temas de Discourse.
Al revisar nuestras instrucciones para la configuración logo, creo que deberíamos proporcionar una relación de aspecto óptima. El logotipo en tu captura tiene una relación de aspecto superior a 3:1, pero me parece demasiado ancho. Si observas el logotipo utilizado en el foro Meta de Discourse, verás que se muestra con aproximadamente 150 x 40 píxeles. Esa parece ser la relación de aspecto ideal para mí, ligeramente inferior a 4:1.
Para lograr tu efecto, es posible que quieras usar algo de CSS.
Ejemplo:
.d-header .contents {
background: linear-gradient(to bottom, rgba(36,66,183,0) 0%,rgba(36,66,183,1) 40%,rgba(36,66,183,1) 60%,rgba(36,66,183,0) 100%);
}
Creo que no has entendido mi objetivo. No se trata del efecto, sino de rellenar el cuadro del encabezado con una imagen, que actualmente está limitada a una altura de 31 px.
¿Puedes enlazar tu imagen aquí?
Entiendo tu problema entonces. Sin embargo, si lograr lo que quieres con una imagen es difícil, ¿por qué no subir el logotipo sin el degradado y añadirlo mediante CSS? A mí me parece más fácil y directo. 
Pero quizás tu imagen final no se pueda lograr con CSS.
Sí, correcto.
Acabo de encontrar este foro que parece lograr lo que quiero.
Siguiendo buscando, he encontrado el CSS que han utilizado, pero soy nuevo aquí y aún estoy tratando de entender cómo agregar CSS para hacer esos cambios.
En su sitio de ejemplo, utilizan 2 imágenes.
Un logotipo con fondo transparente y una imagen de fondo en d.header:
.d-header {
background: url("https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg") center center;
}
Sí, parece que esa es la vía a seguir 
Ahora solo necesito entender cómo agregar ese CSS.
Estoy utilizando el tema ‘Sombras de azul’.
Estoy siguiendo las guías de Discourse, pero tal vez necesito leer un poco más.
Para agregar CSS, creo que la mejor manera es crear un nuevo componente de tema, para evitar que tus modificaciones se sobrescriban si actualizas tu tema actual.
Ve a tu panel de administración → personalizar → temas → componentes → instalar → Crear nuevo
¡Gracias! He podido seguir tu tutorial anterior y estoy casi allí. Me has ayudado a entender un poco más cómo funcionan las cosas en Discourse. Voy a dedicar un tiempo esta noche para aprender un poco más.
Gracias de nuevo por tu ayuda.
Con referencia al encabezado de talksurf;
Puedo ver de dónde proviene la imagen de fondo, pero no la imagen de ‘talksurf’ a la izquierda, que flota por encima de la imagen de fondo.
Al agregar ‘talksurf’ como una imagen en Configuración > Marca > logotipo, el resultado es una imagen mucho más pequeña, ya que Discourse la reduce desde una altura original de 120 px hasta solo 31 px. Talksurf mide mucho más de 31 px de alto.
El logotipo de Talksurf es un logotipo estándar, subido en la sección de marca del panel de administración.
Subí exactamente el mismo logotipo y obtuve un logotipo de 40 px de altura sin ninguna personalización:
Así que no entiendo cómo podría medir 31 px en tu foro. ¿Tienes un enlace para que pueda revisar el HTML y el CSS?
Además, así es como puedes averiguar cómo personalizaron su encabezado:
Gracias por tu ayuda. La URL es https://yas-cfr.discourse.group/ y, como puedes ver, usando el mismo logotipo que tú, obtengo una altura de 35 px, que es diferente a la tuya (40 px).
El tamaño de la imagen de talksurf es de 322 x 63 px.
Necesitas eliminar esta regla de CSS que tienes:
.d-header #site-logo {
max-height: 35px !important;
}
Quizás esté escrito en tu tema, por lo que necesitarás sobrescribirlo.
Ten en cuenta que, como la regla utiliza !important, también tendrás que añadirlo en tu propia regla:
.d-header #site-logo {
max-height: none !important;
}
¡Sí, eso es!
He realizado el cambio y ahora mide 40px, lo que me dará mucho más margen para crear un encabezado más artístico.
¡Muchas gracias por tu ayuda (otra vez!)
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
