How to edit WELCOME text in AIR Theme

Product Support

AI-generated summary

A user asks how to edit the “WELCOME TO OUR COMMUNITY” text in the Air theme, noting it doesn’t appear in the Site Texts section. Arkshine explains the text is part of the Search Banner component, accessible via Admin → Components, where it can be translated. noid then asks if font size and color can be changed, and Arkshine replies that CSS can be added to customize styling, providing an example for modifying the title and description.

1

Hello, I am very new to a self hosted discourse so might be missing something obvious. How do I edit WELCOME TO OUR COMMUNITY text in Air theme? If I go to site texts section and type this text to bring a string, it does not bring a such string but similar texts. Thanks!

Screenshot 2025-02-26 at 15.04.46
Screenshot 2025-02-26 at 15.04.461920Ă—1082 100 KB

2

Hey, welcome noid!

This text is part of a Search Banner theme component included by default with the Air Theme.

Go to: Admin → Components
Search for “search banner”, and you can see below the settings the translation you’re looking for:

The image displays a webpage interface for "discourse-search-banner," showcasing components that can be customized within a theme. (Captioned by AI)
The image displays a webpage interface for "discourse-search-banner," showcasing components that can be customized within a theme. (Captioned by AI)848Ă—277 24.3 KB

The image shows a web page template with a translation dropdown menu set to English (US), a placeholder text "search_banner.headline" and a larger text area containing the phrase "Welcome to our community." (Captioned by AI)
The image shows a web page template with a translation dropdown menu set to English (US), a placeholder text "search_banner.headline" and a larger text area containing the phrase "Welcome to our community." (Captioned by AI)657Ă—187 4.42 KB

3

Awesome! Thank you very much, that worked well changing the wording. But would it possible to change a font size or even color?

4

It’s possible. There is no setting, but you can add some CSS in your theme or another new theme component:
For example:

.search-banner .custom-search-banner-wrap {
  h1 {
     /* CSS for the title */
     font-size: var(--font-up-6);
     color: aliceblue;  
  }

  p {
     /* CSS for the description */
  }
}