Air Theme

[HisFocus (Tim)]

I think the Air Theme is so nice, however, the option to edit (or add) CSS is not there when I visit ADMIN > CUSTOMIZE > Air Theme. Am I missing something? https://www.communiteq.com/ is hosting my site. This is what I see:

[Moin]

You have to add your own component

Discourse Air Theme

Go here admin/customize/themes Click on components Click Install Click create new & give it a name Click on the new component in the components list Click Edit Html/css Add the linked code above to the common css file. Add this new component to the currently used theme

[HisFocus (Tim)]

@Moin! I’m brand new to Discourse, but WOW! This just keeps getting better and better! Thank you so much!

Also, please accept my apologies, as I see that when reading through this thread, this question has been asked and answered about 5,000 times.

[Arkshine]

No need to apologize. It may not be commonly known that you can do that!

Here’s a guide if you want to explore the theme/components:

Beginner's guide to using Discourse Themes

This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

[ElComputer]

Thank you for the theme. I would like to use adobe fonts. do i have to edit the theme file? or what is the smartest way to do that?

I have also seen the header logo is kinda small and the ri%ght hand side search bar can and login can look more like a button than icon… is that a plugin/compontent or css

[Heliosurge (Dan DeMontmorency)]

I believe you can create a new theme-component and override the fonts

This computer bent maybe able to be modified or you might find fonts in google fonts to your liking

.Google Fonts

The header you can target and adjust with CSS I believe

Maybe not quite what your looking for. But maybe of interest.

Brand Header

Summary Brand Header adds an extra top header for branding with your logo, navigation links, and social icons for both mobile and desktop views. Brand logo can be a image or text. Preview Preview on theme-creator.discourse.org Repository Link https://github.com/discourse/discourse-brand-header New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Desktop preview: [disc…

[Clo]

Hi all

Thanks for such a great theme!
I’m just struggling with something. I’ve noticed on mobile that some of the Profile Preferences tabs don’t have a solid background, causing it to look a bit strange. See image below for reference:

The error page on mobile version does the same thing. They’re all fine on desktop/tablet view, but mobile version seems to have different CSS?

Does anyone perhaps know how/where I can change this? I don’t have any coding background, so would I need to get a developer to do this for me?

[Clo]

Here is an example of what it looks like on tablet/mobile and also what most of the other tabs look like:

[Moin]

Welcome to Meta!

@Clo

I don’t have any coding background, so would I need to get a developer to do this for me

I don’t think so. This is an official theme so it is maintained by the Discourse team. But even other themes which are shared here are often fixed by the maintainer when you report a problem.

I can reproduce your problem here. It looks even worse than your screenshot because the message preview is wider than my screen.

[Gonerdot]

Does anyone know how to hide td-class?

[Arkshine]

You can try this CSS:

.topic-list {
    .topic-list-header .posts,
    .topic-list-body .posts {
        display: none !important;   
    }
}

[Gonerdot]

Yes, I tried to hide them this way. regular divs are hidden, but it doesn’t work with td. I tried several options:

.td.num.posts... {
        display: none;
}

.td:num.posts... {
        display: none;
}

[Arkshine]

I tested my CSS, and it works for me. Did you test it?

@Gonerdot

I tried to hide them this way

It misses the !important for this theme.

[Gonerdot]

Thank’s @chapoi

.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts,
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age,
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posters {
	display: none;
	
}

[Gonerdot]

There is some empty space at the top. Is there any way to remove it? I can’t find anything using the element inspector.

---

And I would like to increase the width of the block with the topic content

@jordan-vidrine

[Steven]

@Gonerdot

There is some empty space at the top. Is there any way to remove it? I can’t find anything using the element inspector.

There’s a margin-top in the main-outlet class

You should add this:

html body #main-outlet {
  margin-top: 0;
}

@Gonerdot

And I would like to increase the width of the block with the topic content

I’ve never used this yet, but there is a topic-width settings in the css, in a root element.

Add this, it should adapt everything else:

:root {
  --topic-body-width: 750px;
}

[Gonerdot]

@Steven

You should add this:

html body #main-outlet {
  margin-top: 0;
}

This is something not right

[Gonerdot]

@Steven

Add this, it should adapt everything else:

:root {
  --topic-body-width: 750px;
}

At the same time it looks normal. Thank you

.container.posts {
    grid-template-columns: 90% 10%;
}

[jordan-vidrine]

Thanks for sharing! Will take a look at this soon.

[jordan-vidrine]

@Clo

Preferences tabs don’t have a solid background, causing it to look a bit strange. See image below for reference:

@Clo

Here is an example of what it looks like on tablet/mobile and also what most of the other tabs look like:

@Moin

I can reproduce your problem here. It looks even worse than your screenshot because the message preview is wider than my screen.

This has been fixed in the latest merging of a PR