CSS para aumentar la altura del logo y encabezado en vista de escritorio

Desde el escritorio de mi PC, a través del inspector en Firefox, la etiqueta CSS que manipula la altura del logo es:

.d-header .title {
  --d-logo-height: 4em;
}

Sin embargo, noto que cuando introduzco esta etiqueta CSS en el tema predeterminado en el editor CSS bajo “escritorio”, no hace nada a la altura del logo tal como se ve en mi PC ni en mi teléfono móvil.
Sin embargo, si introduzco el mismo código CSS bajo “móvil”, cambia la altura del logo no solo en mi PC sino también en mi teléfono móvil. ¿Es esto un error en Discourse o me estoy perdiendo algo?

1 me gusta

Hola,

Por si acaso, ¿dónde pusiste este CSS?

2 Me gusta

Siempre es una buena práctica intentar plantear una solicitud de ayuda un poco mejor. Mucha gente aquí está súper dispuesta a ayudar, pero hay tantas maneras de hacer las cosas que una buena explicación es crucial para obtener ayuda lo antes posible :slight_smile:

Además, si estás probando cosas localmente, no olvides añadir ?mobile_view=1 a la URL.

3 Me gusta

Desde el escritorio de mi PC, a través del inspector en Firefox, la etiqueta CSS que manipula la altura del logo es:

.d-header .title {
  --d-logo-height: 4em;
}

Sin embargo, noto que cuando introduzco esta etiqueta CSS en el tema predeterminado en el editor CSS bajo “escritorio”, no hace nada a la altura del logo tal como se ve en mi PC de escritorio ni en mi teléfono móvil.
Sin embargo, si introduzco el mismo código CSS bajo “móvil”, cambia la altura del logo no solo en mi PC de escritorio sino también en el teléfono móvil. ¿Es esto un error en Discourse o me estoy perdiendo algo?

No puedo reproducir esto:

Cambia correctamente el móvil y no afecta al escritorio.

Si añado este CSS en el editor, funciona como se espera para el escritorio:

Y para móvil, solo necesitas establecer la altura del logo, no de la cabecera:

Espero que esto ayude.

1 me gusta

Gracias, me conecté a otra máquina, una que ejecuta Ubuntu 22.04 (servidor web), el código CSS en el bucket CSS de escritorio se renderizó correctamente, así que tal vez sea un problema del navegador en mi otra PC de escritorio con Windows 7.

Noté que parece que estoy limitado en el bucket CSS móvil a:

.d-header #site-logo {
  height: 3em;
}

Cualquier intento de ir más allá de 3em no aumenta la altura del logo en mi teléfono móvil, GS23, incluso después de actualizar la caché.

¿Alguna idea?

Sí, intenta eliminar max-width del logo, eso debería liberarlo de cualquier restricción.

1 me gusta

Gracias por tu aporte. No pude encontrar esa opción en la configuración. ¿Se hace a través de CSS o de una entrada de línea de comandos en Rails y, en ese caso, cómo se vería?

Eso sería CSS, así:\ncss\n.d-header #site-logo {\n max-width: unset;\n}\n\nSi eso falla, añade !important.

3 Me gusta

Gracias por tu ayuda:

Para aquellos que vengan después de mí y quieran aumentar el tamaño de su logo tanto en la vista de escritorio como en la móvil.

  1. Personalizar → Temas → Predeterminado → Editar CSS/HTML

a) Publicar en el bloque de Escritorio:

.d-header {
  height: 5em;
}
.d-header #site-logo {
  height: 5em;
}

b) Publicar en el bloque de Móvil:

.d-header #site-logo {
  max-width: unset;
}
.d-header #site-logo {
  height: 4em;
}
2 Me gusta

Esas podrían ser una regla:

.d-header #site-logo {
  max-width: unset;
  height: 4em;
}

Creo que también podrías compactar el primer conjunto de reglas, pero no recuerdo cómo de memoria.

2 Me gusta

Una cosa más que sería útil añadir es cómo reducir el relleno, para mover el logo a la izquierda en la vista móvil. ¿Qué opinas?

.wrap {
  padding-left: 0;
}

En este punto, podría ser una buena idea seguir un curso introductorio de CSS porque:

Puede leer más sobre el desarrollo de sus propios temas en la categoría dev.

2 Me gusta

Gracias Charlie, lo aprecio.
Estoy familiarizado con el uso del inspector, por ejemplo, en Firefox, y he derivado algunas soluciones.

¿Alguna idea de por qué el redimensionamiento del logotipo no forma parte de la funcionalidad principal de Discourse? La marca de cualquier sitio web es fundamental y la falta de granularidad a este respecto es sorprendente.

1 me gusta

La “manipulación del logo” es perfectamente posible, al igual que todos los demás tipos de estilo, dentro de temas y componentes de temas.
Solo necesitarás aprender los conceptos básicos de html/css/js y revisar la gran cantidad de documentación en meta para hacer las cosas tú mismo, o buscar a alguien a quien puedas contratar para que realice los cambios deseados.
Este último se puede hacer en la categoría del mercado.
Dado que tu pregunta original ha sido respondida, creo que podemos cerrar este tema ahora.
Te deseo el mayor de los éxitos con tu foro.

3 Me gusta

Personalmente, no esperaría que el tamaño del logotipo de una empresa sea parte de la funcionalidad principal de una plataforma de foros. Además, nuestro software es de código abierto y proporcionamos dicho soporte para ayudarte a lograr esto, como lo hicimos anteriormente. También ofrecemos mucha información sobre cómo desarrollar tus propias personalizaciones.

3 Me gusta

Hola Charlie,

Con “Manipulación del logo” me refería a la capacidad de cambiar el tamaño del logo dentro de la interfaz de usuario.

Gracias por tu ayuda.

Este tema se cerró automáticamente 30 días después de la última respuesta. Ya no se permiten nuevas respuestas.