Tema de aire

[Discourse]

	Summary	Air Theme is a clean & modern theme with a handful of theme components included to enhance your forum!
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-air
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme

As this is an official theme maintained by the Discourse team, support issues, bug reports, ux suggestions, and requests for dev advice can be made in the respective categories here on Meta, and tagged with the appropriate theme tag. Click on a link below to get one started.

 Support  Bug  UX  Dev

Features

Light Mode

Dark Mode

Categories Page

This theme includes a handful of components to enhance your forum as well.

• Dark Light Scheme Toggle
• Clickable Topics
• Discourse Search Banner
• Modern Category + Group Boxes

Please read through these tips upon installation, as there are a couple of settings that NEED TO BE ENABLED for this to theme to render properly.

---

Tips

Dark Light Scheme Toggle

For this to work properly, at least 2 color scheme choices need to be enabled in your https://discourse.jordanvidrine.com/admin/customize/colors area. At least two colors need to have color scheme can be selected by users enabled.

Once this is done, users should be able to choose between two color schemes as their light and dark preferences in their user preferences interface menu.

---

Discourse Search Banner

In the options for the discourse-search-banner theme component, the plugin-outlet options needs to be set to BELOW-SITE-HEADER for this theme to render properly.

---

Modern Category + Group Boxes

This theme component requires your categories to use the CATEGORY BOXES WITH SUBCATEGORIES setting in your /admin/site_settings/category/all_results?filter=categories area.

This theme component also allows the forum admin to organize their category page with header titles, and choose which categories appear under each header. To keep things simple, I have only allowed up to 5 headings to be used. If no categories + heading settings are chosen, all categories will render as they do above, this is the default rendering option.

Hosted by us? Themes are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-17T20:44:16Z

Check document

Perform check on document:

[Don]

That is just amazing Jordan! I love it!

[th21]

It will be helpful if the welcome message can be hide when left locale field empty

[oshyan (Oshyan Greene)]

Oh wow, this looks really nice! Thank you for the share.

[itsbhanusharma (Bhanu Sharma)]

This theme gives discourse the modern look it deserves. Very well done @jordan.vidrine

[Ahmed_Gagan]

Theme looks amazing. Awesome work

[thegurjyot (Gurjyot Singh)]

This theme looks so amazing. Hope we can get this category page design as a separate component as well. It is looking way better this way.

[frold]

Thanks it is nice…

First time I install a new theme. I really like this one!!

Studmed.dk

[Jeremie_Leroy]

Hi @jordan-vidrine regarding the # of views column, what kind of code shall i add in the component to override that column being hidden ?

[jordan.vidrine]

I believe this should work:

.full-width .contents .topic-list thead th.posts {
width: 10%;
}

.full-width .contents .topic-list thead th.activity {
width: 10%;
order: 4;
}

th.num.views {
width: 10%;
order: 3;
display: block;
}

.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.posts {
width: 10%;
order: 2;
}

.topic-list .views {
width: 10%;
order: 3;
}

.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.age {
width: 10%;
order: 4;
}

[ggurbet (Gökhan Gurbetoğlu)]

Refreshingly beautiful. Great work @jordan.vidrine!

[ShubhayanS (shubhayan saha)]

¿Existe alguna posibilidad de cambiar el texto del encabezado “Bienvenido al foro”?

[jordan.vidrine]

Sí, esto se puede editar en el componente Discourse Search Banner

[Jerdeman (Jeroen)]

Hace un tiempo publiqué un problema sobre no ver las categorías en una vista móvil (Air Theme - #172). Hablé un poco con @jordan.vidrine, pero no pudimos llegar a la raíz del problema. Espero que alguien más tenga algunas ideas.

Para los detalles
Usando una instalación limpia de Discourse 2.7.11 en kubernetes con la ayuda de un gráfico de Helm de Bitnami, y la última versión del tema instalada y configurada como se menciona en la publicación inicial, no vemos ninguna categoría en la vista móvil y el estilo está desajustado en la página más reciente.

Lo que intentamos
Además de usar una instalación limpia, intentamos usar también algunas versiones anteriores del tema. Sin embargo, el problema persistió, pero no probamos exhaustivamente todas las versiones.
También comparamos el HTML de nuestra instancia con el de discourse.jordanvidrine.com , y notamos que es significativamente diferente.

Intuición
Como no podemos usar una versión ‘beta’, mi intuición me dice que esto es un problema de compatibilidad entre el tema o uno de sus complementos y Discourse 2.7. Me encantaría saber si alguien tiene este tema funcionando en 2.7, y si es así, con qué versiones del tema y complementos relevantes.

Pregunta
¿Alguien ha conseguido que este tema funcione con 2.7 y/o hay alguna pista sobre lo que podríamos hacer para que funcione?

[Hyeonji_Kim]

Hola. Primero, gracias por este gran tema

Quiero cambiar la fuente, ¿cómo puedo hacerlo?

Intenté esto

• Descargar este tema Google Fonts y cambiar la configuración de fuente en CONFIGURACIÓN DEL SITIO – No funciona

• Añadir código @import{enlace de fuente web ~~~ } en Desktop.css, mobile.css – No funciona

¿Qué archivo debería modificar para cambiar la fuente?

[jordan.vidrine]

Creo que deberías poder establecer una fuente personalizada sin un componente aquí: admin/site_settings/category/all_results?filter=font

Si deseas más personalización, creo que el componente temático de Google Fonts que enlazaste funcionaría. Sin embargo, creo que el tema utiliza theme-settings y no una configuración del sitio.

¿Has planteado este problema en el tema de ese componente de fuentes?

[hequaye (Henry Herbert)]

Hola a todos, ¿alguien puede ayudarme a cambiar el tamaño y la “naturaleza fija” del color de fondo en el móvil?

El CSS para el móvil es transparente de mi lado. Y solo necesito un poco de orientación sobre cómo cambiar el fondo fijo para los colores de fondo.

Si no me equivoco, hay un fondo de encabezado y un fondo de página, ¿correcto?

[jordan.vidrine]

Esto se debe a que el tema y sus componentes incluidos son bastante exigentes con la forma en que se configura el sitio.

En el OP compartí que:

@jordan-vidrine

Cajas de Categorías y Grupos Modernos

Este componente temático requiere que tus categorías utilicen la configuración CAJAS DE CATEGORÍAS CON SUBCATEGORÍAS en tu área /admin/site_settings/category/all_results?filter=categories.

Este componente temático también permite al administrador del foro organizar su página de categorías con títulos de encabezado y elegir qué categorías aparecen debajo de cada encabezado. Para simplificar, solo he permitido hasta 5 encabezados. Si no se eligen categorías + configuraciones de encabezado, todas las categorías se renderizarán como lo hacen arriba, esta es la opción de renderizado predeterminada.

[Nerd_Alert]

¿Hay alguna forma de hacer que el fondo sea una imagen? Preferiría tener una imagen en lugar de colores. Usar

body {
    background-image: url("url de la imagen aquí");
    background-color: #cccccc;
}

hace que la parte superior del color sea la imagen, pero no la inferior.

[jordan.vidrine]

Lo que hiciste está bien para añadir la imagen, pero también querrás eliminar la ruta de recorte que se crea para dar ese efecto de superposición.

html .background-container {
clip-path: unset;
}