Radiant, un tema elegante para Discourse

Este tema tiene como objetivo ser minimalista y, al mismo tiempo, tener un atractivo moderno. Todo el estilo se implementa mediante CSS y no se ha utilizado ninguna imagen.

:rainbow: :dizzy: :rocket:

Página de inicio:

Página de tema:

Búsqueda en toda la página:

Modal:

Hágamelo saber cómo se puede mejorar aún más este tema. ¡Disfruten! :smiley:

31 Me gusta

¡Diseño muy bonito!

¿Hay alguna forma de personalizar las formas y colores del fondo? También sería útil poder personalizar el “resplandor” del cuerpo principal sobre el fondo.

3 Me gusta

Hola,

¡Trabajo increíble :heart:! Este tema se ve bastante genial :heart_eyes:
Tengo una sugerencia sobre esquinas redondeadas uniformes y sombras. Me refiero a las ventanas emergentes, el menú, los campos de entrada, etc. Quedaría increíble con el nuevo deslizador de carga :heart_eyes:

2 Me gusta

No, el fondo se crea mediante gradientes lineales de CSS y añadir la capacidad de personalizarlo aumentaría la complejidad para los administradores del foro.

Si lo deseas, puedes bifurcar el tema para personalizarlo aún más según tus necesidades.

Buen punto. Lo añadiré a mi lista de mejoras. :+1:

6 Me gusta

He mejorado el tema para que los campos de entrada de formularios, el menú de encabezado y los modales sean coherentes con el estilo del tema. He actualizado el primer mensaje con las capturas de pantalla más recientes. :slight_smile:

5 Me gusta

Tema precioso. Podría usarlo pronto. Gracias, buen trabajo.

2 Me gusta

Hola, el tema es muy bueno. ¿Hay alguna forma de reducir ese espacio en la parte superior (ver flecha)?

2 Me gusta

He reducido el margin-top predeterminado a 30px, mediante:

Si lo deseas, puedes bifurcar el tema y personalizarlo aún más según tus necesidades. :slight_smile:

3 Me gusta

personalmente creo que el margen más pequeño hace que el degradado sea demasiado evidente. :confused:

¿Podrías orientarme en la dirección correcta para implementarlo como fondo? https://codepen.io/chris22smith/pen/RZogMa

1 me gusta

Me encanta este tema, de hecho lo recomendaría en el foro al que pertenezco. Solo quería preguntarte algunas cosas.

No soy alguien que usa Discourse para crear foros; soy usuario de estos foros, así que es posible que algunas preguntas suenen extrañas o demasiado obvias, pero nunca he usado Discourse para construir nada.

¿Tienen previsto crear una versión de modo oscuro de este tema? Personalmente tengo activada la opción «Forzar modo oscuro para contenido web» en Edge. También existe para Chrome. Y por lo general ayuda; estos son algunos de los resultados que obtuve al activarla.

En general, se ve bien con esa opción activada, pero hay algunos elementos que parecen fuera de lugar sin razón aparente, y me encantaría verlos adaptados o corregidos para el modo oscuro, si es posible :)

No sería necesario modificar todo para crear una versión específica de modo oscuro; mientras se corrijan las diferencias de color extrañas en las páginas de perfil, funcionaría bastante bien con la opción activada.

4 Me gusta

Aún no, pero lo revisaré. Tendré que usar un esquema de colores diferente, sin embargo.

¡Gracias por las sugerencias! Las revisaré y haré los cambios si no afectan la versión de luz predeterminada (original). :slight_smile:

5 Me gusta

Acabo de configurar un Discourse y tenía muchas ganas de personalizarlo. Me alegra mucho haber encontrado tu tema: es fresco, colorido y encantador. ¡Gracias!

– ben

6 Me gusta

Tema realmente agradable, pero últimamente parece que este tema es incompatible con Discourse. La barra lateral está completamente aplastada.

`

3 Me gusta

¡Buena observación! Ya corregido a través de:

3 Me gusta

Gracias, se ve genial y el problema está solucionado

2 Me gusta

Hola

Desde la última actualización, parece que todo el contenido está “atascado” en ambos lados. Es como si faltara el relleno/margen derecho e izquierdo.

¿Es esto intencional? En las imágenes de vista previa del tema no es así. ¿Cómo puedo solucionarlo?

Muchas gracias.

2 Me gusta

Esto ahora está arreglado:

Gracias por informar de este problema :+1:

3 Me gusta

¡Confirmo que está arreglado!

Fue increíblemente rápido, muchas gracias.

Un tema increíble, por cierto :slight_smile:

3 Me gusta

¿Puedes ayudarme a entender cómo cambiar el color de la barra de acento azul en la parte superior?

Veo que en desktop.scss esto está definido:

#main-outlet {
  border-top: 8px solid $tertiary;
}

Donde $tertiary, supongo, proviene de las variables definidas por el SCSS principal de Discourse, y debería extraerse de la paleta de colores seleccionada por el usuario.

Puedo ver en devtools que la barra está configurada en #3977ff, que puedes ver como la barra azul en la captura de pantalla a continuación. Pero en mi paleta de colores, tengo un color amarillo configurado para el “terciario” y no tengo un color #3977ff definido en ningún lugar.

Entonces, ¿qué está pasando aquí y cómo puedo establecer el color?

1 me gusta

¡Oh! Veo que tertiary está definido en about.json:

  "color_schemes": {
    "radiant": {
      "primary": "000000",
      "tertiary": "3977FF",
      "header_primary": "4d4d4d"
    }
  },

Así que supongo que aquí es donde está obteniendo el valor del color. Pero, ¿por qué estaría extrayendo de aquí si no tengo seleccionada la combinación de colores “radiant”?