Zeronoiseテーマ

テーマ
,
1
:discourse2: Summary Zeronoise focusses on having clear color accents and subtly differentiated content areas trying to create a pleasant reading experience.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/zeronoise
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme

Features

Hello Meta! I’ve built a theme for discourse focusing on having clear color accents and subtly differentiated content areas trying to create a pleasant reading experience.

zeronoise example
zeronoise example1280×665 72.1 KB

In the desktop version I also moved the topic creator avatar to the left side of the title In order to give it a higher hierarchy in the design.

It was also fun to play with serif fonts and in the end “Playfair Display” really gives a character (hehe) to the theme.

Another fun thing is that, since the theme header is black, you can play with some aspects of the logo through Theme Settings (color inversion, hue rotation and brightness).

I hope you enjoy it, use it and fork it :100:!

100288928-60e40980-2f3d-11eb-8261-14dae619f103
100288928-60e40980-2f3d-11eb-8261-14dae619f1031276×910 88.6 KB

100288929-617ca000-2f3d-11eb-9a77-f6455fa19c26
100288929-617ca000-2f3d-11eb-9a77-f6455fa19c261275×955 82.7 KB

Settings

Name Description
logo invert colors
logo hue rotation Specify a value in degrees to change the color of your logo. If you don’t know what this is you could leave it in 0 or google ‘css filter hue rotation’
logo brightness Set the amount of brightness you want to add to your logo (if you want to make it darker, set a negative number)

Credits

Created by @ruidovisual


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

Last edited by @JammyDodger 2024-06-17T13:43:50Z

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

Wow! Beautiful theme! Many of the elements should honestly be baked into Material Theme, but both themes are awesome. Great job! :+1:

「いいね！」 2
3

This theme actually looks good. Will definitely try this on my website.

「いいね！」 4
4

image
image1242×2688 286 KB

new topic is a component?

「いいね！」 2
5

Honestly this is one of the best looking themes I have found! Thank you so much :slight_smile:

I just need one help, if it’s not too much trouble @ruidovisual :slight_smile:

  • I am a complete noob with all this, so forgive my naivety. I have managed to fork your file and change the colour themes. I need to change the font and I see I can do that by importing my own font family inside the variable SCSS?
  • What I am not able to figure is how to set two different fonts, one for the titles, headers etc., and the other for the body.

It will be so great if you could help me out here, I know this might be totally out of scope but it would certainly help a lot :slight_smile:

「いいね！」 5
6

Hey Karthikk! I’m glad you like the theme : )

The easiest way would be to define a font-family for the body (I think doing it in common.scss would be the best):

body {
  font-family: 'The Name of your Font Family', [FALLBACKS];
}

I don’t know if you are adding your own fonts or picking up some google fonts, but, I would advise that you pick a family from the google catalog.

Remember to replace [FALLBACKS] with your fallbacks depending on what type of font you’ve chosen, you can see more on font-family fallbacks here

About changing the font for titles and headers, I think that’s the part that you already figured out, but as a reminder, besides from importing it you need to declare it in the line 116 of variables.scss

Hope it helps! have a nice weekend : )

「いいね！」 7
7

You mean a custom component for the theme? in this case the answer is no. It’s there with position: fixed See line 36 of mobile.scss

Have a nice weekend and thank you for your patience : )

「いいね！」 4
8

Very nice theme! I can’t wait building a new theme for our discourse based upon zeronoise.
Thank you for sharing!

「いいね！」 5
9

excellent theme. high on my personal like list. :slight_smile:

would be even more interesting if font could be optionally same as whatever was chosen in the wizard.

「いいね！」 4
10

Hi @ruidovisual ,

I like your Theme a lot.

Is it possible to change the purple color to red? Can you release a red version of your theme?

I tried it myself but after that I lost the Theme effects and it wasn’t red. :grin:

「いいね！」 2
11

@ruidovisual Thanks for the explanation, I have figure out how to change the fonts, thanks to you!

I am now playing around with my own light and dark version of the theme. I am using the Color Palettes to achieve this, as I wish to stay away from CSS as much as possible.

I have managed to tweak almost everything except these two elements :

  1. The status bar below the post has a special effect in your theme and I am not able to control it with the Color Palette. How do I tweak this using CSS? Which part do I target?

    image
    image1664×438 29.8 KB

  2. The bar on top of all topics in the separate category view stays white no matter what colour I set in the palette

    image
    image2526×334 23.2 KB

Would be great if you could help me with these :slight_smile:

P.S. This is my Color Palette for your reference :

image
image739×713 58.4 KB

「いいね！」 1
12

Great theme.

One question, has anyone been able to make it work with “Box-type” Categories? They just get random shapes and the text remains white.

「いいね！」 1
13

This is extremely clean and modern. The community makes the best themes ever!

「いいね！」 1
14

Hi,This theme looks great
However, there seems to be some problems with the style in the Chinese forum.

zeronoise theme

image
image1082×855 76.7 KB

default theme

image
image1190×730 73.4 KB

「いいね！」 3
15

Probably a formatting issue with Chinese characters

「いいね！」 2
16

まず、この美しいテーマを @ruidovisual さん、本当にありがとうございます。コミュニティフォーラムで約2ヶ月間使用しています。

一つ質問があります。モバイルでナビゲーションドロップダウンを削除することは可能でしょうか？

image
image750×1624 74.8 KB

よろしくお願いします。

「いいね！」 1
17

このテーマをありがとうございます。今のところ気に入っています！これまで見た中で最も快適なディスコーススタイルの1つです :slight_smile:

問題は1つだけです。カテゴリで一括操作を実行すると、チェックボックスが表示されないため、複数のトピックを選択できません。これは本当に困っており、この問題のためにテーマを定期的に使用できません。修正できますか？ <3

「いいね！」 1
18

これは中国語の文字とは関係なく、「box」設定のcategory styleの問題です。

afbeelding
afbeelding532×287 14.9 KB

.badge {
  &-category-bg,  /* <------ bad!! */
  &-wrapper.bullet &-category-parent-bg,
  &-wrapper.bullet &-category-parent-bg + &-category-bg {
    border-radius: 50%;
    width: 9px;
  }

これを解決するには、テーマコンポーネントとして適用してください。

.badge {
  &-wrapper.bar &-category-bg,
  &-wrapper.bar &-category-parent-bg,
  &-wrapper.bar &-category-parent-bg + &-category-bg {
     border-radius: 0%;
  }
  &-wrapper.box &-category-bg,
  &-wrapper.box &-category-parent-bg,
  &-wrapper.box &-category-parent-bg + &-category-bg {
    border-radius: 0%;
    width: 100%;
  }
}
「いいね！」 3
21

テーマは気に入っていますが… ;)\n\nこの印刷ビューを修正または手伝っていただけますか。使用できません。\n- タイトルは小さくする必要があります\n- 影付きの境界線は表示されないようにする必要があります\n\n

CleanShot 2022-11-19 at 14.15.52@2x
CleanShot 2022-11-19 at 14.15.52@2x1996×1316 230 KB
\n\nまた、トピックの選択も機能しません\n\nCleanShot 2022-11-20 at 00.12.18\n\nまた、このテーマのフォントをグローバルに変更するにはどうすればよいですか？

22

大変素晴らしいです、どうもありがとうございます。

今からデプロイします。近いうちにさらに貢献できることを願っています :slight_smile: