Graceful テーマ

[Discourse]

	概要	Graceful - Discourse のための洗練されたテーマ
	プレビュー	Discourse Theme Creator でプレビュー
	リポジトリリンク	https://github.com/discourse/graceful
	Discourse テーマは初めてですか？	Discourse テーマの使い方の初心者ガイド

このテーマをインストール

これは Discourse チームがメンテナンスする#公式テーマです。#サポートに関する質問、#バグ報告、ux に関する提案、および#開発アドバイスのリクエストは、Meta のそれぞれのカテゴリで投稿し、適切なテーマタグを付けてください。以下のリンクをクリックして、新しいトピックを作成してください。

 サポート  バグ  UX  開発

機能

@jsthon さんが 2016 年に共有した テーマ が本当に気に入りました。。投稿当初から彼らは活動していませんでしたが、私はそれを更新し、拡張し、GitHub に追加しました。

設定

名前	説明
背景画像	画像の URL を入力
背景をタイル表示
背景画像なし	上記の背景画像とタイル表示の設定を無効にします。

このテーマには 3 つの設定があります：

• 独自の背景画像を追加するフィールド
• タイル表示するオプション
• 上記の両方のオプションを削除するオプション

タイル表示オプションを無効にすると、画像は background-size: cover に設定され、ブラウザが画像を背景全体に比例して拡大縮小します。例えば：

クレジット

デフォルトの背景パターンは、Toptal Subtle Patterns によるものです。

当方でホストされていますか？ テーマは、Standard、Business、Enterprise プランで利用可能です。

[eextra (Sylwia)]

Am I the only one with this problem using this theme ? When I test in google page speed gets 99% but the page doesn’t load, so the results are misleading.

What is it because google can’t see - it doesn’t load this page?

[awesomerobot (Kris)]

Hmm, yeah I’m seeing the same issue… it seems like something in the theme is interfering with the version of Discourse we serve Google. I’ll investigate. Looks like it might be the same issue messing with the print view reported above.

[neounix (Dark Matter)]

@awesomerobot

Very nice theme.

I’m trying to make Graceful much wider on desktop. Tried this:

#main-outlet {
  width: auto;
  max-width: 1210px; /* This makes the container as wide as the logo/header controls */ 
}

and this CSS made the overall container wider; and the suggested topics at the bottom span the page nicely but the overall width of the posts in the topics are too narrow (for my wide version).

Tried inspector, and a number of elements but not being a expert, could not get the width of the topics / posts to match the width of #main-outlet .

Do you mind to help me out?

Thanks

Also, tried this:

#main-outlet {
  width: auto;
  max-width: 80%; 
}

But cannot the the posts width to match the container width:

[Steven]

topic-body has his own width setting.

Default:

.topic-body {
    width: calc(690px + (11px * 2));
}

Change only the 690px and keep the rest (it’s linked to the padding of the topic post)

[neounix (Dark Matter)]

Thanks! Will give it a go later and post back the results.

I tried changing .topic-body yesterday, but I’ll try again based on your suggestion @Steven

[neounix (Dark Matter)]

@Steven

.topic-body {
    width: calc(690px + (11px * 2));
}

Change

Hi @Steven,

Added the following to the desktop CSS:

#main-outlet {
  width: auto;
  max-width: 80%; 
}

.topic-body {
    width: calc(1020px + (11px * 2));
}

It worked partially, but there is some issue. Perhaps you know the CSS trick to fix it?

See Image:

[Steven]

I’m not on my computer but I know there is some margin-left to correct with the class timeline-container

[awesomerobot (Kris)]

Right, for the timeline there are a few margin-lefts that need to be overridden on .timeline-container (three breakpoints):

app/assets/stylesheets/common/topic-timeline.scss

[neounix (Dark Matter)]

Hi @awesomerobot

Kris,

The way we got the wide look we wanted was to be less graceful and hide the .timeline-container.

#main-outlet {
  width: auto;
  max-width: 70%; 
}

.topic-body {
    width: 100%;
}

.timeline-container .topic-timeline {
      display: none;
 }

Not very graceful but at least it’s working ‘ok’ with large blocks of code, it is easier to read on the big developers screen.

Would be nice to show the .timeline-container but I could not get it to work overriding the class as suggested, surely because of my not well-developed CSS skills:

Thank you for your help and for this nice theme.

[Solari]

I am loving this theme so far. Many thanks for sharing it with us!

I’ve noticed on mobile view the category color bars disappear. Is this on purpose and is there a way to restore it?

Also, is there a way to turn off the background if a category has a background set? It seems to work okay but when scrolling on long posts the screen gets jerky and you can glimpse the theme set background.

