テーマ完全実装

Metaで「Fully」テーマを選択した直後にそれを試したところ、try.discourse.orgのトピックがFullyテーマで表示されたことに驚きました。サイトが同じドメイン上にあることに関連するキャッシュの問題だと推測しています。

あなたが指摘している問題は、try.discourse.orgでハンバーガーメニューをクリックしたときに、Discourseのロゴが小さなロゴに置き換えられないことですか?

Hmm – try.discourse.org サイトのナビゲーションパネルには、メニューリンク (.try-header-nav-wrapper) を含む余分な div が含まれており、サイドメニューが非表示のときにヘッダーが右に押し出されてページレイアウトが壊れています(そのサイトでのみ発生します)。したがって、Fully テーマのバグではないことがわかりました。

「いいね!」 1

おはようございます!

このフォーラムのテーマをとても気に入っていますが、デフォルトのテーマと同様に、CSS/HTMLをカスタマイズするオプションがないことに気づきました。テーマに背景の壁紙を追加したいのですが、可能でしょうか?

「いいね!」 1

カスタマイズテーマ / テーマコンポーネントメニューを使用して新しいテーマコンポーネントを作成し、それをこのテーマに追加することで、これを実行できます。

テーマコンポーネントに、背景を追加するためのカスタムコードを追加できます。

jordan.vidrine様

ご返信ありがとうございます。
「背景変更」で検索した際にどこかでこれを見たような気がしますが、テーマのCSS/HTMLをカスタマイズするだけで可能だと思っていました。

試してみます!

「いいね!」 1

皆さん、こんにちは!このテーマは大好きです!ただし、サイトでプレビューした際に、サイドバーナビゲーションのヘッダーで問題が発生しました。ヘッダーだけサイトの通常のヘッダーカラーと違う色にすることは可能でしょうか?

こちらのように:

image

こちらではなく:

image

どうすれば実現できますか?CSSを変更すると、ナビゲーション全体が緑色になってしまいました。
よろしくお願いします!

「いいね!」 1

—sidebar-color) の特定の変数を変更すると、サイドバーとサイドバーの上部が変更されます。

サイドバーのヘッダーだけを変更する方法はありませんか?

私も同じ問題を抱えています。ヘッダーのロゴが2つの異なる色にまたがってしまい、奇妙に見えます。

最近はテーマでのCSS編集は推奨されないのではないでしょうか?リモートテーマの場合、CSSエディタのオプションは削除されているので、その変数をどのように変更すればよいのでしょうか?また、それはサイドバーの色とヘッダーの色を同じにしたいという前提でもあります。

こんにちは。CSS を使用して、サイドバーとは別にそのセクションを変更できます。

これを行うには、新しいコンポーネントを作成するか、既存のコンポーネントに追加する必要があります。:slightly_smiling_face:

  1. /admin/customize/themes/ に移動します
    カスタマイズ → テーマ

  2. コンポーネント タブをクリックし、次に インストール ボタンをクリックします

  3. ポップアップウィンドウで 新規作成 ボタンをクリックし、新しいコンポーネント名を入力します。

  4. 作成 ボタンをクリックします。

  5. コンポーネントが作成されました。次に、それをアクティブ化するために「完全にテーマ」を選択します。

  6. CSS/HTMLの編集 ボタンをクリックします。

  7. CSS セクションに以下のコードを貼り付けます。

  8. 下部にある 保存 ボタンで保存することを忘れないでください。

.desktop-view .has-sidebar-page .d-header-wrap::before {
  background: transparent;
  border-right: none;
}

右側の境界線を保持したい場合は、コードからその行を削除してください。

「いいね!」 6

Don、ありがとうございます。しかし、DiscourseのCSSを変更するのは初めてなのですが、どこでこの変更を行えばよいのでしょうか?

「いいね!」 2

投稿を更新しました。 :slight_smile:

「いいね!」 5

ありがとうございます。完了しました。すべて正常に戻りました :smiley:

「いいね!」 2

テーマは現在、これを行うために右端に非常にわずかなスペースしかありません。そこにさらにスペースを設けて、ウィジェットに使用できると面白いと思います。

「いいね!」 1

