エアテーマ

これを実現する唯一の方法は、カテゴリページをカスタマイズしたコンポーネントを無効にすることです。https://discourse.jordanvidrine.com/admin/customize/themes にアクセスし、「Components」をクリックして、「Modern Category + Group Boxes」を見つけます。そのページで、一番下までスクロールして「Disable」をクリックしてください。

「いいね!」 1

わかりました。しかし、テーマはカスタムできません :dizzy_face:

「いいね!」 2

もう一つ質問があります。トピックリストで表示回数を表示したいのですが、その方法を教えていただけますでしょうか。どうぞよろしくお願いいたします。

「いいね!」 1

ジョーダンさん、お返事ありがとうございます!大変感謝しております!

「いいね!」 1

素晴らしいテーマをありがとうございます、@jordan.vidrineさん!ホームページにカテゴリーと最新情報を表示する方法はありますか?教えてください。

「いいね!」 2

私のテーマはdiscourse.fotografos.onlineです。なぜ一番上が白なのでしょうか!?ヘッダーはどこですか!?:hot_face: 誰か助けてください!クリーンインストールです!そこにソリッドブルーの代わりに画像を追加するにはどうすればよいですか?

「いいね!」 1

@jordan.vidrine ビュー列を追加することは可能ですか?もし可能であれば、このオプションにはどこからアクセスできますか?よろしくお願いします。

「いいね!」 2
「いいね!」 1

返信と情報の提供ありがとうございます。この情報をテーマにどのように適用すればよいのか、ただ知りたいだけです。

「いいね!」 1
  1. ここ admin/customize/themes に移動します
  2. コンポーネントをクリックします
  3. インストールをクリックします
  4. 新規作成をクリックし、名前を付けます
  5. コンポーネントリストで新しいコンポーネントをクリックします
  6. Edit Html/css をクリックします
  7. 上記のリンクされたコードを共通 CSS ファイルに追加します。
  8. この新しいコンポーネントを現在使用中のテーマに追加します
「いいね!」 2

ありがとうございます。大変助かります。

「いいね!」 1

現在のテーマでHTML/CSSが機能していません。しかし、新しいコンポーネントをプレビューすると、「Views」セクションが表示されます。テーマでも新しいコンポーネントが追加されたことが示されています。

短いビデオはこちらです: https://share.cleanshot.com/ekutkT

時間があるときに、セットアップで何か間違っている点があれば教えてください。

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

「いいね!」 1

これをどこに追加すればよいですか?これにより、画像のように背景画像が切り取られる問題が修正されますよね?

「いいね!」 1

以下の手順でCSSを追加できます。

「いいね!」 1

トピックリストに「表示回数」列を追加する方法

私は開発者でもプログラマーでもありません。Google Chrome の要素の検査機能を使って CSS コードを数時間いじってみました。表示回数の列を正しく表示させることができ、各列のサイズも好みに合わせて調整しました。以下の CSS コードで幅を自由に調整してください。コードにはコメントも追加したので、どのコードがどの列に対応しているか簡単にわかります。各列には 2 つのエリア(ヘッダーと行)があります。これらの幅は一致させる必要があります。

これが皆さんのお役に立てば幸いです:@daming @bksubhuti @eddy2

手順

1. 新しいコンポーネントを作成する。

2. この CSS をコピーする

上記 @jordan.vidrine が提供したコードの代わりに、以下の更新された CSS を使用してください。

オプション A) デスクトップのみに表示回数の列を追加する(推奨)

  • CSS コードを デスクトップ タブに追加します。

オプション B) デスクトップとモバイルの両方に表示回数の列を追加する。

  • CSS コードを 共通 タブに追加します。

オプション C) モバイルのみに表示回数の列を追加する。

  • CSS コードを モバイル タブに追加します。

注意:オプション B または C を選択した場合…

