新しいテーマコンポーネントを作成し、この場合エアテーマに追加しましたか？
上記の私のMODをご覧になりました。テーマ設定の一部をオーバーライドしようとしていますか、それとも上記の投稿のようにMOD/修正を追加しようとしていますか？
ダンさん、ありがとうございます！新しいコンポーネントを追加し、そこにカスタムCSSを追加する方法がわかりました。
「いいね！」 1
設定を上書きしたい場合は、「!important」を使用します。
例
.some-selector {
padding-top: 2.5em !important;
{
私もまだ学習中です。Discourseは非常に多様です。
「いいね！」 2
素晴らしいテーマをありがとうございます。すべて正常に動作しています。しかし、背景画像をどのように変更できるかという質問があります。
ご協力ありがとうございます。
「いいね！」 2
背景画像を追加してテーマコンポーネントを作成します。
html .background-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-image: url();
background-size: cover;
opacity: 1;
/* background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%); */
clip-path: unset;
background-color: var(--secondary) !important;
}
「いいね！」 3
皆さん、こんにちは。
ロゴの近くのヘッダーに外部リンクを追加する方法はありますか？
よろしくお願いします！
これがあります
そして
サイトヘッダーの下にドロップダウン付きのバーを追加するものもあります
「いいね！」 2
こんにちは。
お時間を割いてご返信いただき、誠にありがとうございます。
こちらを使用していたのですが、あまり満足していませんでした：Custom Top Navigation Links
2番目のご提案はまさに私が求めていたもので、結果に大変満足しています。
ご協力いただき、誠にありがとうございました！
「いいね！」 1
皆さん、こんにちは。
二重送信となり申し訳ありませんが、デスクトップとモバイルの両方でサブカテゴリを表示し、同時にモバイルで少し長いカテゴリのタイトル全体を表示する方法はありますか？
私の設定は「サブカテゴリ付きカテゴリボックス」ですが、モダンカテゴリ＋グループボックスは使用していません。
デスクトップ版を使用している場合、デスクトップとモバイルの両方で結果は素晴らしいです。しかし、モバイル版では一部のカテゴリのタイトルの末尾が読めません。
ご協力いただきありがとうございます！
スクリーンショットを投稿してもらえますか？
両方でサブカテゴリが表示されているのですね。カテゴリの説明も両方に表示したいですか？それともデスクトップと同じように説明なしで表示しますか？
申し訳ありません、明確でなかったようです。
カテゴリのタイトルをすべて表示したいです。
例えば、デスクトップ版では「Discussions Générales sur la mode」となっていますが、モバイル版では「Discussions Générales」としか表示されません。
「いいね！」 1
CSSコードはすぐにわかりませんが、最初の画像のようにカテゴリタイトルを折り返せるはずです。
デスクトップで要素を調査して、カテゴリ名を2行で折り返すために使用されているCSSを特定できるか試してみてください。
ChatGPTやClaudeでCSSを試してみましたが、例えば以下のようになります。
.category-box-heading,
.category-box-heading a,
.category-box-heading h3 {
max-width: 100%;
width: 100%;
display: block;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.4;
padding: 5px 0;
}
.parent-box-link {
display: block;
width: 100%;
}
@media screen and (max-width: 767px) {
.category-box-heading h3 {
font-size: 16px; /* 必要に応じてこの値を調整してください */
}
}
しかし、うまくいきません。
モバイルでデスクトップ表示を強制する方法はありますか？説明とサブカテゴリが表示されると完璧です。
よろしくお願いします！
モバイルでデスクトップ表示を試したことはありますか？ 一部のモバイルではあまり良く見えません。
返信ありがとうございます。
iPhone 2台で試してみましたが、このようになりました。
まさに私が探していたものです。
理想的には、ユーザーが設定を操作することなく、このビューを直接表示できるようにしたいです。
カスタムコンポーネントを無効にします。モバイルCSSで新しいテストコンポーネントを作成し、これを試してください。
.category-box-heading h3 {
//* 下の2行をコメント解除する必要があるかもしれません。
// Overflow: unset !important;
// Text-overflow: unset !important;
text-wrap: balance !important;
}
これ以上のCSSの変更は必要ないはずです。
テストしました。私のスニペットでも動作しません。
最新版の効果的なコード：
.full-width .contents .topic-list thead th.posts {
width: 10%;
}
.full-width .contents .topic-list thead th.activity {
width: 10%;
order: 4;
}
th.num.views {
width: 10%;
order: 3;
display: block;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.posts {
width: 10%;
order: 2;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.age {
width: 10%;
order: 4;
}
.topic-list .views {
width: 10% !important;
order: 3 !important;
display: flex !important;
visibility: visible !important;
justify-content: center;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.views {
width: 10% !important;
order: 3 !important;
display: flex !important;
justify-content: center;
align-items: center;
}
「いいね！」 2
