ミントテーマ

テーマ
,
1
:discourse2: Summary Mint - A modern theme with a hint of mint. :slight_smile:
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-mint-theme
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme

Features

A modern theme with a hint of mint. :slight_smile:

:herb: :ice_cube:

Homepage (categories)

Screenshot 2021-09-06 at 19.48.04
Screenshot 2021-09-06 at 19.48.041920×859 49.1 KB

Screenshot 2021-09-06 at 19.48.43
Screenshot 2021-09-06 at 19.48.431920×913 79.2 KB

Latest

Screenshot 2021-09-07 at 17.08.01
Screenshot 2021-09-07 at 17.08.011920×951 55 KB

Topic

Screenshot 2021-09-07 at 17.22.56
Screenshot 2021-09-07 at 17.22.561920×1400 120 KB

Advanced Search

Screenshot 2021-09-07 at 17.22.11
Screenshot 2021-09-07 at 17.22.111920×1421 127 KB

This theme includes following components:

Tips

Discourse Settings

Following setting changes are required for this theme to render properly:

  • top menu needs to be set to category, latest, new, unread, top
  • desktop category page style needs to be set to Boxes with Subcategories

Discourse Search Banner

In the options for the discourse-search-banner theme component, following changes are required for this theme to render properly:

  • show-on options needs to be set to homepage
  • plugin-outlet options needs to be set to above-main-container [1]
  • background image can be set as per your requirement

Discourse Showcased Categories

In the options for the Showcased Categories theme component, following changes are required for this theme to render properly:

  • select the feed one category and feed two category as per your requirement
  • fill in the feed one title and feed two title as per your requirement
  • recommended value for max list length is 3.

Let me know how this theme can be further improved. Enjoy! :smiley:


:discourse2: Hosted by us? Themes are available to use on our Standard, Business, and Enterprise plans.

  1. As of Oct. 4th 2022 and this commit, the theme itself will automatically set and order the theme components into the correct outlets. ↩︎

Last edited by @JammyDodger 2024-06-17T20:58:09Z

Check documentPerform check on document:
「いいね！」 65
2

really nice theme :slight_smile:

I might even test it out with royal blue (my favourite colour) on my test site.

Thank you :smiley:

「いいね！」 5
3

@meghna churning out the amazing themes. Looks great. I will deploy and play.

「いいね！」 5
4

Beautiful theme! Thank you for creating this :slight_smile:

I was wondering if it was a way for me to remove the square and circle in the background? Appreciate anything that can point me in the right direction :pray:

「いいね！」 3
5

remove

#main-outlet:after  {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  width: 500px;
  height: 500px;
  border-radius: 2000px;
  background: $color-blue;
  right: 1px;
  top: -57px;
}

#main-outlet:before {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  width: 300px;
  height: 300px;
  border-radius: 30px;
  background: -webkit-linear-gradient(146deg, rgba(74,247,255,.08) 55%, rgba(143,236,202,.52) 100%);
  // background: linear-gradient(146deg, rgba(74,247,255,.08) 55%, rgba(143,236,202,.52) 100%);
  background: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
  left: 70px;
  top: 350px;
  transform: rotate(74deg);
  transform-origin: 0 100%;
}

from desktop.scss and you should be good to go :slight_smile:

「いいね！」 6
6

Thank you so much Tomasz, appreciate it :smiley:

「いいね！」 2
7

This theme is awesome. Thank you for making this! I’m new to the Discourse scene. I know how to upload this theme, but I’m not sure how to change certain things. What I want to change are the colors of the blocks in the back (the circle and square). Additionally, I would like to change the background color. Do I download the theme file and edit it there, then create my own theme? Or is there an easier way?

「いいね！」 2
8

Thanks! :slight_smile:

Yes. To change the colors you need to fork the theme and update the color code as per your requirement. Here’s how you can do it:

In variables.scss change the color code as per your liking:


$color-blue: #e5f8ff;
$color-square-gradient: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
$color-square-webkit-gradient: -webkit-linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);

To change the background color update the secondary color in about.json (note that this will also change text color of some buttons):

"secondary": "F6FBFC"
9

I love this theme - it fits our project’s branding perfectly! However, if I turn on dark mode, the theme is messed up. Is this to be expected? Is there a way to prevent users from turning on dark mode?

「いいね！」 1
10

フロントエンドからCSSを編集できると、デフォルトのテーマのようにさらに便利になります。

image
image215×148 1.77 KB

12

コンポーザーに2つの小さな問題があります。:slightly_smiling_face: 歯車ボタンの背景が常に表示されており、最初のボタンのホバー時の形状がフレームの湾曲と一致していません。

image
image990×124 22.3 KB

「いいね！」 1
14

以下の方法で両方の問題を修正しました。

「いいね！」 2
15

テーマがとても気に入ったのでインストールしました。
検索バナーの背景が角丸ではなく、全幅になっていません。
これをあなたのレイアウトに変更するにはどうすればよいですか？

16

他のテーマやコンポーネントがミントテーマのスタイリングに干渉している可能性があります。インストールした他のテーマ/コンポーネントを無効にしてみてください。

17

Defaultテーマが無効化されたクリーンインストールで、以下のコンポーネントのみが含まれています。

  • discourse-search-banner
  • Showcased Categories
18

それは奇妙ですね。DiscourseインスタンスのURLをプライベートメッセージで送っていただけますか？確認します。

「いいね！」 1
19

バナーの問題は、以下のコミットで修正されました。

また、Patrickさんが指摘してくれた、showcased categories プラグインの問題もありました。それも修正しました。

「いいね！」 3
20

デバイスのダークモードと、素敵なミントテーマでプレイしていました。ダークモードをサポートするためにいくつかの変更を加えました。テスト用です。

изображение
изображение1389×1541 255 KB

discourse-mint.zip (5.1 KB) もちろん間違いが含まれている可能性があります :slight_smile: このため、github から PR を作成しません。

コードブロック、GitLab スタイルのフォーマット、ワイドページなどのいくつかの変更を加えました…モバイルデバイスはテストしていません。

「いいね！」 1
21

イヴァンさん、ご尽力いただきありがとうございます！作業内容を確認しましたが、コアに含める必要のないカスタム変更がいくつかありました。ダークモード固有の変更については、さらにテストを行った後、コアに含めるかどうか検討します。

「いいね！」 1
22

どういたしまして、Meghna！いくつか要素に revert 値を適用すれば十分だと思います。

「いいね！」 1