モバイルでは、3 つの列(返信、表示回数、アクティビティ)がスペースを取りすぎて窮屈になります。モバイルでこれが必要な場合は、以下の CSS コードの非表示にしたい列のヘッダーと行の両方に display: none を追加することで、3 つの列のうち 1 つを削除することをお勧めします。

/* [トピック] */

    /* トピックヘッダー */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
        width: 66%;
    }
    
    /* トピック行 */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.default {
        width: 66%;
    }

/* [返信] */

    /* 返信ヘッダー */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
        width: 7%;
        order: 2;
    }
    
    /* 返信行 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
        width: 7%;
        order: 2;
    }

/* [表示回数] */

    /* 表示回数ヘッダー */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.views {
        display: block;
        width: 7%;
        order: 3;
    }
    
    /* 表示回数行 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
        width: 7%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* [アクティビティ] */

    /* アクティビティヘッダー */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
        display: block;
        width: 7%;
        order: 4;
    }
    
    /* アクティビティ行 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
        width: 7%;
        order: 4;
    }

@jordan.vidrine 私が書いた CSS に修正があれば教えてください。私は自分のやっていることを完全に理解しているわけではありませんが、機能します(笑)。

「いいね!」 6

モバイル表示を改善するためのCSS変更を以下に示します。

このテーマは大好きですが、いくつか小さな不具合に気づいたため、私の好みに合わせて少し見栄えを良くするために、以下のCSSを追加しました。同じような好みの人がいれば役立つことを願っています。

元の(未編集)コード

上の画像で以下の点に注意してください:

  • 返信を表す数字1が左に寄りすぎている。
  • トピックの吹き出しが青い背景にわずかに重なっている。
  • コンテンツと青い背景の間にパディングがない。
  • カテゴリページでは青い背景が見栄えが良くない。ただし、ホームページでは気に入っています。

モバイルタブに追加したCSSコードはこちらです。

/* カテゴリ、サブカテゴリ、タグ、検索、最新、新規トピック、通知エリアにパディングを追加 */
.list-controls {
    padding: 5px;
}

/* トピックエリアにパディングを追加 */
div#list-area {
    padding: 6px;
}

/* 返信数を右に寄せます */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
    float: right;
}

更新後(CSS追加後)

もしあなたも青い背景を削除したい場合は、カテゴリページからのみ削除するコードはこちらです。

/* カテゴリのみ青い背景を削除 */
html .category .background-container {
    background: #fff;
    clip-path: none;
}

すべての変更を加えた後の見た目はこちらです。

「いいね!」 4

モバイルの問題フラグ

モバイルでは、カテゴリドロップダウンがあります。クリックして「最新」、「未読」、または「トップ」のいずれかを選択すると、ドロップダウンから再度カテゴリを選択できなくなります。

1. 変更前

2. ドロップダウンメニューがクリックされたとき

3. クリック後

4. ドロップダウンメニュー(カテゴリが欠落)

この時点で、ユーザーはドロップダウンを選択して再度カテゴリを選択できなくなります。

この問題を解決する方法について、何かアドバイスはありますか?

ありがとうございます。

「いいね!」 2

@UnitedFreedom
:clap: :clap: :clap:
これらの表示列を有効にしたい方のために、これらの役立つ手順を投稿していただき、ありがとうございます。

あなたのサイトへのリンクはありますか?ローカルで自分のサイトで試していますが、再現できません。

「いいね!」 3

この完全で洗練されたテーマをありがとうございます。

注目のトピックコンポーネントでカードが表示されない問題が発生しています。また、指定したカテゴリ内の注目のトピックのみを表示するオプションも欲しいです。理論的には、公式のバリアントに基づいているか、それを行うべきです。

以下に画像を参照してください。

必要であれば、確認のためにリンクをDMでお送りできます。両方のテストトピックには注目の画像がありますが、カスタムタグ pi-featured を使用しています。test-passed を実行中です。

リンクを送ってください。確認します :+1:

「いいね!」 2