 |
摘要 | Graceful - 专为 Discourse 打造的优雅主题 |
 |
预览 | 在 Discourse 主题创建器中预览 |
 |
仓库链接 | https://github.com/discourse/graceful |
 |
初次接触 Discourse 主题？ | Discourse 主题使用入门指南 |
安装此主题
我非常喜欢 @jsthon 早在 2016 年分享的 主题 
。自最初发布以来，原作者已不再活跃，因此我对其进行了更新、扩展，并将其添加到了 GitHub。
| 名称 | 描述 |
|---|---|
| 背景图片 | 输入图片 URL |
| 平铺背景 | |
| 无背景图片 | 禁用上述背景图片和平铺设置。 |
此主题包含三个设置：
如果您禁用平铺选项，图片将被设置为 background-size: cover，浏览器会按比例缩放图片以完全覆盖整个背景。例如：
默认背景图案的版权归 Toptal Subtle Patterns 所有。
由我们托管？ 主题可在我们的标准版、商业版和企业版计划中使用。
Am I the only one with this problem using this theme ? When I test in google page speed gets 99% but the page doesn’t load, so the results are misleading.
What is it because google can’t see - it doesn’t load this page?
Hmm, yeah I’m seeing the same issue… it seems like something in the theme is interfering with the version of Discourse we serve Google. I’ll investigate. Looks like it might be the same issue messing with the print view reported above.
Very nice theme.
I’m trying to make Graceful much wider on desktop. Tried this:
#main-outlet {
width: auto;
max-width: 1210px; /* This makes the container as wide as the logo/header controls */
}
and this CSS made the overall container wider; and the suggested topics at the bottom span the page nicely but the overall width of the posts in the topics are too narrow (for my wide version).
Tried inspector, and a number of elements but not being a expert, could not get the width of the topics / posts to match the width of #main-outlet .
Do you mind to help me out?
Thanks
Also, tried this:
#main-outlet {
width: auto;
max-width: 80%;
}
But cannot the the posts width to match the container width:
topic-body has his own width setting.
Default:
.topic-body {
width: calc(690px + (11px * 2));
}
Change only the 690px and keep the rest (it’s linked to the padding of the topic post)
Thanks! Will give it a go later and post back the results.
I tried changing .topic-body yesterday, but I’ll try again based on your suggestion @Steven
Hi @Steven,
Added the following to the desktop CSS:
#main-outlet {
width: auto;
max-width: 80%;
}
.topic-body {
width: calc(1020px + (11px * 2));
}
It worked partially, but there is some issue. Perhaps you know the CSS trick to fix it?
See Image:
I’m not on my computer but I know there is some margin-left to correct with the class timeline-container
Right, for the timeline there are a few margin-lefts that need to be overridden on .timeline-container (three breakpoints):
Kris,
The way we got the wide look we wanted was to be less graceful and hide the .timeline-container.
#main-outlet {
width: auto;
max-width: 70%;
}
.topic-body {
width: 100%;
}
.timeline-container .topic-timeline {
display: none;
}
Not very graceful but at least it’s working ‘ok’ with large blocks of code, it is easier to read on the big developers screen.
Would be nice to show the .timeline-container but I could not get it to work overriding the class as suggested, surely because of my not well-developed CSS skills:
Thank you for your help and for this nice theme.
I am loving this theme so far. Many thanks for sharing it with us!
I’ve noticed on mobile view the category color bars disappear. Is this on purpose and is there a way to restore it?
Also, is there a way to turn off the background if a category has a background set? It seems to work okay but when scrolling on long posts the screen gets jerky and you can glimpse the theme set background.
Thanks!
Ray
I dug into mobile CSS and saw it was being excluded; commenting out the “left-border” portion turned the colored borders back on:
.category-list-item {
// border-left: none;
border-top: 2px solid;
.category-name {
font-weight: normal;
}
}
However, I know this will be overwritten whenever the theme is updated. What’s the best way to keep modifications in those situations?
I do have a custom theme component where I keep custom CSS changes, this in the mobile CSS portion:
.category-list-item {
border-left: 4px !important;
}
…but it doesn’t show the specific category color, just a white bar. How do I get it to show the proper category color? I know it has something to do with category color variables but I can’t seem to find reference to it.
I’m a newb when it comes to CSS and such so I may be doing something wrong.
Thanks,
Ray
这是默认行为，因为颜色是 #ffffff 的“低中”变量，而非纯色。
如需覆盖该颜色，请参阅此处：How to Change Header Icon Color? - #2 by awesomerobot
只是想提一下，这个主题真的很棒。我绝对喜欢它简洁的外观。
同意！这是目前外观最出色的 Discourse 主题之一。
Ray
我可能有点迟钝，但无法通过为调整 CSS 而创建的主题组件来更改 Logo 的大小。我可以调整整体页眉高度，但 Logo 却固执地保持不变。这段 CSS 似乎会抵消我尝试做的任何修改：
.d-header #site-logo {
max-height: 35px !important;
}
根据 Chrome 检查器显示，该样式来自：desktop-scss-graceful.scss
使用默认主题时更改 Logo 大小一切正常，而且如我所说，在 Graceful 主题中更改页眉高度也有效，唯独 Logo 不行……
是的，!important 会覆盖任何不带 !important 的其他 CSS 规则……我不记得它为什么在那里，但我应该检查一下并将其移除。如果你在自定义 CSS 中也加上 !important，这样能生效吗？
.d-header #site-logo {
max-height: 50px !important; // <-- 在此处设置你的自定义高度
}
感谢快速回复！我其实已经注意到了 !important，并尝试将其添加到我的代码中，但毫无效果。奇怪的是，现在尝试时，当我保存该更改并刷新页面后，它会在一瞬间显示为正确的大小，然后又会缩小回去。而且在检查器中，它看起来确实在按预期工作：
至少从 35px 被禁用的角度来看是这样。但顺序看起来至少有点奇怪。无论如何，它仍然不起作用。真奇怪。
为了提供参考，我是将其放在 Common CSS 中的……
更新：找到了！问题出在 header.scss 中的：
.d-header #site-logo { height: 2.667em; }
如果我再添加自己的 height 属性并加上 !important，就能正常工作了！
好的，下一个问题，我认为这特定于该主题。我将其作为基础来构建一个个人“博客”（实际上是一个数字花园，但这算是一个比较冷门的术语）。由于基本上每篇帖子都由我本人撰写，我希望移除或降低某些作者视觉元素的显著性，主要是头像，尤其是在首页和分类下的主题列表中。红色框出的是我希望能（如果可能的话）隐藏的部分：
你应该能看出原因。
我尝试过的方法：
）我还在研究并尝试各种组件，以显示主题中的第一张图片作为缩略图。如果能把这些头像替换为主题中第一张图片的小缩略图，那就太棒了。不过，先隐藏它们也是个不错的开始。
提前感谢！
