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?

Hola,

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

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.

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.

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.

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.

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;
}

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.

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.

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.

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.

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.

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.