Air Theme

Please tell me how to crop the background image like this, with symmetrically rounded corners.

Now the code looks like this:

html .background-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: url(https://site/uploads/default/original/2X/2/26d48362654a9e03c716eeaff4a176cbbd01d6b8.png);
    background-size: cover;
  
}
1 Like

You are going to want to edit the clip path properties. You can learn more about that on sites like css tricks.

2 Likes

When I use the theme here at Meta, the icons in front of Quote, Edit, Copy Quote, and Ask AI are invisible.
image

1 Like

Hmm, what color scheme are you using? The bg for that isnt what the theme uses.

WCAG Light definitely has the problem, but I changed to ā€œtheme defaultā€
image
and it was still the same. I did refresh to check that the color scheme was saved so I hope it is not affected by my problem with changing color schemes. The blue in the background was lighter after I changed to the default color scheme.

2 Likes

I see the same issue with the default Color Scheme (I did not switch the scheme before).

Oddly, the background and the icon use the same --primary-low-mid color, and I canā€™t see any recent changes around that. :thinking:

2 Likes

Ok thanks for the report, I found the issue and it has been fixed.

1 Like

Hey guys. Iā€™m using the Air Theme and would like to show the latest posts to the users on the homepage of the forum but Air Theme only shows the categories and there is also no latest activity post shown (like in the default theme).

How can I make it show both, the categories and the latest posts (right below the categories) on the homepage of mobile devices?

Hello everyone, is it possible to show how many people viewed the topics?

It may not be the cleanest way to do it, but add these lines in Desktop css

.topic-list-data.num.views {
  display: unset;
}
td.topic-list-data.num.views {
  display: flex;
  order: 4;
  justify-content: center;
  align-items: center;
}
1 Like

Hi all, I just updated to the Air Theme. Love it by the way.

But I used to have a background image on the login screen using discourse-trendy-login but now I am using the Air Theme I canā€™t get the background image to show up. How do I change this? Thanks in advance.

Can you share a link to your site?

I think this should work for you:

.background-container {
    display: none;
}

Please report back here if it does not.

1 Like

Hi Jordan,

I am experiencing an interesting effect with setting a Banner with image. It is stretching the image making it scroll horizontally.

While a onebox seems to respect the with.

The below shows the top bar of the banner scrolled to the right centering the cleaning sed and edit

I have tried different image sizes. In the topic user for the banner post displays fine. This also seems to affect YouTube boxes pulled at least using the RSS plugin. Have not tested with regular YouTube onebox.

How can I fix this? And is there a way with CSS to increase height of the visible banner?

Several people have asked about showing the subcategories in Categories page. This is about the Modern Category + Group Boxes component, but since it doesnā€™t have a topic of its own (right?) Iā€™ll share my findings here:

This works:

/* Displays subcategories */
.custom-category-boxes:not(.above-discovery-categories-outlet) .subcategories {
  display: inline-flex;
  flex-flow: wrap;
}

.custom-category-boxes:not(.above-discovery-categories-outlet) .subcategory {
  display: inline-flex;
  align-items: baseline;
  margin-right: .3em;
}

/* Removes the category images from the list */
.custom-category-boxes:not(.above-discovery-categories-outlet) .subcategories .subcategory .subcategory-image-placeholder {
  display: none;
}

Also, if you have many subcategories, perhaps you want to show one category per row.

/* One category per row */
.custom-category-boxes:not(.above-discovery-categories-outlet) {
  grid-template-columns: 1fr;
}

The result looks like this:

I think the boxes have a height limit but I havenā€™t found the way to remove it. We donā€™t have enough subcategories yet to see the problem on desktop, but we are hitting the limit on mobile:

Any ideas to solve this problem?

2 Likes

I have error responsive with this them by chrome and edge browser, with firefox is OK.
How can i fix it.
Tks you

Is there anyway to keep avatars at topic list on desktop in circle format? I checked on mobile it is in circle, but why square in desktop.

1 Like

Hi on my Air Theme the desktop avatars are circle as per mobile.

Do you have maybe a component that is changing the avatar to Square?

Edit according to Op post looks like should be squareā€¦

No, I donā€™t. Iā€™m using Discourse default theme and Air theme. Discourse default is using circle format. If you look at another board images above, all of them are square.

And the avatars doesnā€™t look smooth.

1 Like

Might be able to use this theme-component to correct it.

2 Likes

Exactly what I need to use. Thanks so much!

1 Like