Totalmente Temático

Lo que me sorprendió fue que la primera vez que lo intenté después de seleccionar el tema “Fully” en Meta, el tema try.discourse.org se mostró con el tema Fully. Supongo que es un problema de caché relacionado con que los sitios estén en el mismo dominio.

¿El problema al que te refieres es que el logo de Discourse no está siendo reemplazado por el logo pequeño cuando se pulsa el menú de hamburguesa en try.discourse.org?

Hmm – El panel de navegación en el sitio try.discourse.org incluye un div adicional con enlaces de menú (.try-header-nav-wrapper) que está rompiendo el diseño de la página (solo en ese sitio) al empujar el encabezado muy a la derecha cuando el menú lateral está oculto, así que ahora veo que no es un error en el tema Fully.

1 me gusta

¡Buenos días!

Realmente disfruto usando este tema para mi foro, pero he notado que, al igual que el tema predeterminado, no hay una opción para personalizar el CSS/HTML. Me gustaría agregar un fondo de pantalla al tema. ¿Es posible hacerlo?

1 me gusta

Podrías hacer esto usando el menú de personalización de temas / componentes temáticos para crear un nuevo componente temático y agregarlo a este tema.

En tu componente temático puedes agregar el código personalizado para agregar tu fondo.

Hola @jordan.vidrine,

Gracias por tu respuesta. Creo que vi esto en algún lugar cuando busqué “cambiar fondo”, pero asumí que solo era posible personalizando el CSS/HTML del tema.

¡Lo intentaré!

1 me gusta

¡Hola, chicos! ¡Me encanta este tema! Sin embargo, al previsualizarlo en mi sitio, tuve un problema con el encabezado de la navegación de la barra lateral. ¿Podría el encabezado tener un color diferente (el color normal del encabezado del sitio)?

Esto:

image

En lugar de esto:

image

¿Cómo puedo hacer eso? Al cambiar el CSS, toda la navegación se puso verde.
¡Gracias!

1 me gusta

Quieres cambiar la variable específica para —sidebar-color) y eso cambiará la barra lateral y encima de la barra lateral.

Hmmm, ¿no hay forma de cambiar solo el encabezado de la barra lateral?

Tengo el mismo problema, con el logo de mi encabezado cayendo sobre dos colores diferentes, lo que se ve raro.

Pensé que editar CSS en temas estaba desaconsejado hoy en día. La opción de editor CSS se ha eliminado para temas remotos, así que, ¿cómo cambiaríamos esa variable? Eso también asume que queremos que el color de la barra lateral sea el mismo que el del encabezado.

Hola, puedes cambiar esa sección por separado de la barra lateral con CSS.

Para ello, necesitas crear un nuevo componente o añadirlo a uno existente. :slightly_smiling_face:

  1. Ve a /admin/customize/themes/
    Personalizar → Temas

  2. Haz clic en la pestaña Componentes y luego en el botón Instalar Install

  3. En la ventana emergente, haz clic en el botón Crear nuevo Create new y escribe el nombre del nuevo componente.

  4. Haz clic en el botón Crear Create.

  5. El componente se ha creado. Ahora selecciona el tema completo para activarlo.

  6. Haz clic en el botón Editar CSS/HTML Edit CSS/HTML.

  7. Pega el siguiente código en la sección CSS.

  8. No olvides guardarlo con el botón Guardar Save en la parte inferior.

.desktop-view .has-sidebar-page .d-header-wrap::before {
  background: transparent;
  border-right: none;
}

Si quieres mantener el borde derecho, elimina esa línea del código.

6 Me gusta

Gracias por eso, Don. Sin embargo, nunca antes había modificado el CSS de Discourse… ¿dónde hago este cambio?

2 Me gusta

He actualizado la publicación anterior. :slight_smile:

5 Me gusta

Gracias. Acabo de hacerlo y todo vuelve a verse bien :smiley:

2 Me gusta

Dado que el tema es ahora, queda muy poco espacio en el borde derecho para hacer esto. Creo que sería interesante tener más espacio allí y usarlo para widgets.

1 me gusta

Dejé que mis usuarios tuvieran acceso al tema y rápidamente encontraron algo extraño sucediendo :roll_eyes:

