diff --git a/README.md b/README.md index 09cbacf9..db0148be 100644 --- a/README.md +++ b/README.md @@ -1,64 +1,69 @@ - - -A clean & modern theme with a handful of theme-components included to enhance your forum! - - +A clean & modern theme with a couple of theme components included to enhance your forum! **Light Mode** -![image](https://user-images.githubusercontent.com/5862206/214545439-85410d82-9565-4e00-8b23-b2d69a0ee1eb.png) +![light mode](screenshots/light.webp) **Dark Mode** -![image](https://user-images.githubusercontent.com/5862206/214545506-f44d6165-4f79-416e-a89c-548482d04cea.png) +![dark mode](screenshots/dark.webp) **Categories Page** -![image](https://user-images.githubusercontent.com/5862206/214545568-76d38925-55a6-4359-b1c6-bf1010706132.png) - -This theme includes a handful of components to enhance your forum as well. +![categories page](images/categories-page.webp) -- Dark Light Scheme Toggle -- Clickable Topics -- Discourse Loading Slider -- Discourse Search Banner -- Modern Category + Group Boxes +This theme includes a couple of theme components to enhance your forum, as well: -> :exclamation: 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. +- [Clickable Topics](https://meta.discourse.org/t/clickable-topic/183339) +- [Modern Category + Group Boxes](https://github.com/discourse/discourse-minimal-category-boxes) --- -# Tips +## Theme configuration -### Dark Light Scheme Toggle +> :exclamation: Please follow theme configuration tips upon installation, as there are a couple of settings that **NEED TO BE ENABLED** for this to theme to render properly. -![image](https://user-images.githubusercontent.com/5862206/214545622-af847fa5-b4ae-4308-9fe2-ddd66eb62cc8.png) +### Dark Light Mode 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. +![toggle dark light mode](images/toggle-dark-light-mode.webp) -![image](https://user-images.githubusercontent.com/5862206/214545647-e0544474-b6bf-4b9c-8c64-6a8bfa6ba83a.png) +The mode toggle (image above) will be shown at the bottom of sidebar, once at least 2 color palette choices are enabled on the **Color palettes** admin page (`/admin/config/colors`). At least two colors need to have `Color palette 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. +![color palettes](images/color-palettes.webp) -![image](https://user-images.githubusercontent.com/5862206/214545707-170a6b88-8ccd-4d31-af59-f0834a4fad3c.png) +Once this is done, users should be able to choose between two color palettes as their `light` and `dark` preferences in their user preferences interface page (`/my/preferences/interface`): ---- +![user interface preferences](images/user-interface-preferences.webp) -## Discourse Search Banner +### Edit Theme -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. +Go to **Admin > Themes & components** (`/admin/config/customize/themes`) page to edit Air theme. -![image](https://user-images.githubusercontent.com/5862206/214545774-ed8f1322-9a95-4958-bba0-adf7ff6dea3f.png) +- in **Dark color palette** dropdown select `air-dark` ---- + ![theme dark color palette](/images/theme-dark-color-palette.webp) + +## Welcome Banner + +Go to **Admin > Welcome banner** (`/admin/config/welcome-banner`) page. + +- in **Enabled on themes...** dropdown select `Air Theme` + + ![welcome banner themes](images/welcome-banner-enable.webp) + +- in **Location** dropdown select `Below site header` + + ![welcome banner location setting](images/welcome-banner-location-setting.webp) ## 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. +Go to **Admin > Interface & layout** (`/admin/config/interface`) page. + +- in **Desktop category page style** dropdown select `Boxes with Subcategories` -![image](https://user-images.githubusercontent.com/5862206/214545903-c4bd61b9-1893-48e0-84e7-502efc26c46d.png) + ![desktop category page style](images/desktop-category-page-style.webp) -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.** +This theme component allows the forum admin to organize their category page with header titles, and choose which categories appear under each header. To keep things simple, up to 5 headings are allowed to be used. **If no categories + heading settings are chosen, all categories will render as they do above, this is the default rendering option.** --- diff --git a/about.json b/about.json index c74f3681..ba0ec18e 100644 --- a/about.json +++ b/about.json @@ -1,11 +1,11 @@ { "name": "Air Theme", + "authors": "Discourse", "about_url": "https://meta.discourse.org/t/discourse-air-theme/197703", "license_url": "https://github.com/discourse/discourse-air/blob/main/LICENSE", "components": [ - "https://github.com/jordanvidrine/discourse-category-group-boxes.git", - "https://github.com/discourse/discourse-clickable-topic.git", - "https://github.com/discourse/discourse-search-banner.git" + "https://github.com/discourse/discourse-minimal-category-boxes.git", + "https://github.com/discourse/discourse-clickable-topic.git" ], "modifiers": { "serialize_topic_excerpts": true @@ -39,5 +39,5 @@ "hover": "535353" } }, - "screenshots": ["screenshots/light.png", "screenshots/dark.png"] + "screenshots": ["screenshots/light.webp", "screenshots/dark.webp"] } diff --git a/images/categories-page.webp b/images/categories-page.webp new file mode 100644 index 00000000..536b80f2 Binary files /dev/null and b/images/categories-page.webp differ diff --git a/images/color-palettes.webp b/images/color-palettes.webp new file mode 100644 index 00000000..2c88e2bf Binary files /dev/null and b/images/color-palettes.webp differ diff --git a/images/desktop-category-page-style.webp b/images/desktop-category-page-style.webp new file mode 100644 index 00000000..4a2a7142 Binary files /dev/null and b/images/desktop-category-page-style.webp differ diff --git a/images/theme-dark-color-palette.webp b/images/theme-dark-color-palette.webp new file mode 100644 index 00000000..93ef7235 Binary files /dev/null and b/images/theme-dark-color-palette.webp differ diff --git a/images/toggle-dark-light-mode.webp b/images/toggle-dark-light-mode.webp new file mode 100644 index 00000000..4e775ac6 Binary files /dev/null and b/images/toggle-dark-light-mode.webp differ diff --git a/images/user-interface-preferences.webp b/images/user-interface-preferences.webp new file mode 100644 index 00000000..51071caa Binary files /dev/null and b/images/user-interface-preferences.webp differ diff --git a/images/welcome-banner-enable.webp b/images/welcome-banner-enable.webp new file mode 100644 index 00000000..f6d0a3ff Binary files /dev/null and b/images/welcome-banner-enable.webp differ diff --git a/images/welcome-banner-location-setting.webp b/images/welcome-banner-location-setting.webp new file mode 100644 index 00000000..63c536fd Binary files /dev/null and b/images/welcome-banner-location-setting.webp differ diff --git a/locales/en.yml b/locales/en.yml index fcebf456..e9120fb4 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -1,3 +1,3 @@ en: theme_metadata: - description: "A clean and modern theme for Discourse" + description: "A clean and modern theme for Discourse." diff --git a/screenshots/dark.png b/screenshots/dark.png deleted file mode 100644 index 4460bdc7..00000000 Binary files a/screenshots/dark.png and /dev/null differ diff --git a/screenshots/dark.webp b/screenshots/dark.webp new file mode 100644 index 00000000..b2d36c5a Binary files /dev/null and b/screenshots/dark.webp differ diff --git a/screenshots/light.png b/screenshots/light.png deleted file mode 100644 index da43520d..00000000 Binary files a/screenshots/light.png and /dev/null differ diff --git a/screenshots/light.webp b/screenshots/light.webp new file mode 100644 index 00000000..1005e0e5 Binary files /dev/null and b/screenshots/light.webp differ