您是否创建了一个新的主题组件并将其添加到“air”主题中?
您已经看到了我上面的修改。您是想覆盖主题设置的部分,还是像我上面发布的帖子一样添加修改/修复?
您是否创建了一个新的主题组件并将其添加到“air”主题中?
您已经看到了我上面的修改。您是想覆盖主题设置的部分,还是像我上面发布的帖子一样添加修改/修复?
谢谢你,Dan!我成功地添加了一个新组件,并在那里添加了自定义 CSS。
如果您想覆盖设置,请使用“!important”
例如
.some-selector {
padding-top: 2.5em !important;
{
我还在学习中。Discourse 非常多样化。
感谢您提供的出色主题。一切正常。但我有一个问题,如何更改背景图片?
感谢您的帮助。
创建一个主题组件,并添加此背景图片
.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;
}
大家好,
有没有办法在靠近徽标的标题中添加一些外部链接?
谢谢!
有这一个
还有
还有一个添加了带有下拉菜单的条在站点标题下方
大家好,
抱歉重复发送此消息,但有没有办法同时在桌面和移动设备上显示子类别,并在移动设备上显示完整的类别标题(当它们有点长时)?
我的配置是“带子类别的类别框”,但未使用“现代类别 + 分组框”。
当我在桌面版本上使用它时,结果在桌面和移动设备上都很棒。但是使用移动版本时,您无法读取某些类别标题的结尾。
非常感谢您的帮助!
你能发个截图吗?
我看到子类别同时显示在 ss 中。您希望同时显示类别描述吗?还是镜像桌面而不显示描述?
抱歉,如果我之前没有说清楚。
我想看到完整的类别标题。
例如,在桌面版本中,您有“Discussions Générales sur la mode”(时尚综合讨论),但在移动版本中,您只有“Discussions Générales”(综合讨论)。
我不确定我能立刻说出 CSS 代码。但是,你应该能够让分类标题像你在第一张图片中展示的那样换行。
也许可以尝试在桌面上使用“检查元素”来查看是否能识别出用于将分类名称换成两行的 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; /* 根据您的需要调整此值 */
}
}
但它不起作用。
有没有办法强制手机上显示桌面视图?这将是显示描述和子类别的完美方式。
谢谢!
您试过在手机上查看桌面视图吗?在某些手机上效果不太好。
禁用自定义组件。在移动 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;
}