激活自定义 CSS/HTML

[lyseoy]

我添加了一些自定义 CSS 和 HTML。查看了预览，一切看起来都很完美。

现在我想提交这些更改，但该如何操作？我没有看到任何相关命令，尝试重新构建 Discourse 应用也没有任何反应。

我搜索过，但一无所获。这问题可能太简单了，所以从来没人问过，但作为一个新手，我确实需要一点提示…

[Bcat]

看起来无关紧要，但我确实不太明白。

[Vaping_Community]

@lyseoy

我添加了一些自定义 CSS 和 HTML。

在哪里？自定义主题还是默认主题？
通用 CSS / 桌面端 CSS / 移动端 CSS？
请提供更多关于你所做操作的详细信息，这将很有帮助。

通常你只需选择一个主题 /admin/customize/themes，然后执行以下操作：

点击保存按钮后，只要你所编辑的主题处于激活状态，更改几乎会立即生效。

[lyseoy]

你在视频中做的操作。不过，我只能点击“预览”按钮后才能看到更改。

[Vaping_Community]

您是否已将主题设置为活动的默认主题？看到绿色的勾了吗？

[lyseoy]

是的。我已编辑了标准浅色主题，并且它已激活并设为默认。

[Vaping_Community]

好的，请列出您所做的更改

提供网站链接也会很有帮助

[lyseoy]

CSS:

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400, 400i, 700");
    .docked #main-outlet {
    margin-top: 0;
}
.docked nav#bar {
    display: none;
}
nav#bar {
    font-family: 'Open Sans',  sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
nav#bar ul {
    display: inline-flex;
    list-style-type: none;
    margin: 0 0 0 25px;
    align-items: center;
}
nav#bar ul li {
    margin-left: 20px;
}
@media (max-width: 650px) {
    nav#bar {
    flex-wrap: wrap;
    justify-content: center;
}
nav#bar #logo {
    display: flex;
    justify-content: center;
    flex-basis: 100%}
nav#bar #logo img {
    width: 120px;
}
nav#bar ul li {
    margin-left: 8px;
}
nav#bar ul li a {
    font-size: 14px;
}
nav#bar ul li a.www-btn {
    padding: 3px 8px 5px;
}
}
nav#bar li a {
    text-decoration: none;
    color: #333;
}
nav#bar li a:hover {
    border-bottom: 5px solid;
}
nav#bar li:nth-of-type(1) a:hover {
    border-color: #D13239;
}
nav#bar li:nth-of-type(2) a:hover {
    border-color: #f15c22;
}
nav#bar li:nth-of-type(3) a:hover {
    border-color: #F2E88F;
}
nav#bar li:nth-of-type(4) a:hover {
    border-color: #00953A;
}
nav#bar li:nth-of-type(5) a {
    font-weight: bold;
}
nav#bar li:nth-of-type(5) a:hover {
    border-color: #14A0F4;
}
nav#bar img {
    width: 150px;
    height: auto;
    max-height: 40px;
}
nav#bar .www-btn {
    border: none;
    border-radius: 100px;
    background: #13a0f5;
    color: #fff;
    padding: 5px 20px 7px;
}
nav#bar .www-btn.big {
    font-size: 1.5rem;
    padding: 7px 30px 10px 30px;
}
nav#bar .www-btn:hover {
    background: #0a5783;
}
nav#bar .www-btn:active {
    background: #08476b;
    box-shadow: none;
}
nav#bar a.www-btn {
    text-decoration: none;
    color: #fff !important;
}
.d-header {
    background: linear-gradient(-90deg,  #F2E88F,  #a3e6ff);
    background-size: 100% 100%;
    background-repeat: repeat-x;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.15);
}
.d-header .icons .icon {
    color: #555;
}

我稍后会发布头部内容。每次我粘贴 HTML 时，论坛都会将其渲染出来……

[Vaping_Community]

@lyseoy

nav#bar #logo {
    display: flex;
    justify-content: center;
    flex-basis: 100%}

这是错误的，应该改为

nav#bar #logo {
    display: flex;
    justify-content: center;
    flex-basis: 100%;
}

[lyseoy]

就是这样！观察得真仔细，你的眼光真敏锐！

有趣的是，预览竟然没有在意那个语法错误。

[Vaping_Community]

很高兴你解决了问题

• 你的 CSS 中任何错误都会导致该 CSS 失效。
• 我从未使用过预览功能，所以无法对此发表评论。
• 我确定页面上曾经有过错误提示

哦，祝 @tshenry 生日快乐 祝你度过愉快的一天！