空气主题

您是否创建了一个新的主题组件并将其添加到“air”主题中?

您已经看到了我上面的修改。您是想覆盖主题设置的部分,还是像我上面发布的帖子一样添加修改/修复?

谢谢你,Dan!我成功地添加了一个新组件,并在那里添加了自定义 CSS。

1 个赞

如果您想覆盖设置,请使用“!important”
例如

.some-selector {
    padding-top: 2.5em !important;
{

我还在学习中。Discourse 非常多样化。

2 个赞

感谢您提供的出色主题。一切正常。但我有一个问题,如何更改背景图片?
感谢您的帮助。

2 个赞

创建一个主题组件,并添加此背景图片

.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

您的第二个建议正是我需要的,我对结果非常满意。

非常感谢您的帮助!

1 个赞

大家好,

抱歉重复发送此消息,但有没有办法同时在桌面和移动设备上显示子类别,并在移动设备上显示完整的类别标题(当它们有点长时)?

我的配置是“带子类别的类别框”,但未使用“现代类别 + 分组框”。

当我在桌面版本上使用它时,结果在桌面和移动设备上都很棒。但是使用移动版本时,您无法读取某些类别标题的结尾。

非常感谢您的帮助!

你能发个截图吗?

好的,请查收附件中的两张截图,一张是我的 iPhone 移动版本,一张是桌面版本。


1 个赞

我看到子类别同时显示在 ss 中。您希望同时显示类别描述吗?还是镜像桌面而不显示描述?

抱歉,如果我之前没有说清楚。

我想看到完整的类别标题。

例如,在桌面版本中,您有“Discussions Générales sur la mode”(时尚综合讨论),但在移动版本中,您只有“Discussions Générales”(综合讨论)。

1 个赞

我不确定我能立刻说出 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; /* 根据您的需要调整此值 */
}
}

但它不起作用。

有没有办法强制手机上显示桌面视图?这将是显示描述和子类别的完美方式。

谢谢!

您试过在手机上查看桌面视图吗?在某些手机上效果不太好。

感谢您的回复。

我刚在两部 iPhone 上试了一下,结果是这样的。

这正是我想要的。

理想情况下,我希望我的用户能直接看到这个视图,而无需调整设置。

禁用自定义组件。在移动 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 个赞

我有两个问题:

  1. 如何将主题的宽度设置为整页?
  2. 如何减小主页上默认欢迎消息的字体大小(附有屏幕截图)。

有人能帮我解决这些问题吗?

1 个赞