テーマへのアクセスをユーザーに許可したところ、奇妙なことに気づかれました :roll_eyes:

私は Custom Header Links のテーマコンポーネントと、もう一つ使用しているテーマ(Material Design)を使用しています。ブラウザウィンドウの幅を狭めていくと、リンクがサイトロゴを上書きするポイントに達したときに、ロゴが縮小し、最終的には非常に小さくなります。例:

image

Fullyではロゴが縮小しないため、最終的にこのようになります…

image

カスタムヘッダーリンクは、トピックを表示しているときにリンクを削除し、トピックタイトルを表示します。トピックタイトルも、ブラウザ幅が狭い場合にはロゴを上書きしますが、最終的にはロゴが完全に削除され、問題が解決します。

これがFullyの問題なのか、カスタムヘッダーリンクの問題なのかはわかりませんが、CHLは他のテーマでは正常に動作するため、こちらから始めます。

「いいね!」 1

discourse-full-width-component および幅広のロゴとの間にわずかな競合があるようです。

次のコードを、以前に作成したコンポーネントの以前のコードの後に貼り付けることで、簡単に修正できます。これにより、すべてが1か所にまとまります。

これにより、ロゴが縮小されます。

.desktop-view .d-header .title a {
  flex: auto;
}

更新:うーん、サイドバーが非表示になっていると、縮小しすぎるかもしれません。 :thinking: ちょっと見たところ、グリッドに関連する問題だと思います。しかし、グリッドを変更してヘッダーのUXを壊したくないので、公式な方法を待つのが良いと思います。

@packman このコードを削除してください。

「いいね!」 3

またありがとうございます!今日は素晴らしい行いをしていますね :slight_smile:

「いいね!」 3

やあ、ドン!また問題が発生しました。このように変更すると、ダークモードでも同じように見えます。特定の色設定のみCSSを変更するにはどうすればよいですか?

「いいね!」 1

ロゴは狭いウィンドウでは非常に小さくなりますが、これはMaterial Design Themeでカスタムヘッダーリンクを使用した場合にも起こります。

以前CSSを見ていたのですが、ロゴがspan.header-sidebar-toggleの内側に含まれていることが、状況を悪化させているのかもしれません。もっとも、広い表示ではそれが唯一の合理的な場所なのかもしれませんが。

「いいね!」 1

こんにちは @Renato_Mendes :wave:

なるほど、単一のカラースキームで透明な背景を使用したいということですね。知りませんでした。

これにはいくつかの方法があります :arrow_down_small:

  1. dark-light-choose(): これで可能ですが、この場合は実用的ではありません。なぜなら変数が作成されるからです。色の指定にはこちらの方が良いでしょう。

  1. schemeType: スキームタイプ別に使用したい場合は、こちらの方がこのユースケースに適しています。
schemeType の使用

schemeType の使い方はこちらです。

作成したコンポーネントから以前のコードを削除し、画像のように Color Definitions セクションに新しいコードを配置してください。

これにより、ライトスキームでのみコードがアクティブになります。

Common / Color Definitions

@if #{schemeType()} == light {
  .desktop-view {
    .has-sidebar-page {
      .d-header-wrap {
        &:before {
          background: transparent;
          border-right: none;
        }
      }
    }
  }
}

  1. Targetable Color Schemes : より多くのカラースキームがある場合や、変更したい特定のカラースキームをターゲットにしたい場合は、このテーマコンポーネントが最適です。
Targetable Color Schemes の使用

このコンポーネントは、実際のカラースキームを html に配置するため、CSS でターゲットにすることができます。

使い方はこちらです。

コンポーネントをインストールします。
変更したいカラースキームのIDを確認します。
こちらで見つけることができます。

または

/admin/customize/colors
Colors ページ。ここでカラースキームをクリックすると、URL に ID が追加されます。

これでコードで使用できます。以前追加したコードを削除することを忘れないでください。

html[color-scheme="your-color-scheme-id"] {
  &.desktop-view {
    .has-sidebar-page {
      .d-header-wrap {
        &:before {
          background: transparent;
          border-right: none;
        }
      }
    }
  }
}

こんにちは @packman :wave: ダイレクトメッセージをお送りしました。

「いいね!」 2