Uso el componente temático Custom Header Links y con el otro tema que uso (Material Design), a medida que reduces el ancho de la ventana del navegador, cuando llegas al punto en que los enlaces sobrescriben el logo del sitio, el logo se encoge, volviéndose eventualmente muy pequeño, por ejemplo:

image

Con Fully, el logo no se encoge, por lo que eventualmente obtienes esto…

image

Custom Header Links elimina los enlaces y muestra el título del tema al ver un tema. El título del tema también sobrescribe el logo en anchos de navegador más estrechos, aunque eventualmente el logo se elimina por completo, lo que resuelve el problema.

No estoy seguro si este es un problema de Fully o de Custom Header Links, pero empiezo aquí ya que CHL funciona bien en el otro tema.

1 me gusta

Parece que tiene un pequeño conflicto con discourse-full-width-component y logotipos más anchos.

Puedes solucionarlo rápidamente con :arrow_down_small:

Pega esto en el componente creado anteriormente después del código anterior para que esté en un solo lugar.

Encogerá el logo.

.desktop-view .d-header .title a {
  flex: auto;
}

Actualización: Hmm, creo que probablemente se encoja demasiado con la barra lateral oculta… :thinking: Le eché un vistazo rápido y creo que tendrá que ver con la cuadrícula. Pero creo que es mejor esperar la forma oficial de hacer esto porque no quiero romper la experiencia de usuario del encabezado cambiando la cuadrícula.

@packman, por favor, elimina este código.

3 Me gusta

¡Gracias de nuevo! Estás haciendo obras maravillosas hoy :slight_smile:

3 Me gusta

Hola, Don! Otro problema: cambiarlo de esta manera hace que se vea igual en modo oscuro. ¿Cómo puedo cambiar el CSS solo para un esquema de color específico?

1 me gusta

El logo se vuelve muy pequeño en una ventana estrecha, pero eso también sucede con los Enlaces de Encabezado Personalizados cuando se usan con el Tema de Diseño de Materiales.

Estuve mirando el CSS anteriormente y creo que podría no estar ayudando que el logo esté incluido dentro de span.header-sidebar-toggle, aunque tal vez sea el único lugar sensato para él en una pantalla más ancha.

1 me gusta

Hola @Renato_Mendes :wave:

Oh, ya veo, así que solo quieres usar el fondo transparente en un esquema de color. No lo sabía.

Hay varias formas de hacerlo :arrow_down_small:

  1. dark-light-choose(): Es posible hacerlo con esto pero no es muy práctico en este caso ya que crea variables. Es mejor usarlo para colores.

  1. schemeType: Este es mejor para este caso de uso si quieres usarlo por tipo de esquema.
Usar schemeType

Así es como se usa schemeType

Elimina el código anterior del componente que creaste y coloca el nuevo en la sección Definiciones de color del componente, como ves en la imagen.

Esto solo activará el código en el esquema claro.

Común / Definiciones de color

@if #{schemeType()} == light {
  .desktop-view {
    .has-sidebar-page {
      .d-header-wrap {
        &:before {
          background: transparent;
          border-right: none;
        }
      }
    }
  }
}

  1. Targetable Color Schemes : Si tienes más esquemas de color y/o quieres apuntar a un esquema de color específico donde quieras cambiar cosas, entonces este componente de tema es ideal para ti.
Usar esquemas de color dirigibles

Este componente pone el esquema de color real en el html para que puedas apuntarlo con CSS.

Así es como se usa:

Instala el componente.
Verifica el id del esquema de color donde quieres cambiar cosas.
Puedes encontrarlo aquí

o

/admin/customize/colors
Página de colores. Aquí, si haces clic en un esquema de color, el id se agregará a la URL.

Ahora puedes usar esto en el código. No olvides eliminar el código agregado previamente.

html[color-scheme="your-color-scheme-id"] {
  &.desktop-view {
    .has-sidebar-page {
      .d-header-wrap {
        &:before {
          background: transparent;
          border-right: none;
        }
      }
    }
  }
}

Hola @packman :wave: Te envié un mensaje privado.

2 Me gusta