Gran Encabezado - Pequeño Encabezado

[tshenry (Taylor)]

Este componente del tema proporcionará una cabecera fija con un logotipo grande cuando se esté en la parte superior de la página. A medida que se hace scroll hacia abajo, aparecerá la barra de cabecera normal de Discourse. Esto permite mostrar de forma limpia un logotipo grande de la web en la parte superior de la página.

En dispositivos móviles, la barra de cabecera solo se mostrará cuando el teléfono esté en orientación vertical. El espacio vertical suele ser bastante limitado en orientación horizontal, por lo que esto mantendrá el contenido más abierto. Para ver de nuevo la cabecera, puedes hacer scroll hasta la parte superior de la página o rotar el teléfono de nuevo a orientación vertical.

La mejor manera de ver lo que hace este componente del tema es probarlo, lo cual puedes hacer visitando:

'Big Header - Little Header' by @tshenry

Aquí está mi intento de un pequeño GIF mostrándolo en acción (recomiendo encarecidamente hacer clic en el enlace anterior para una mejor ilustración )

Configuraciones:

Actualmente hay tres configuraciones que deberían ser bastante autoexplicativas:

Instalación:

IMPORTANTE: Debes estar ejecutando Discourse Versión 2.0.0.beta4 o posterior para que este tema funcione.

Consulta este tema para obtener instrucciones sobre cómo instalar el componente del tema:

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

Enlace de importación:

https://github.com/tshenry/discourse-big-header-little-header.git

Sobre:

La propuesta original de esto provino de @ryanerwin en Marketplace. Él pidió que generalizara lo que había creado para él y lo compartiera con el resto de la comunidad. Por lo tanto, este tema está muy inspirado y es presentado por él

Notas:

Dado que a los usuarios les encanta personalizar sus cabeceras y el área general cerca de la parte superior de la página, puede ser necesario realizar algunos ajustes adicionales para manejar conflictos con otras personalizaciones. He probado que esto funciona en un tema limpio de Discourse, pero prepárate para ajustarlo dependiendo de cuántas otras personalizaciones hayas realizado. Sería ideal realizar la mayor parte de las modificaciones a esto como un componente de tema hijo separado, de modo que no pierdas el rastro de tus cambios si/ cuando el tema se actualice.

Problemas conocidos:

Dado que esto añade relleno al div#main-outlet, la línea de tiempo de los temas puede verse afectada dependiendo del tamaño de tu logotipo. Hay formas codificadas de manejarlo, pero eso no es ideal. Probablemente publicaré un mensaje en Dev para detallar todo lo que he intentado y ver si alguien tiene ideas sobre cómo compensar el relleno adicional.

Repositorio:

GitHub - tshenry/discourse-big-header-little-header

Como siempre, siéntete libre de publicar si tienes alguna pregunta, problema o sugerencia. Mi tiempo está un poco limitado en este momento, pero trataré de abordar todo lo más rápido posible

[ryanerwin]

Awesome work on this @tshenry.

For anyone who wants to use a BIG LOGO at the top of their Discourse site, particularly if their logo is not rectangular, this is a great theme plugin!

[featheredtoast (Jeff Wong)]

Oh dang, that’s a pretty rad component you’ve got there, thanks for sharing back with us!

Any chance of an animated sample, just so those interested in something similar can git the gist of how it feels? (Or better yet, link to a live sample you can share on theme creator so they can play with it themselves!)

[tshenry (Taylor)]

No problem!

I will most definitely add a sample to theme creator. Thanks for the reminder! I need to update my other themes with the links to their demos on there as well. I’ll try to get a GIF in the post as well.

Edit: I’ve added both an animated image and a demo link to the topic post

[robmc (Robert McIntosh)]

I believe that recent logo changes may have broken this component - if you look at the theme creator version it is not working

[tshenry (Taylor)]

Yep, very broken! I’ll get that fixed up ASAP.

[tshenry (Taylor)]

Ok, it should be fixed now

If anyone reading this notices issues after updating the component, please report them!

[YTPMania_Forums (david)]

There’s just a slight dead zone under the little header where you can’t interact with certain things. Highlighting text, entering a topic, interacting with the timeline. I’m sorry, I don’t really know how to describe my problem, but you can reproduce it by just having text or the timeline below the little header. Try to highlight the text, or interact with the timeline.

Does anybody have any suggestions to fix this? It’s not a super huge problem in general, but it does make the Table of Contents theme component wonky to work with. I’m not sure if this is something to tell you or them.

I love this component, by the way @tshenry.

[tshenry (Taylor)]

Thanks for reporting! This should be fixed once you update the component. Let me know if you ever find any other issues.

[YTPMania_Forums (david)]

My goodness, that was quick! Works fantastic, thank you so much!

[Ashley_N_Moses]

I have installed this theme, but my logo is not showing up. It was before I installed this theme.

Is there a solution for this? Thanks!

[tshenry (Taylor)]

I’ve been meaning to take a look at this component and make sure everything is still working as expected. I’ll take a look either today or tomorrow and let you know.

Edit: I tested it out and all seems to be working correctly. Make sure you add the large logo image to the theme setting. I have a few improvements in mind for this component, but I’m not sure when I’ll get to them.

[Denis_Heraud]

@tshenry ¿Por qué cambió el color de fondo de mi encabezado del color que configuré en mi tema a blanco al activar “Big Header - Little Header”? ¿Necesito sobrescribirlo? Siento que el plugin debería respetar el esquema de colores que ya tengo configurado en mi tema.

[tshenry (Taylor)]

Parece que lo había configurado para usar la variable de color $secondary, definida en el esquema de colores de tu sitio. En retrospectiva, debería haber usado $header_background, ya que eso permitiría a un usuario cambiarlo fácilmente a través de su esquema de colores. Cambiado mediante:

Use header-background color variable

[Denis_Heraud]

@tshenry Funciona para mí con el logotipo “Pequeño” (¡gracias!), pero no con el “Grande”, sigue siendo blanco.

[tshenry (Taylor)]

Ah sí, el encabezado “Big” siempre estuvo pensado para integrarse con el fondo del sitio. Si quieres cambiar eso, te sugiero que busques alguna forma de agregar un fondo mediante CSS. Puedo revisar la posibilidad de añadir un interruptor cuando refactorice este componente, pero me temo que eso no ocurrirá hasta dentro de un buen rato.

[Denis_Heraud]

Sí, pude anularlo con:

.d-header { background-color: #000 !important; }

[Denis_Heraud]

Otro problema que estoy encontrando es que he usado CSS personalizado para especificar una altura mayor para mi encabezado con un logotipo más grande que el predeterminado de Discourse.

Siento que sería útil si pudiéramos establecer una altura para el logotipo grande y otra para el logotipo pequeño en la configuración de su plugin, para que podamos lograr el aspecto que buscamos.

De lo contrario, ¿cómo podría establecer la altura del encabezado “Pequeño”?

[tshenry (Taylor)]

Intentaré hacer las cosas un poco más flexibles a través de la configuración la próxima vez que trabaje en esto, pero hasta entonces, tendrás que experimentar con el CSS y demás para encontrar la mejor solución que se adapte a tus otras personalizaciones.

[Denis_Heraud]

¡Gracias! Tu plugin ha sido desactivado temporalmente porque en /admin no podía hacer clic en los enlaces de navegación de la parte superior (Panel de control, Configuración, Usuarios, etc.). No puedo determinar si se trata de una interacción con mi CSS, pero lo investigaré.

ACTUALIZACIÓN: Efectivamente, era mi CSS. Cometí un error en algún lugar; no tenía nada que ver con tu plugin.