Thanks!
Ray

[Solari]

@Solari

I’ve noticed on mobile view the category color bars disappear. Is this on purpose and is there a way to restore it?

I dug into mobile CSS and saw it was being excluded; commenting out the “left-border” portion turned the colored borders back on:

.category-list-item {
//  border-left: none;
  border-top: 2px solid;
  .category-name {
    font-weight: normal;
  }
}

However, I know this will be overwritten whenever the theme is updated. What’s the best way to keep modifications in those situations?

I do have a custom theme component where I keep custom CSS changes, this in the mobile CSS portion:

.category-list-item {
  border-left: 4px !important; 
}

…but it doesn’t show the specific category color, just a white bar. How do I get it to show the proper category color? I know it has something to do with category color variables but I can’t seem to find reference to it.

I’m a newb when it comes to CSS and such so I may be doing something wrong.

Thanks,
Ray

[IAmGav (Gavin Perch)]

ヘッダーの色に問題があります。

ヘッダーの背景色とヘッダーのテキストを変更しましたが、設定が反映されていません。

アイコンが灰色のままです。

[dax (Daniela)]

これはデフォルトの動作です。色は純粋な色ではなく、#ffffff の「低中」変数であるためです。

この色を上書きするには、こちらをご覧ください: How to Change Header Icon Color? - #2 by awesomerobot

[Jack51 (Jack)]

本当に素晴らしいテーマだと称賛したくて投稿しました。その洗練された見た目が大好きです。

[Solari]

同意します！Discourseのテーマの中でも最も見た目が美しいものの一つですね。

レイ

[oshyan (Oshyan Greene)]

どうも私がおかしいのか、テーマコンポーネントで CSS を調整してロゴのサイズを変えられないのです。ヘッダー全体の高さは変更できるのに、ロゴだけは頑なに変わらないのです。この CSS が、私が試みた変更をすべて無効にしているようです：

.d-header #site-logo {
max-height: 35px !important;
}

Chrome のインスペクタによると、これは desktop-scss-graceful.scss から来ているようです。

デフォルトのテーマではロゴサイズの変更は問題なく機能しますし、前述の通り Graceful でもヘッダーの高さ変更は可能ですが、ロゴだけはダメなのです…

[awesomerobot (Kris)]

はい、!important は !important を含まない他の CSS を上書きします。なぜそれが含まれているのかは覚えていませんが、削除を検討すべきでしょう。ご自身の CSS に important を含めると動作しますか？

.d-header #site-logo {
max-height: 50px !important; // <-- ここにカスタムの高さを指定
}

[oshyan (Oshyan Greene)]

迅速な返信ありがとうございます！実は !important にも気づいていて、自分の方にも追加してみたのですが、効果はありませんでした。奇妙なことに、今試してみると、その変更を保存してリフレッシュすると、一瞬だけ正しいサイズが表示され、その後また小さくなってしまいます。そしてインスペクターを見ると、正しい動作をしているように見えます：

少なくとも 35px が無効になっているという意味ではそうです。しかし、少なくとも順序がおかしいようです。いずれにせよ、まだ動作していません。不思議ですね。

参考までに、これは Common CSS に記述しています。

更新：解決しました！問題は header.scss 内の以下の部分でした：

.d-header #site-logo {
     height: 2.667em;
 }

そして、自分の側で !important を付けて height: を追加すると、動作します！

[oshyan (Oshyan Greene)]

OK、次の質問です。これはおそらくこのテーマ固有のものだと思います。私はこれをベースに、一種の個人用「ブログ」（実際には「デジタルガーデン」ですが、これはあまり知られていない用語です）を作成しています。ほぼすべての投稿が私によって書かれるため、特定の著者関連の視覚要素、特にアバターを目立たなくするか、削除したいと考えています。特に、フロントページやカテゴリのトピックリストにおいてです。赤枠で囲んだ部分が、可能であれば非表示にしたい部分です：

理由はお分かりいただけるかと思います。

私が試したこと：

• 最新トピックのユーザー列を非表示にするには？ のアドバイス
• カテゴリ表示でアバターを削除する のアドバイス
• MD トピックリストコンポーネント（テーマとの互換性がないようです）
• Chrome の開発者ツールを使ってクラスや ID を特定し、非表示化を試みる（自分へのメモ：ember-view を非表示にしないこと ）

また、トピック内の最初の画像をサムネイルとして表示するための様々なコンポーネントについても調査・実験中です。もし、これらのアバターをトピック内の最初の画像の小さなサムネイルに置き換えられるなら、それも素晴らしいのですが。とりあえず非表示にすることから始めましょう。

ご協力ありがとうございます！