민트 테마

커스터마이징 테마
,
1
:discourse2: 요약 Mint - 민트의 느낌을 더한 모던한 테마입니다. :slight_smile:
:eyeglasses: 미리보기 Discourse Theme Creator에서 미리보기
:hammer_and_wrench: 저장소 링크 https://github.com/discourse/discourse-mint-theme
:open_book: Discourse 테마가 처음이신가요? Discourse 테마 사용 입문 가이드

이 테마 설치하기

기능

민트의 느낌을 더한 모던한 테마입니다. :slight_smile:

:herb: :ice_cube:

홈페이지 (카테고리)

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

최신

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

토픽

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

고급 검색

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

이 테마에는 다음 구성 요소가 포함되어 있습니다:

팁

Discourse 설정

이 테마가 올바르게 렌더링되려면 다음 설정 변경이 필요합니다:

  • top menu를 category, latest, new, unread, top으로 설정해야 합니다.
  • desktop category page style을 Boxes with Subcategories로 설정해야 합니다.

환영 배너

관리자 > 환영 배너 (/admin/config/welcome-banner) 페이지로 이동하세요.

  • 테마에서 활성화… 드롭다운에서 Mint Theme을 선택하세요.
  • 페이지 표시 드롭다운에서 홈페이지만을 선택하세요.
  • 위치 드롭다운에서 사이트 헤더 아래를 선택하세요.
  • 배경 이미지는 필요에 따라 설정할 수 있습니다.

Discourse Showcased Categories

Showcased Categories 테마 구성 요소의 옵션에서 이 테마가 올바르게 렌더링되려면 다음 변경이 필요합니다:

  • 필요에 따라 feed one category 및 feed two category를 선택하세요.
  • 필요에 따라 feed one title 및 feed two title을 채우세요.
  • max list length의 권장 값은 3입니다.

:discourse2: 우리가 호스팅하고 있나요? 테마는 Standard, Business, Enterprise 플랜에서 사용할 수 있습니다.

67개의 좋아요
Mint theme - How was this UI achieved?
How should I set up the same Mint theme section?
Our main screen looks very different with no top menu dropdowns, etc
Current Projects - September 2024
Mint theme - How was this UI achieved?
Deprecating the Search Banner theme component
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

It would also be great to be able to edit the CSS from the front-end, like with the default themes.

image
image215×148 1.77 KB

12

There are two small issues with the composer. :slightly_smiling_face: The gear button has an always-on background, and the first button’s on-hover shape doesn’t match the curvature of the frame:

image
image990×124 22.3 KB

1개의 좋아요
14

Fixed both the issues via:

https://github.com/discourse/discourse-mint-theme/commit/56157bbae8aeb0c809b2ec5f172597b18d423894

2개의 좋아요
15

I really like your theme and installed it.
My search banner background is not with rounded corners and full width.
How can I change this to your layout ?

16

There might be a possibility that another theme or component is interfering with the mint theme styling. Can you try disabling other themes/components that you may have installed?

17

it’s a clean install with inactieve Default theme and only these componets:

  • discourse-search-banner
  • Showcased Categories
18

That is odd. Can you PM me the URL of your Discourse instance and I can have a look?

1개의 좋아요
19

Banner issue is now fixed via:

https://github.com/discourse/discourse-mint-theme/commit/5e76e1ed3c248a6492e7fe77996ac98362a83a68

There was also an issue in showcased categories plugin that Patrick brought into my notice. Fixed that too.

https://github.com/discourse/discourse-showcased-categories/commit/ad42b5c615dab017a7d0d99927445929587f6d39

3개의 좋아요
20

Hi, I played with dark mode on device with nice Mint theme. I made some changes to support dark mode. Just for tests.

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

discourse-mint.zip (5.1 KB) It may contain mistakes of course :slight_smile: For this reason I won’t create a PR from github.

I made some modifications for blocks of code, gitlab-style formatting, wide page etc… Mobile device did not test.

1개의 좋아요
21

Thank you for the efforts here Ivan! I reviewed your work and there are some custom changes that does not need to be in the core. I’ll look into the dark mode specific changes and will make them in core after some more testing.

1개의 좋아요
22

You are welcome, Meghna! I think, it would enough to apply revert value to some elements with white.

1개의 좋아요