Here is my CSS changes to improve the Mobile View.
I absolutely love this theme, but noticed some little minor odd bits, so I also added the following CSS to make it look a little nicer in my perspective. I hope this helps someone else with the same preferences.
Here is the Original (Unedited)
Note the following in the picture above:
The number 1 which represents the Replies is to far to the left.
The topic bubble is slightly overlapping the blue background.
There is no padding between all the content and the blue background.
The blue background does not look nice in the category page. I love it on the home page though.
Here is the CSS code I added in the Mobile tab.
/* Add some padding to the Category, Sub-Category, Tags, searc, latest, new topic, and notification area*/
.list-controls {
padding: 5px;
}
/* Adds some padding to the Topics area */
div#list-area {
padding: 6px;
}
/* Aligns the Replies number more to the right */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
float: right;
}
Updated (After adding the CSS)
If you too, prefer to remove the blue background, here is the code to only remove it from the category pages.
/* Removes the blue background for category only */
html .category .background-container {
background: #fff;
clip-path: none;
}
On mobile, there is a Category dropdown. When clicked and either Latest, Unread, or Top is selected, you cant select Categories from the dropdown again.
1.Before
2.When the dropdown menu is clicked
3.After you click
4. Dropdown menu (missing Categories)
At this point, a user is unable to select the dropdown and choose Categories again.
I am having an issue with featured topics component not showing the cards. I would like to also have the option to have it only show featured topics within specified categories. Which in theory it should or even in the variants based on the official one.
Just cross posting this here. Thought Chat plugin had a conflict issue with Discourse Search Banner. But after trying a preview of just the Banner. Ir seems to be an issue related to Air Theme background.
Just wondering if you have had a chance to evaluate the Chat plugin issue? as described above? My apologies as imagine your quite busy. I thought it was a conflict with Search Banner but it seems to be the Air Theme background. The chat plugin seems to be creating a white central column that overlays over the blue background.
using Air theme. When Chat plugin disabled it displays no issues. After chat enabled as above.
EDiT: Was mistaken. Re confirmed it is actually a conflict/issue with Air theme background see blue is cut out/off. See posts below with chat off Blue background is displayed properly with Discourse search banner overlayed properly in white on blue.
You can see in this ss the Chat plugin icon is gone from the header. You can also see tge other effects that the chat plugin is sermingly doing to the background creating a white empty rectangle ignoring the blue background.
Now looking at it might it be interfering with Air Thene’s blue wallpaper? as text is white in the banner. So I might be on the wrong track with the Discourse Search banner. It might be a conflict with part of the Air theme… ??
Taking a further look in the Air Theme the blue part of the background is blocked in that center column when scrolling the blue is just on the outer edges. When chat disabled the blue part of the background connects from left to right through the center.
It seems your Search Banner plugin outlet is on the default above-main-container? I think you need to change this to place the Search Banner out from the #main-outlet
However the theme has a chat custom style when enabled on the #main-outlet which I think only need to be active on chat pages.
This is adding the background with !important to the #main-outlet which override the theme background transparency on #main-outlet etc…
I think this is would be better with restrict this to .has-full-page-chat so only appears on chat pages?
Okay that fixes the primary display. What would be the code to fix the chat? As it still has the white column under the search banner header on the categories as per your last screen shot.
I’m adding “category logo” Images to some, but not all, of my categories.
expected behavior: When I add a logo image to a category, the size of the label remains the same as those of other categories.
observed behavior: When I add a logo image to a category, the square is comparatively larger than the squares in the labels of categories without logo images. Beyond not lining up with categories in the same column, rows with categories with logo images are taller than rows with categories without logo images.
Thanks for the confirmation. CSS makes my skin crawl. It’s my kryptonite. I’ve never been less productive then when working on getting margins to look right using CSS.
I hear you still learning. But imagine the author or a team member might help with a css code fix.
Just discovered light/dark toggle. Eorks well. save if you refresh the page it seems discourse will display the light thene logo instead. I suspect that is duue to discourse not detecting the web browser not being in dark mode.
